共计 1806 个字符，预计需要花费 5 分钟才能阅读完成。
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 中统一的。
