React 生命周期解析：从初始化到更新与销毁

2023-12-22 22:06:28

React 是一个用于构建用户界面的 JavaScript 库，它的组件生命周期是一系列钩子和方法，可以在组件的不同阶段调用。这篇文章将重点介绍 React 生命周期中的三个主要阶段：初始化阶段、更新阶段和销毁阶段，帮助你全面理解组件的生命周期。

一、初始化阶段

初始化阶段是指组件第一次被创建和挂载到 DOM 时所经历的阶段，在这个阶段，组件会经历以下几个步骤：

构造函数 (constructor)：

构造函数是组件生命周期的第一个方法，它在组件被创建时被调用。在构造函数中，你可以对组件的状态和属性进行初始化。
getDerivedStateFromProps (静态方法)：

getDerivedStateFromProps 是一个静态方法，它在组件第一次挂载到 DOM 之前被调用。它允许你根据组件的 props 来计算组件的初始状态。
render：

render 方法是组件生命周期的核心方法，它负责渲染组件的 UI。在组件第一次挂载到 DOM 之前，render 方法会被调用。之后，每当组件的状态或 props 发生变化时，render 方法也会被调用。
componentDidMount：

componentDidMount 方法在组件第一次挂载到 DOM 之后被调用。在这个方法中，你可以执行一些与 DOM 相关的操作，例如：获取 DOM 元素的引用、设置事件监听器等。

二、更新阶段

更新阶段是指组件的状态或 props 发生变化时所经历的阶段，在这个阶段，组件会经历以下几个步骤：

shouldComponentUpdate (可选)：

shouldComponentUpdate 方法在组件收到新的 props 或状态时被调用。它可以让你决定是否需要更新组件。默认情况下，shouldComponentUpdate 方法总是返回 true，这意味着组件在每次收到新的 props 或状态时都会更新。
render：

当组件需要更新时，render 方法会被调用。与初始化阶段一样，render 方法负责渲染组件的 UI。
getSnapshotBeforeUpdate (可选)：

getSnapshotBeforeUpdate 方法在组件更新之前被调用。它允许你获取组件更新前的一些信息，以便在组件更新之后使用。
componentDidUpdate：

componentDidUpdate 方法在组件更新之后被调用。在这个方法中，你可以执行一些与组件更新相关的操作，例如：更新组件的缓存数据、触发事件等。