react的理解
用于构建用户界面的 JavaScript 库
react的注意事项
注意事项:
组件类的名称首字母必须大写,否则报错。组件类中的模板只能有一个顶层标签,否则报错。组件标签上class属性改成className for属性改成htmlFor
react的特点
1.声明式设计
2.高效
3.灵活
4.JSX
5.组件
6.单向响应的数据流
react的搭建的过程
安装nodeJS
安装create-react-app
npm install -g create-react-app
启动前进入创建的目录 然后执行启动的命令
npm run start或者 yarn start
js与html 混合的特点
1. 只能有一个根节点
2. 可以执行javascript表达式 {}
3. 类名class 变成 className
4. 行内样式 展开
5. 注释 {/ 注释 /}
6. 数组里面可以直接写html节点
React State(状态)
初始化组件 state
添加一个类构造函数来初始化状态 this.state
constructor() {
super(); //调用父对象构造函数
this.state={}
}
使用state
return (
);
组件生命周期
组件的生命周期可分成三个状态:
Mounting:已插入真实 DOM
Updating:正在被重新渲染
Unmounting:已移出真实 DOM
componentWillMount
在渲染前调用,在客户端也在服务端。一般用的比较少,更多的是用在服务端渲染
1、组件刚经历constructor,初始完数据
2、组件还未进入render,组件还未渲染完成,dom还未渲染
componentDidMount
在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
组件第一次渲染完成,此时dom节点已经生成,可以在这里调用ajax请求,返回数据setState后组件会重新渲染
componentWillReceiveProps
在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate
返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。
componentWillUpdate
在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate
在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount
在组件从 DOM 中移除之前立刻被调用。
- 条件渲染
{isLog?'欢迎回来':‘请登录’}
&&左右两边都为真,结果才为真 {isLog&&'已登录'}
- 列表渲染
- jsx中的数组里面可以包含 html Dom结构,在jsx 数组会自动展开
let list = [react,vue,angular]
list.map((item,index)=>{return(<div key={index}>{item}</div>)})
[<div key="0">react</div>,<div key="1">vue</div>,<div key="2">angular</div>]
表单绑定
- 双向绑定:
<input value={this.state.msg}
onChange={this.changeMsg.bind(this)}>`