请简述React生命周期调用方法的顺序 ?
React的组件生命周期可以划分为三个主要阶段:挂载阶段(Mounting)、更新阶段(Updating)和卸载阶段(Unmounting)。
以下是在React 16.3及以上版本中,每个阶段调用的生命周期方法的顺序:
- 挂载阶段(Mounting):在这个阶段,组件被创建并插入到DOM中。生命周期方法的调用顺序如下:
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
- 更新阶段(Updating):在这个阶段,组件的state或props发生改变,导致组件需要重新渲染。生命周期方法的调用顺序如下:
static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
- 卸载阶段(Unmounting):在这个阶段,组件被从DOM中移除。这个阶段只有一个生命周期方法:
componentWillUnmount()
注意,上述生命周期方法中,shouldComponentUpdate()
和getSnapshotBeforeUpdate()
是可选的,只有当你需要用到它们时才需要实现。
此外,React还有一个名为错误边界(Error Boundaries)的阶段,用于处理组件渲染过程中的错误。在这个阶段,有两个生命周期方法:
static getDerivedStateFromError()
componentDidCatch()
这两个方法都用于在渲染过程中捕获和处理错误。