react 基础部分相关的总结

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&&'已登录'}

• 列表渲染

1. 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)}>`