使用 React 生命周期处理组件状态-JavaScript中文网-JavaScript教程资源分享门户

React 是一种流行的前端框架，它提供了一种快速且有效的方式来构建动态 UI。React 生命周期是理解 React 内部工作原理的重要部分。了解 React 生命周期可以让我们更好地处理组件状态，响应用户交互并优化性能。

本文将介绍 React 生命周期，以及如何在组件中使用它们来处理状态。我们将讨论生命周期的不同阶段，以及在每个阶段如何执行代码。我们还将提供示例代码以帮助您更好地理解各个生命周期。

生命周期图示

在深入探讨每个生命周期的细节之前，让我们首先探讨 React 生命周期图示。该图示显示了 React 组件的各个生命周期，并说明了在每个生命周期阶段发生什么情况。这是一个重要的视觉指南，有助于理解和记忆 React 生命周期的顺序。

以下是 React 生命周期图示：

在这张图中，生命周期被分成三个主要阶段：

挂载阶段（Mounting）： 在这个阶段，组件正在被创建并插入到 DOM 中。React 组件的生命周期从 constructor 开始，并在 render 呈现到 DOM 之前结束。
更新阶段（Updating）： 在此阶段中，组件接收到新的属性并重新渲染。生命周期在重新渲染后开始，并在将新属性呈现到 DOM 前结束。
卸载阶段（Unmounting）： 在此阶段中，组件将从 DOM 中删除。生命周期开始于 componentWillUnmount 并终止于组件删除。

现在我们已经掌握了 React 生命周期的基本信息，让我们一起深入了解每个生命周期的细节。

挂载阶段

挂载阶段是 React 组件的生命周期的第一部分。它涵盖了从组件构建到呈现到 DOM 的整个流程。在这个阶段，我们可以使用一些 React 生命周期函数来处理组件状态：

constructor

在 React 组件被挂载到 DOM 之前，constructor 函数将被调用。这个函数可以用来初始化内部组件状态，也可以用来调用其他函数。constructor 的特点是你可以在里面直接操作 this.state，是唯一可直接操作 state 的函数。constructor 只会在组件实例化时被调用一次。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  // ...
}

static getDerivedStateFromProps

static getDerivedStateFromProps 函数是在组件挂载和更新时调用的。它接收 props 和 state 两个参数，并返回一个对象来更新 state。这个函数可以用来更新组件状态，以响应组件收到新属性的情况。getDerivedStateFromProps 不会在实例方法中访问的方法，没有调用值。

class Counter extends React.Component {
  static getDerivedStateFromProps(props, state) {
    return {
      count: props.defaultValue
    };
  }
  // ...
}

render

在每次组件挂载或者更新时，render 函数都会被调用。它的输出是一个描述组件的 React 元素，React 就利用这个元素来构建对应的 DOM 树。render 函数是一个 React 组件最有特点的函数。一个组件必须实现 render 函数。

class Counter extends React.Component {
  render() {
    return <div>{this.state.count}</div>;
  }
  // ...
}

componentDidMount

一旦组件插入到 DOM 中，componentDidMount 函数将被调用。这个函数可以用来执行一些需要访问 DOM 的操作，如初始化一些第三方插件、发起网络请求等等。componentDidMount 即为组件在页面上被渲染成功后触发的钩子函数。

class Counter extends React.Component {
  componentDidMount() {
    // Perform initialization here...
  }
  // ...
}

更新阶段

更新阶段是 React 生命周期的第二部分。在此阶段中，组件可能会接收到新属性并重新渲染。在组件渲染时，以下生命周期函数会被调用：

static getDerivedStateFromProps

在更新阶段中，getDerivedStateFromProps 函数也会被调用。和挂载阶段不同的是，因为 React 生命周期可以在每次组件渲染的过程中被调用，所以这个函数在更新阶段也会被触发。getDerivedStateFromProps 不会在实例方法中访问的方法，没有调用值。

class Counter extends React.Component {
  static getDerivedStateFromProps(props, state) {
    return {
      count: props.defaultValue
    };
  }
  // ...
}

shouldComponentUpdate

在一个组件更新之前，shouldComponentUpdate 将被调用。它的输出告诉 React 是否要继续进行更新。如果 shouldComponentUpdate 返回 false，则组件将不会被更新，并且阻止重新渲染。

shouldComponentUpdate 通常用于对性能进行优化。在响应用户交互、属性、或状态更改时，您可以使用 shouldComponentUpdate 来确定组件是否需要更新。如果你觉得某个属性不需要更新组件状态，则可以在这个函数中返回 false，从而避免重新渲染。

-- -------------------- ---- -------
----- ------- ------- --------------- -
  -------------------------------- ---------- -
    -- ---------------- - -- -
      ------ ------
    -
    ------ -----
  -
  -- ---
-

render

和挂载阶段一样，组件将被重新渲染，render 函数再次被调用。该函数的输出将告诉 React 应该如何更新 DOM。如果 shouldComponentUpdate 返回 false，render 函数将不被调用。

class Counter extends React.Component {
  render() {
    return <div>{this.state.count}</div>;
  }
  // ...
}

componentDidUpdate

在一个组件被重新渲染后，componentDidUpdate 将被调用。在此函数中，您可以使用 React DOM API 或其他 React 组件方法来更新本地状态，以及执行其他操作。componentDidUpdate 会在每次更新时被触发。

class Counter extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (this.state.count !== prevState.count) {
      // Perform other operations here...
    }
  }
  // ...
}

卸载阶段

卸载阶段是 React 生命周期的最后一部分。在此阶段中，组件将被从 DOM 中卸载。在组件被卸载时，以下函数将被调用：

componentWillUnmount

在组件被销毁时 componentWillUnmount 函数会被调用。您可以使用该函数在组件销毁前进行一些资源清理或者取消一些异步操作。

class Counter extends React.Component {
  componentWillUnmount() {
    // Cancel any ongoing operations here...
  }
  // ...
}

示例代码

下面是一个计数器组件的示例代码，使用了上述生命周期函数。这个组件在挂载到 DOM 时设置计数器值，当计数器的值增加到 5 时，shouldComponentUpdate 将返回 false，组件将不会被更新。

-- -------------------- ---- -------
----- ------- ------- --------------- -
  ------------------ -
    -------------
    ---------- - ------- ---
  -

  ------ ------------------------------- ------ -
    ------ -
      ------ ------------------
    --
  -

  -------------------------------- ---------- -
    -- ---------------- - -- -
      ------ ------
    -
    ------ -----
  -

  ----------------------------- ---------- -
    -- ----------------- --- ---------------- -
      -------------- ------ ----------------------
    -
  -

  ---------------------- -
    -------------------------------
  -

  -------- -
    ------ ------------------------------
  -
-

----------------
  -------- ---------------- ---
  -------------------------------
--

以上代码可以在你的项目中使用，希望可以帮助你更好地使用 React 生命周期处理组件状态。

总结

本文介绍了 React 生命周期以及在组件中使用的各种生命周期函数。虽然它们非常有用，但它们只是 React 提供的众多可能性之一。生命周期函数允许我们在 React 组件的特定时间节点中运行代码，并且通过这些代码可以获取和修改组件状态。希望本文可以帮助您加深对 React 生命周期的理解，在你的 React 项目中使用这些知识更好地处理组件状态。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6457081d968c7c53b09e399e