旧版生命周期函数

10759997-b398cc11c434a3f0.jpg

react 16.4 以后生命周期函数

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

image.png

挂载

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

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

注意⚠️:
下述生命周期方法即将过时，在新代码中应该避免使用它们
UNSAFE_componentWillMount()

更新

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

• static getDerivedStateFromProps(props, state)
• shouldComponentUpdate(nextProps, nextState)
• render()
• getSnapshotBeforeUpdate(prevProps, prevState)
  应返回 snapshot 的值（或 null）。
• componentDidUpdate(prevProps, prevState, snapshot)

注意⚠️:
下述方法即将过时，在新代码中应该避免使用它们
UNSAFE_componentWillUpdate()
UNSAFE_componentWillReceiveProps()