React 新旧生命周期的区别

在React v16.3中，迎来了新的生命周期改动。旧的生命周期也在使用，不过在控制台上可以看到弃用警告了。并且提示有三个生命周期钩子将会被弃用，尽量不要使用。再或者可以在其前边加前缀 UNSAFE_。

• UNSAFE_componentWillMount
• UNSAFE_componentWillReceiveProps
• UNSAFE_componentWillUpdate
  处理了旧的钩子，又新引进了两个新的钩子。
• getDerivedStateFromProps
• getSnapshotBeforeUpdate

getDerivedStateFromProps()
会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
此方法适用于罕见的用例，即 state 的值在任何时候都取决于 props。
使用场景较单一，也是非必须使用。
在构造器中同样可以拿到props，通过props设置state，可以达成同样的目的。
getSnapshotBeforeUpdate()
在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate()。
至少返回一个null或者snapShot快照 ,快照值可以是任意值。

componentDidUpdate()在新的周期里也有这点小变化，可以传入snapshot快照值。

同样和旧的生命周期一样，我们把它存在三个阶段：挂载阶段，更新阶段，卸载阶段。
挂载阶段：
由ReactDOM.render触发

constructor=>getDerivedStateFromProps=>render=>componentDidMount

构造器=>获取props=>渲染=>挂载完成
更新阶段
父组件传值render更新触发

new Props => getDerivedStateFromProps=>shouldComponentUpdate=>render=>getSnapshotBeforeUpdate=>componentDidUpdate

——————————————
setState触发

setState=>getDerivedStateFromProps=>shouldComponentUpdate=>render=>getSnapshotBeforeUpdate=>componentDidUpdate

——————————————
强制更新触发

forceUpdate=>getDerivedStateFromProps=>render=>getSnapshotBeforeUpdate=>componentDidUpdate

即便新的生命周期变动比较大，但并不影响我们正常开发，因为实际开发中，这些更新内容并不常用。
常用的钩子还是三个：
*1、render() 出生
* 2、componentDidMount() 落地
* 3、componentWillUnmount() 将要离去