React生命周期

React生命周期

4个阶段：
1.挂载卸载过程（初始化）2. 更新过程 3. 销毁阶段 4. 错误处理阶段

1. 挂载卸载过程(构建并插入真实DOM)
   1.1.constructor()
   1.2.componentWillMount()
   1.3.render()
   1.4.componentDidMount()
2. 更新过程(更新数据重新渲染DOM)
   2.1. componentWillReceiveProps (nextProps)
   2.2.shouldComponentUpdate(nextProps,nextState)
   2.3.componentWillUpdate (nextProps,nextState)
   2.4.componentDidUpdate(prevProps,prevState)
   2.5.render()
3. 销毁阶段(移除真实DOM)
   3.1. componentWillUnmount()
4. 错误处理阶段(抓捕错误的生命周期)
   4.1. componentDidCatch()

1. 挂载卸载过程

1.1.constructor()
constructor()中完成了React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。
注意：只要使用了constructor()就必须写super(),否则会导致this指向错误。
1.2.componentWillMount()
componentWillMount()一般用的比较少，它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后，但是还未渲染DOM时。
组件将要挂载到虚拟DOM之前执行
唯一一个可以同步修改state的生命周期函数
1.3.componentDidMount()
组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染
渲染真实DOM
在此发送ajax请求
1.4.render()
生成虚拟DOM，此时并没有实际DOM

2. 更新过程

2.1. componentWillReceiveProps (nextProps)
在接受父组件改变后的props需要重新渲染组件时用到的比较多
接受一个参数nextProps
通过对比nextProps和this.props，将nextProps的state为当前组件的state，从而重新渲染组件
2.2.shouldComponentUpdate(nextProps,nextState)
主要用于性能优化(部分更新)
唯一用于控制组件重新渲染的生命周期，由于在react中，setState以后，state发生变化，组件会进入重新渲染的流程，在这里return false可以阻止组件的更新
因为react父组件的重新渲染会导致其所有子组件的重新渲染，这个时候其实我们是不需要所有子组件都跟着重新渲染的，因此需要在子组件的该生命周期中做判断
2.3.componentWillUpdate (nextProps,nextState)
shouldComponentUpdate返回true以后，组件进入重新渲染的流程，进入componentWillUpdate,这里同样可以拿到nextProps和nextState。
2.4.componentDidUpdate(prevProps,prevState)
组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。
2.5.render()
render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染。

3. 销毁阶段

3.1.componentWillUnmount()
在此处完成组件的卸载和数据的销毁。
组件将要销毁
清理定时器，解绑事件

4. 销毁阶段

4.1. componentDidCatch()
抓捕错误的生命周期

3. React新增的生命周期

3.1. getDerivedStateFromProps(nextProps, prevState)
3.2. getSnapshotBeforeUpdate(prevProps, prevState)