深入理解React生命周期

Howard 10/5/2021 React

React 生命周期是理解和掌握 React 组件行为的关键。在 React 中，每个组件都有自己的生命周期，这些生命周期方法允许您在不同的阶段执行操作，以便在组件的不同生命周期中处理数据和逻辑。

# React 生命周期的阶段

React 的生命周期总共有多个阶段，每个阶段都对应着组件的不同状态和行为。以下是 React 生命周期的主要阶段：

constructor：组件被创建时调用的构造函数。通常用于初始化组件的状态和绑定事件处理程序。
static getDerivedStateFromProps：这是一个静态方法，用于根据新的 props 计算并返回更新的状态。通常用于在 props 变化时更新组件的状态。
render：渲染方法，用于生成组件的虚拟 DOM。它是 React 组件生命周期中唯一必须实现的方法。
componentDidMount：组件已经被渲染到 DOM 中后调用的方法。通常用于执行一次性的操作，如数据获取或订阅事件。
shouldComponentUpdate：在组件接收到新的 props 或 state 时调用的方法。它决定了是否重新渲染组件。返回true表示重新渲染，返回false表示阻止重新渲染。
getSnapshotBeforeUpdate：在组件更新之前调用的方法。通常用于获取更新前的 DOM 状态。
componentDidUpdate：组件更新后调用的方法。通常用于处理组件更新后的操作，如 DOM 操作或数据同步。
componentWillUnmount：在组件即将从 DOM 中卸载时调用的方法。通常用于清理定时器、取消订阅或释放资源。
componentDidCatch：在组件的子组件抛出错误时调用的方法。通常用于处理错误并显示错误信息。

在 React 的发展过程中，一些生命周期方法已经过时，并不推荐使用。这些方法包括：

UNSAFE_componentWillMount：在组件即将被挂载到 DOM 之前调用的方法。已过时，请使用constructor或componentDidMount代替。
UNSAFE_componentWillUpdate：在组件即将被更新之前调用的方法。已过时，请使用componentDidUpdate代替。
UNSAFE_componentWillReceiveProps：在组件接收到新的 props 时调用的方法。已过时，请使用static getDerivedStateFromProps或componentDidUpdate代替。

在组件层面，React 的生命周期可以分为三种状态：

挂载是组件被创建并插入 DOM 中的过程。在挂载时，以下生命周期方法按顺序被调用：

更新是组件接收新的 props 或 state 并重新渲染的过程。在更新时，以下生命周期方法按顺序被调用：

卸载是组件从 DOM 中被移除的过程。在卸载时，以下生命周期方法被调用：

错误处理是处理子组件抛出错误的过程。在错误处理时，以下生命周期方法被调用：

在 React 的源码渲染调度中，有两个主要阶段：render 阶段和 commit 阶段。

在 render 阶段，以下生命周期方法会被调用：

在 commit 阶段，以下生命周期方法会被调用：

深入理解 React 生命周期是成为一个优秀的 React 开发者的关键之一。通过了解每个生命周期方法的作用和调用时机，您可以更好地管理组件的状态和行为，提高 React 应用的性能和可维护性。