react17：生命周期函数

• 挂载时
• 更新时
• • setState触发更新、父组件重新渲染时触发更新
  • forceUpdate触发更新
• 卸载时

react（v17.0.2）的生命周期图谱如下。 

 

 

相较于16版本，17版本生命周期函数有如下变化：

componentWillMount()
componentWillUpdate()
componentWillReceiveProps()
+getDerivedStateFromProps(props,state)
+getSnapshotBeforeUpdate(prevProps,prevState)
虽然UNSAFE_componentWillMount、UNSAFE_componentWillUpdate、UNSAFE_componentWillReceiveProps当前依然可用，但在react未来的版本中可能被移除，所以尽量避免使用。更多可以访问如下链接：

 https://react.docschina.org/docs/react-component.html。
https://react.docschina.org/blog/2018/03/27/update-on-async-rendering.html。

挂载时

组件挂载时，会依次调用如下生命周期函数：

1. constructor(props)
2. static getDerivedStateFromProps(props)
3. render()
4. componentDidMount()

 其中，getDerivedStateFromProps必须用static修饰，它是类上的方法。且必须返回null或者状态对象（State Obect）。

getDerivedStateFromProps在实际开发中几乎不用，仅适用于state唯一取决于props的场景。

 

更新时

setState触发更新、父组件重新渲染时触发更新

setState、父组件重新渲染触发更新时，会依次调用如下生命周期函数：

1、static getDerivedStateFromProps()
2、shouldComponentUpdate(nextProps,nextState)
3、render()
4、getSnapshotBeforeUpdate(prevProps,prevState)
5、componentDidUpdate(prevProps,prevState,snapshot)
其中，getSnapshotBeforeUpdate(prevProps,prevState)必须返回null或任意快照值(Snapshot Value，undefined除外)。返回的快照值将作为componentDidUpdate的第三个形参。

forceUpdate触发更新

forceUpdate触发更新，会依次调用以下生命周期函数：

1. static getDerivedStateFromProps()
2. render()
3. getSnapshotBeforeUpdate()
4. componentDidUpdate()

 

卸载时

组件卸载时，会调用生命周期函数：

1. componentWillUnmount()