目录

  • 普通组件生命周期
  • 父子组件生命周期
  • 兄弟组件生命周期
  • 高阶组件生命周期

普通组件生命周期

1.挂载阶段

  1. constructor
  2. static getDerivedStateFromProps
  3. render
  4. componentDidMount

2.更新阶段

  1. static getDerivedStateFromProps
    触发途径有：NewProps、setState、forceUpdate
  2. shouldComponentUpdate
  3. render
  4. getSnapshotBeforeUpdate
  5. componentDidUpdate

3.卸载阶段

  1. componentWillUnmount

父子组件生命周期

1.挂载阶段

  1. constructor
  2. static getDerivedStateFromProps
  3. render
    同步子组件
    1. constructor
    2. static getDerivedStateFromProps
    3. render
    4. componentDidMount
  4. componentDidMount
    异步子组件
    1. constructor
    2. static getDerivedStateFromProps
    3. render
    4. componentDidMount

2.更新阶段

  1. static getDerivedStateFromProps
    触发途径有：NewProps、setState、forceUpdate
  2. shouldComponentUpdate
  3. render
    子组件
    1. static getDerivedStateFromProps
      触发途径有：NewProps、setState、forceUpdate
    2. shouldComponentUpdate
    3. render
    4. getSnapshotBeforeUpdate
    5. componentDidUpdate
  4. getSnapshotBeforeUpdate
  5. componentDidUpdate

3.卸载阶段

子组件

  1. componentWillUnmount
    父组件
  2. componentWillUnmount

兄弟组件生命周期

1.挂载阶段

参考父子组件兄弟组件从上到下顺序执行

2.更新阶段

参考父子组件兄弟组件从上到下顺序执行

3.卸载阶段

参考父子组件兄弟组件从上到下顺序执行

注意事项

shouldComponentUpdate

  • 父组件返回 false 子组件也会触发更新
    getDerivedStateFromProps
  • React 16.3 以后 setState、forceUpdate 同样会触发