react新旧版本生命周期函数讲解

react在引入 Fiber 之后，其生命周期也有所变化，新增了一些生命周期函数，同时也建议使用者废弃一些生命周期函数，下面博主对比一下react v16.3之前的生命周期与react v16.4及之后的生命周期函数。

---

一、生命周期图整体对比

1.1 react v16.3之前版本

• 挂载

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

  • constructor()
  • componentWillMount() (即将过时)
  • render()
  • componentDidMount()

• 更新

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

  • componentWillReceiveProps() (即将过时)
  • shouldComponentUpdate()
  • componentWillUpdate() (即将过时)
  • render()
  • componentDidUpdate()

• 卸载

  当组件从 DOM 中移除时会调用如下方法：

  • componentWillUnmount()

1.2 react v16.4开始的版本，可查看 react生命周期图谱

• 挂载

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

  • constructor()
  • static getDerivedStateFromProps() (新增)
  • render()
  • componentDidMount()

• 更新

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

  • static getDerivedStateFromProps() (新增)
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate() (新增)
  • componentDidUpdate()

• 卸载
  当组件从 DOM 中移除时会调用如下方法：

  • componentWillUnmount()

• 错误