React 中组件的生命周期有哪些阶段?

推荐答案

在 React 中,组件的生命周期可以分为三个阶段:

  1. 挂载阶段(Mounting)

    • constructor()
    • static getDerivedStateFromProps()
    • render()
    • componentDidMount()
  2. 更新阶段(Updating)

    • static getDerivedStateFromProps()
    • shouldComponentUpdate()
    • render()
    • getSnapshotBeforeUpdate()
    • componentDidUpdate()
  3. 卸载阶段(Unmounting)

    • componentWillUnmount()

此外,React 16 引入了 错误处理 阶段:

  • static getDerivedStateFromError()
  • componentDidCatch()

本题详细解读

1. 挂载阶段(Mounting)

挂载阶段是组件被创建并插入 DOM 的过程。以下是各个方法的详细说明:

  • constructor()
    这是组件的构造函数,用于初始化组件的状态(state)和绑定事件处理函数。
    注意:如果不初始化状态或不绑定方法,则不需要实现构造函数。

  • static getDerivedStateFromProps(props, state)
    这是一个静态方法,在组件挂载和更新时调用。它根据传入的 props 和当前的 state 返回一个新的状态对象,或者返回 null 表示不需要更新状态。

  • render()
    这是类组件中唯一必须实现的方法。它负责返回组件的 JSX 结构,用于描述 UI。

  • componentDidMount()
    组件挂载到 DOM 后立即调用。通常用于执行副作用操作,如网络请求、订阅事件或操作 DOM。


2. 更新阶段(Updating)

更新阶段是组件重新渲染的过程,通常由 propsstate 的变化触发。以下是各个方法的详细说明:

  • static getDerivedStateFromProps(props, state)
    在更新阶段,该方法会在 render() 之前调用,用于根据新的 props 更新 state

  • shouldComponentUpdate(nextProps, nextState)
    该方法决定组件是否需要重新渲染。返回 true 表示需要更新,返回 false 则跳过更新。通常用于性能优化。

  • render()
    重新渲染组件,返回新的 JSX 结构。

  • getSnapshotBeforeUpdate(prevProps, prevState)
    在 DOM 更新之前调用,用于捕获 DOM 的当前状态(如滚动位置)。返回值将作为参数传递给 componentDidUpdate()

  • componentDidUpdate(prevProps, prevState, snapshot)
    组件更新完成后调用。通常用于执行 DOM 操作或网络请求。


3. 卸载阶段(Unmounting)

卸载阶段是组件从 DOM 中移除的过程。

  • componentWillUnmount()
    组件卸载前调用,用于清理操作,如取消网络请求、移除事件监听器或清理定时器。

4. 错误处理阶段(Error Handling)

React 16 引入了错误边界(Error Boundaries)机制,用于捕获子组件的 JavaScript 错误。

  • static getDerivedStateFromError(error)
    当子组件抛出错误时调用,用于更新组件的状态以显示错误 UI。

  • componentDidCatch(error, info)
    当子组件抛出错误时调用,用于记录错误信息或执行副作用操作。


通过理解这些生命周期方法,开发者可以更好地控制组件的行为,优化性能,并处理错误。

纠错
反馈