React 生命周期（旧）
react旧版生命周期蕴含三个过程：
1、挂载过程
constructor()
componentWillMount()
componentDidMount()
2、更新过程
componentWillReceiveProps(nextProps)
shouldComponentUpdate(nextProps,nextState)
componentWillUpdate (nextProps,nextState)
render()
componentDidUpdate(prevProps,prevState)
3、卸载过程
componentWillUnmount()
其具体作用别离为：
1、constructor()
实现了React数据的初始化。
2、componentWillMount()
组件曾经实现初始化数据，然而还未渲染DOM时执行的逻辑，次要用于服务端渲染。
3、componentDidMount()
组件第一次渲染实现时执行的逻辑，此时DOM节点曾经生成了。
4、componentWillReceiveProps(nextProps)
接管父组件新的props时，从新渲染组件执行的逻辑。
5、shouldComponentUpdate(nextProps, nextState)
在setState当前，state发生变化，组件会进入从新渲染的流程时执行的逻辑。在这个生命周期中return false能够阻止组件的更新，次要用于性能优化。
6、componentWillUpdate(nextProps, nextState)
shouldComponentUpdate返回true当前，组件进入从新渲染的流程时执行的逻辑。
7、render()
页面渲染执行的逻辑，render函数把jsx编译为函数并生成虚构dom，而后通过其diff算法比拟更新前后的新旧DOM树，并渲染更改后的节点。
8、componentDidUpdate(prevProps, prevState)
从新渲染后执行的逻辑。
9、componentWillUnmount()
组件的卸载前执行的逻辑，比方进行“革除组件中所有的setTimeout、setInterval等计时器”或“移除所有组件中的监听器removeEventListener”等操作。
React生命周期（新）
react16.4后应用了新的生命周期，应用getDerivedStateFromProps代替了旧的componentWillReceiveProps及componentWillMount。应用getSnapshotBeforeUpdate代替了旧的componentWillUpdate。
应用getDerivedStateFromProps(nextProps, prevState)的起因：
旧的React中componentWillReceiveProps办法是用来判断前后两个 props 是否雷同，如果不同，则将新的 props 更新到相应的 state 下来。在这个过程中咱们实际上是能够拜访到以后props的，这样咱们可能会对this.props做一些奇奇怪怪的操作，很可能会毁坏 state 数据的繁多数据源，导致组件状态变得不可预测。
而在 getDerivedStateFromProps 中禁止了组件去拜访 this.props，强制让开发者去比拟 nextProps 与 prevState 中的值，以确保当开发者用到 getDerivedStateFromProps 这个生命周期函数时，就是在依据以后的 props 来更新组件的 state，而不是去拜访this.props并做其余一些让组件本身状态变得更加不可预测的事件。
应用getSnapshotBeforeUpdate(prevProps, prevState)的起因：
在 React 开启异步渲染模式后，在执行函数时读到的 DOM 元素状态并不总是渲染时雷同，这就导致在 componentDidUpdate 中应用 componentWillUpdate 中读取到的 DOM 元素状态是不平安的，因为这时的值很有可能曾经生效了。
而getSnapshotBeforeUpdate 会在最终的 render 之前被调用，也就是说在 getSnapshotBeforeUpdate 中读取到的 DOM 元素状态是能够保障与componentDidUpdate 中统一的。