React 学习第二天 2018-07-21
React 学习第二天
我这个React 学习存在以下毛病
1.不报错,
2.不能自动热加载,不能自动刷新
3.不能修改props 属性的值,但是这个却能够修改。
1.Vue 和React的关于 key 的区别
1.1 使用v-for 和map 的时候,尽量使用key 进行绑定,否则会产生相关的紊乱。
1.2 react 中,在进行forEach 循环/for 循环/ map 时,需要添加 key 给 相关控制的元素。
数组的forEach 和数组的 map 方法。
forEach 遍历每一项,然后进行相关的操作,
map 遍历每一项,然后生成一个新的数组,会有返回值,需要接收。
//方案一,数组的forEach 方法
arrStr.forEach(item =>{
const temp = <h5 key={item}>{item}</h5>
nameStr.push(temp);
})
//方案二,数组的map 方法,map 中必须写return
const result = arrStr.map(item => {
return item+ '---'
});
console.log(result);
2.JSX 语法中的注释。
{/* 这个是注释一*/}
{
//这个是注释 二
}
还有就是 class===》》》className
for -->>> htmlFor
//假设main.js 是入口文件,
console.log('01--假设这个是初始化文件');
//1.导入包名。
import React from 'react' //创建组件,创建虚拟DOM,生命周期的相关,
import ReactDOM from 'react-dom' //渲染到页面展示相关,
//2. 创建虚拟的DOM 元素,
//第一个参数,创建元素的标签类型,
//第二个参数是节点的属性,
//第三个参数是标签的子元素,或者内容
// const h1= React.createElement('h1',{id : 'h1',title :'h'},'这个想试图创建一个H1');
// // const mydiv = React.createElement('div',null,'这个是div 元素',h1);
// const div1 = <div>这个是一个div
// <h1 >这个是h1</h1>
// </div>
//3.把虚拟DOM 渲染到页面上。
//第一个参数,渲染谁,
//第二个参数,渲染的容器,
let a = 10 ///等价于 const a = 10
let str = '您好,刘送杰同学';
const h1 = <h1>这个是一h1</h1>
const arr = [
<h1>第一个</h1>,
<h1>第二个</h1>
];
let arrStr = ['柯南','毛利小五郎','毛利小可爱','小柯南'];
const nameStr = [];
//方案一,数组的forEach 方法
arrStr.forEach(item =>{
const temp = <h5 key={item}>{item}</h5>
nameStr.push(temp);
})
//方案二,数组的map 方法,map 中必须写return
const result = arrStr.map(item => {
return item+ '---'
});
//console.log(result);
ReactDOM.render(<div>
{a}--<hr/>{str}
<hr/>{h1}
{/* 这个是注释*/}
{
//这个是注释
}
<hr/>
{arr}
<hr/>
{nameStr}
<hr/>
{arrStr.map(item => {
return <h3 key={item}>{item}</h3>
})}
<hr/>
<p className="myname">!11!!!!</p>
<label for="000">1111</label>
</div>,document.getElementById('app'))
//上面这个方式比较复杂,不人性化
//const h11= <div>这个是一个div</div>,但是不能解析,需要相关的包,需要使用bable 进行转换。
3.React 中创建组件的方式
3.1 第一种
第一步,创建
function Hello (){
//如果在一个组件中return 一个null, 表示空组建,什么都不渲染,
//return null;
//这种以对象或者函数的方式创建的组件,必须返回一些内容,实在不行,也要返回
//一个空内容
//使用的时候,/*将组件的名称,直接以标签的形式丢到页面上即可*/
return <h1>返回一个h1</h1>;
}
第二步,传递数据,
定义好数据,const dog ={}
先在<Hello name={dog.name}></Hello>,通过属性进行传递传递数据
然后在 组件内部取,props.name props.age
//构造函数中接收外在函数传递的数值。
function Hello (props){
//如果在一个组件中return 一个null, 表示空组建,什么都不渲染,
//return null;
//这种以对象或者函数的方式创建的组件,必须返回一些内容,实在不行,也要返回
//一个空内容
//使用的时候,/*将组件的名称,直接以标签的形式丢到页面上即可*/
console.log(props);
props.testage =15; //试图赋值--视频老师说无法赋值,但是我成功了。
props.testcolor = '白色'
return <div>返回一个h11111--{props.testage}--{props.testcolor}</div>;
}
const dog ={
age : 123,
name : '大黄',
color :'黄色'
}
ReactDOM.render(<div>
{/*将组件的名称,直接以标签的形式丢到页面上即可*/}
<Hello testage={dog.age} testcolor={dog.color}></Hello>
</div>,document.getElementById('app'));
上;述方式的缺点:就是传递属性的个数有限,如果传递多个,写起来不好看
使用ES6的展开运算符简化传递props数据的过程04.使用ES6的展开运算符简化传递props数据的过程
新方法:<Hello {...dog}></Hello>
以 三个... 展开运算符,将某一个对象的值展开给其他的对象使用
const o2 = {
name : '大黄',
...o1
}
4. 组件的首字母名称必须大写
5.创建组件的第二种方式,将组件抽离为单独的文件
第一步,单独抽取出来,
import React from 'react' //第一步,必须
//创建组件的第二种方式,
//抽取出来,放到 .jsx 中
function Hello (props){
//如果在一个组件中return 一个null, 表示空组建,什么都不渲染,
//return null;
//这种以对象或者函数的方式创建的组件,必须返回一些内容,实在不行,也要返回
//一个空内容
//使用的时候,/*将组件的名称,直接以标签的形式丢到页面上即可*/
console.log(props);
props.testage =15; //试图赋值
props.testcolor = '白色'
return <div>返回一个h11111--{props.testage}--{props.testcolor}</div>;
}
//然后暴露出去,
export default Hello //暴露也是必须的
第二步,在需要的index.js 等文件中进行导入。
import Hello from './components/Hello.jsx
6..配置webpack从而在导入组件的时候,省略.jsx后缀名
在webpack.config.js 中进行相关配置,增加一个resolve 节点,配置,extensions 属性
resolve :{
extensions :['.js','.jsx','.json'] //表示这几个文件的后缀名,可以省略不写,
}
7. 通过 alias 配置相关别名。
8.使用class 的相关学习
8.1 创建类,
8.2 实例属性(构造器中),静态属性(类上), ---静态的实例访问不到
8.3 实例方法,(挂载是原型实例上的) 静态方法(挂载在构造函数中的)
9.继承的学习,构造器,extends , super 等的学习
11.基于class 关键字的创建组件
//1.继承React.Component //2.返回一个JSX 虚拟DOM结构
class 组件名称 extends React.Component {
render (){
return <div>这个是由class 关键字创建的组件</div>
}
}
//使用class 关键字创建组件
class Movie extends React.Component{
//render 函数的作用,渲染当前组件对应的虚拟DOM结构
render(){
//这里必须返回一个JSX 虚拟DOM结构
//return null;
return <div>test DIV </div>
}
}
传递值: 也是有两种方式,
//学习 React 中创建组件
import React from 'react'
import ReactDOM from 'react-dom'
// import './components/Test.js'
//使用class 关键字创建组件
class Movie extends React.Component{
//render 函数的作用,渲染当前组件对应的虚拟DOM结构
render(){
//这里必须返回一个JSX 虚拟DOM结构
//return null;
return <div>test DIV 组件
{this.props.name} --{this.props.time}
{/* class 创建的组件中,直接使用this.props.name 调用就行。 */}
</div>
}
}
const dianying = {
name : '我不是妖神',
time : 120
}
ReactDOM.render(<div>
{/*将组件的名称,直接以标签的形式丢到页面上即可*/}
{/* <Movie name={dianying.name} time={dianying.time}></Movie>*/}
<Movie {...dianying}></Movie>
</div>,document.getElementById('app'));
12.class 创建的组件的 function 创建的组件的区别
12.1 使用class 关键字创建的组件,有自己的私有数据和生命周期函数,
12.2 function 创建的组件,只有通过外界传递的props ,没有自己的私有数据和生命周期函数。
12.3 class 创建的叫做有状态组件,function 创建的叫做无状态组件,本质区别就是有无state 属性和生命周期函数。
12.4 如果一个组件需要有自己的私有数据,推荐使用class 创建组件,如果一个组件不需要私有数据,则推荐使用无状态组件。
12.5 props 是不可修改的,state的是可以修改的
//学习 React 中创建组件
import React from 'react'
import ReactDOM from 'react-dom'
// import './components/Test.js'
//使用class 关键字创建组件
class Movie extends React.Component{
constructor(){
//由于Movie 组件集成了React.Component 父类,因此需要调用super,
super();
this.state = {
msg : '大家好,这个是自己的私有数据哦!'
} //相当于VUE组件中的data () {return {}}数据组件,
}
//render 函数的作用,渲染当前组件对应的虚拟DOM结构
render(){
//这里必须返回一个JSX 虚拟DOM结构
//return null;
this.props.name = '李斯'
return <div>test DIV 组件
{this.props.name} --{this.props.time}
<hr/>
{this.state.msg}
{/* class 创建的组件中,直接使用this.props.name 调用就行。 */}
</div>
}
}
const dianying = {
name : '我不是妖神',
time : 120
}
ReactDOM.render(<div>
{/*将组件的名称,直接以标签的形式丢到页面上即可*/}
{/* <Movie name={dianying.name} time={dianying.time}></Movie>*/}
<Movie {...dianying}></Movie>
</div>,document.getElementById('app'));
13.案例, 实现一个评论组件
13.1 创建组件的一个模板
import React from ‘react’
import ReactDOM from ‘react-dom’
class Cmt extends React.Component {
constructor (){
super();
this.state = { }
}
render (){
return <div></div>
}
}
React.render(<div></div>.document.getElementById(‘app’))
13.2 具体内容
//学习 React 中创建组件
import React from 'react'
import ReactDOM from 'react-dom'
//定义父组件
class CmtList extends React.Component{
constructor(){
super();
this.state = {
CommentList : [
{id : 0, user : '段振春',content :'我爱python'},
{id : 1, user : '蔡州',content :'我爱java'},
{id : 2, user : '丁林',content :'我C++'},
{id : 3, user : '刘毅',content :'我爱PHP'},
{id : 4, user : '沁雄',content :'我爱JS'},
]
};
}
render (){
return <div>
<h1>这个是评论列表组件</h1>
{/*循环展示数据*/}
{this.state.CommentList.map(item => <div key={item.id}>
<h1>评论人 :{item.user}</h1>
<p>评论内容 :{item.content}</p>
</div>)}
</div>
}
}
ReactDOM.render(<div>
<CmtList></CmtList>
</div>,document.getElementById('app'));
改进版: 将每一个评论内容变成无状态组件
//第一步导包
import React from 'react'
import ReactDOM from 'react-dom'
//使用function 创建无状态组件
function CmtItem(props){
return <div key={props.id}>
<h1>评论人:{props.user}</h1>
<p>评论内容:{props.content}</p>
</div>
}
//使用class 创建有状态组件
class CmtList extends React.Component{
constructor(){
super();
this.state = {
CommentsList : [
{id : 0,user :'大周',content :'我是出勤员'},
{id : 1,user :'康康',content :'我是硬件码农'},
{id : 2,user :'佩佩',content :'我是佩奇'},
{id : 3,user :'翠翠',content :'我是小翠翠'},
]
}
}
render(){
return <div>
<h1>这个是一个评论列表组件</h1>
{/* {this.state.CommentsList.map(item => <div key={item.id}>
<h3>评论人:{item.user}</h3>
<p>评论内容:{item.content}</p>
</div>)} */}
{this.state.CommentsList.map(item => <CmtItem {...item}></CmtItem>)}
</div>
}
}
//最后一个,进行DOM的渲染
ReactDOM.render(<div>
<CmtList></CmtList>
</div>,document.getElementById('app'));
14.继续简化,进行抽离。
抽离需要注意两点:
第一点: 引入React,以及相关依赖的子组件
第二点: 暴露出去。
CmtItem.jsx
//第一步,引入
import React from 'react'
//第二步,暴露出去
//使用function 创建无状态组件
export default function CmtItem (props){
return <div>
<h1>评论人:{props.user}</h1>
<p>评论内容:{props.content}</p>
</div>
}
CmtList.jsx
//第一步,引包
import React from 'react'
//导入子组件
import CmtItem from './CmtItem'
//第二步,暴露
export default class CmtList extends React.Component{
constructor(){
super();
this.state = {
CommentsList : [
{id : 0,user :'大周',content :'我是出勤员'},
{id : 1,user :'康康',content :'我是硬件码农'},
{id : 2,user :'佩佩',content :'我是佩奇'},
{id : 3,user :'翠翠',content :'我是小翠翠'},
]
}
}
render(){
return <div>
<h1>这个是一个评论列表组件</h1>
{/* {this.state.CommentsList.map(item => <div key={item.id}>
<h3>评论人:{item.user}</h3>
<p>评论内容:{item.content}</p>
</div>)} */}
{this.state.CommentsList.map(item => <CmtItem {...item}></CmtItem> )}
</div>
}
}
15. 配置webpack设置根目录..@ 符号配置。配置到src 目录。
16.
17.
18.
React 学习第二天 2018-07-21相关推荐
- 【跃迁之路】【531天】程序员高效学习方法论探索系列(实验阶段288-2018.07.21)...
@(跃迁之路)专栏 [跃迁之路]奖励金计划正式开始 从2018.7.1起,[跃迁之路]奖励金计划正式起航,从今以后,每月1日,我会将自己个人上月收入的1%计入[跃迁之路]奖励金池,积累到足够金额后,将 ...
- React学习笔记 - 组件Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- 2018.07.19 仿优酷网页小项目
时间:2018.07.19 大一下学期暑假 地点:成都-实习 项目类型:HTML+CSS仿优酷网页 制作时间:两天 网页源码: <!doctype html> <html> & ...
- RedHat6.5虚拟机架设Redis和Kafka伪集群(2018.8.21最新重要补充!)
架设Redis: 虚拟机架设,桥接模式下要保证实体机能上网,这样虚拟机才会分配到一个ip(这里是192.168.43.105),方便下面的集群配置每个节点ip,伪集群都设置成一个, 但要保证这个ip网 ...
- 再发力!Facebook AI何恺明等最新研究MoCo(动量对比学习)第二版,超越Hinton的SimCLR,刷新SOTA准确率...
关注上方"深度学习技术前沿",选择"星标公众号", 资源干货,第一时间送达! [导读]无监督学习再发力!Facebook AI 研究团队的陈鑫磊.樊昊棋.Ros ...
- react render没更新_web前端教程分享React学习笔记(一)
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
- 2019 年 React 学习路线图
作者 | javinpaul 译者 | 无明 之前我们已经介绍了 2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框架,在 Facebook 的支持下,近年来实现了飞越式的发 ...
- 2018.01.21.一周机器学习周记
时间:2018.01.21.一周 主要内容 1.整理前期关于决策树的一个小型实践项目文档(实践进行中) 2.搭建TensorFlow环境(进行中) 3.拓展:实践Python的自动化模块pyautog ...
- React 学习第一天-2018-07-21
React 学习第一天 1.Dom 和虚拟Dom Dom 是浏览器中实际存在的,虚拟Dom是框架中的,是利用JS代码来模拟DOM. 虚拟Dom 是实现页面的实时更新. Dom树,一个网页的呈现过程, ...
最新文章
- 我们用Windows官方跑了跑Linux GUI应用程序,不愧是“胶水操作系统”
- 整数划分问题【递归以及递推求解方式】
- python画六边形
- WinCE驱动的动态加载
- 漫话:如何给女朋友解释什么是删库跑路?
- Hibernate 动态表名映射(数据库分表) NamingStrategy
- php 求 相似 比,php比较相似字符串的方法
- 前端项目,将package.json数据放到项目某处使用
- Discuz 群组 新加入 活跃成员 成员列表 会员数量问题!
- Shoulda, Woulda, Coulda
- TongWeb部署Dm数据库的项目报错
- GPS在ROS中的测试和使用
- c语言for循环26个英文字母,C语言创建链表并且插入输出26个英文字母
- JavaWeb解决中文下载出现乱码问题
- 神经网络低比特量化——LSQ
- Java接口的基本概念详解
- alarm中断慢系统调用
- DRV8833真值表
- 数据结构:单链表包含(归并)
- 74160ENT引脚设计法接成1000进制加法计数器