跳到主要内容

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

参考答案：

React的生命周期方法可以分为三个阶段：加载（Mounting）、更新（Updating）和卸载（Unmounting）。以下是每个阶段中生命周期方法的调用顺序：

  1. 加载（Mounting）阶段：

    • constructor()：构造函数，用于初始化组件的状态（state）和绑定事件处理函数。
    • componentDidMount()：组件被插入到DOM中后立即调用，常用于发起网络请求、订阅事件、执行只需要执行一次的初始化操作等。

  2. 更新（Updating）阶段：

    • componentWillReceiveProps(nextProps)：组件接收到新的属性（props）时调用，可以在此根据新的props更新组件的state。
    • shouldComponentUpdate(nextProps, nextState)：返回一个布尔值，用于判断是否需要重新渲染组件。默认返回true，如果需要提高性能可以重写此方法。
    • componentWillUpdate(nextProps, nextState)：组件即将重新渲染时调用，可以在此执行一些准备工作，如清空定时器、取消网络请求等。
    • render()：重新渲染组件，返回虚拟DOM。
    • componentDidUpdate(prevProps, prevState)：组件更新完成后调用，可以在此执行DOM操作或网络请求等。

  3. 卸载（Unmounting）阶段：

    • componentWillUnmount()：组件从DOM中卸载及销毁前调用，可以在此清理在componentDidMount中创建的定时器、取消网络请求、清除事件监听器等。

请注意，从React 16.3版本开始，React引入了新的生命周期方法，如getDerivedStateFromProps和getSnapshotBeforeUpdate，这两个方法分别在render方法和componentDidUpdate方法之前调用。因此，如果你正在使用较新版本的React，生命周期方法的调用顺序可能会有所不同。