React 新版生命周期

与旧版生命周期相比，React 生命周期即将废弃componentWillMount()、componentWillReceiveProps()、componentWillUpdate()三个钩子，现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

新版增加了两个钩子：getDerivedStateFromProps()和getSnapshotBeforeUpdate()。

1. 初始化阶段

由ReactDOM.render()触发

1. constructor()

2. getDerivedStateFromProps()

   在调用render()方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新state，如果返回 null 则不更新任何内容

   使用场景（罕见）：state的值在任何时候都取决于props

3. render()

4. componentDidMount()

   一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

2. 更新阶段

由组件内部this.setSate()或父组件重新render()触发

1. getDerivedStateFromProps()

2. shouldComponentUpdate()

3. render()

4. getSnapshotBeforeUpdate()

   最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()

5. componentDidUpdate()

3. 卸载组件

由ReactDOM.unmountComponentAtNode()触发

1. componentWillUnmount()

   组件即将卸载时触发

   一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息