请简述React生命周期调用方法的顺序 ?

React的组件生命周期可以划分为三个主要阶段:挂载阶段(Mounting)、更新阶段(Updating)和卸载阶段(Unmounting)。

以下是在React 16.3及以上版本中,每个阶段调用的生命周期方法的顺序:

  1. 挂载阶段(Mounting):在这个阶段,组件被创建并插入到DOM中。生命周期方法的调用顺序如下:
  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()
  1. 更新阶段(Updating):在这个阶段,组件的state或props发生改变,导致组件需要重新渲染。生命周期方法的调用顺序如下:
  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()
  1. 卸载阶段(Unmounting):在这个阶段,组件被从DOM中移除。这个阶段只有一个生命周期方法:
  • componentWillUnmount()

注意,上述生命周期方法中,shouldComponentUpdate()getSnapshotBeforeUpdate()是可选的,只有当你需要用到它们时才需要实现。

此外,React还有一个名为错误边界(Error Boundaries)的阶段,用于处理组件渲染过程中的错误。在这个阶段,有两个生命周期方法:

  • static getDerivedStateFromError()
  • componentDidCatch()

这两个方法都用于在渲染过程中捕获和处理错误。

发表评论

后才能评论