React严格定义了组件的生命周期，生命周期可能会经历如下三个过程：
·装载过程（Mount），也就是把组件第一次在DOM树中渲染的过程；
·更新过程（Update），当组件被重新渲染的过程；
·卸载过程（Unmount），组件从DOM中删除的过程。
组件渲染
state和prop的改变会驱使组件重新渲染，但是不能简单的改变state，必须使用this.setState（）函数，它会先改变state的值，然后驱动组件更新；但是props值是不应该被修改的，因为如果存在父组件对应多个子组件，某个子组件修改prop值，会导致程序混乱，其它子组件不确定会使用正确的prop值。
组件生命周期
每个组件在网页中被创建、更新和删除，拥有自己的生命周期
生命周期可能经历三个过程：
1.装载过程（Mount），组件第一次在DOM中渲染的过程
2.更新过程（Update），组件被重新渲染的过程
3.卸载过程（UNmount），组件从DOM汇总删除的过程
组件创建过程中经历的函数：
componentWillMount：组件挂载之前执行，只执行一次
componentDidMount: 组件渲染完成，只执行一次
componentWillRecevieProps: 组件将要接收新的props执行
shouldComponentUpdate: 判断组件是否应该重新渲染，默认是true
componentWillUpdate: 组件将要重新渲染
componentDidUpdate: 组件重新渲染完成
componentWillUnmount: 卸载组件
1.constructor
- 组件生命周期第一个被调用的函数；
- 无状态组件不需要定义构造函数；
- 初始化state；
- 绑定this的执行环境；
2.componentWillMount
render函数前被调用，但是写组件的过程中一般不会使用，该函数发生在将要装载的时候。所有的函数可以在constructor中执行。服器中可以被调用。
3.componentDidMount
render函数之后执行，组件已经挂载到DOM树上。服务器端不能被调用。适用于一些浏览器中才做的逻辑，ajax获取数据填充函数之类的。
4.组件更新过程 依次调用以下函数
·componentWillReceiveProps
·shouldComponentUpdate
·componentWillUpdate
·render
·componentDidUpdate
5.componentsWillReciveProps （nextProps）
当componets将要接收新的props时这个函数会被调用;
并且父组件函数被调用，render函数里面渲染的子组件会经历更新过程，无论父组件传给子组件的props有没有改变，都会触发子组件的这个函数。-
6.shouldComponentUpdate（nextProps，nextState）
决定了一个组件什么时候不需要渲染，组件判断是否重新渲染时调用。
网友评论