React 组件的生命周期函数详解

阅读时长 8 分钟读完

React 是一个快速、高效且灵活的 JavaScript 库，用于构建用户界面。React 组件是 React 应用程序的构建块，是 JavaScript 类，可以接收任意的输入并返回 React 元素表示的视图。在 React 组件的生命周期中，有一些特殊的函数，被称为生命周期函数。这些生命周期函数在组件的不同阶段被调用，用于实现组件的初始化、更新和卸载等操作。

生命周期函数的分类

在 React 组件的生命周期中，生命周期函数可以分为三类：挂载阶段、更新阶段和卸载阶段。挂载阶段是指组件被添加到 DOM 中的过程；更新阶段是指组件在重新渲染时触发的过程；卸载阶段是指组件从 DOM 中移除的过程。每个阶段都有不同的生命周期函数，下面分别进行详细介绍。

挂载阶段

挂载阶段是组件第一次被渲染到 DOM 中的阶段。在这个阶段，组件会依次调用以下生命周期函数。

  1. constructor(props)

构造函数是组件的第一个函数，用来初始化组件的状态和属性。它在组件实例化时调用，只被调用一次。在构造函数中，可以使用 this.state 来初始化组件的状态，this.props 来访问组件的属性。

示例代码：

-- -------------------- ---- -------
----- --- ------- --------------- -
  ------------------ -
    -------------
    ---------- - - ------ - --
  -
  -------- -
    ------ ------------------------------
  -
-
  1. static getDerivedStateFromProps(props, state)

getDerivedStateFromProps 是静态方法，用于在组件的状态根据属性进行更新。在该方法中，可以根据传入的 props 和 state 返回一个新的状态，或者返回 null 表示不需要更新状态。

示例代码：

-- -------------------- ---- -------
----- --- ------- --------------- -
  ------------------ -
    -------------
    ---------- - - ------ - --
  -
  ------ ------------------------------- ------ -
    ------ ----------- - ----------- - - ------ ----------- - - -----
  -
  -------- -
    ------ ------------------------------
  -
-
  1. render()

render 是组件的必选函数，用于将组件渲染成 DOM 元素并返回。在 render 函数中，可以使用 this.props 和 this.state 访问组件的属性和状态。注意，不能在 render 函数中修改组件的状态，这种修改会导致无限循环更新。

示例代码：

-- -------------------- ---- -------
----- --- ------- --------------- -
  ------------------ -
    -------------
    ---------- - - ------ - --
  -
  -------- -
    ------ ------------------------------
  -
-
  1. componentDidMount()

componentDidMount 函数在组件挂载后立即调用，所以它是用于进行一些初始化操作的好地方。在该函数中，可以访问组件渲染后的 DOM 元素。

示例代码：

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

更新阶段

更新阶段是指在组件更新时触发的阶段。在组件的更新过程中，以下生命周期函数分别被调用。

  1. static getDerivedStateFromProps(props, state)

我们已经在挂载阶段介绍过 getDerivedStateFromProps 了，在更新阶段中它也会被调用。它的作用与挂载阶段相同。

  1. shouldComponentUpdate(nextProps, nextState)

shouldComponentUpdate 函数会在组件需要更新时调用。在该函数中，可以根据传入的 nextProps 和 nextState 来判断是否需要更新组件。如果返回 true，组件将继续更新；如果返回 false，组件将不会更新，直到 props 或 state 发生改变。

示例代码：

-- -------------------- ---- -------
----- --- ------- --------------- -
  ------------------ -
    -------------
    ---------- - - ------ - --
  -
  -------------------------------- ---------- -
    ------ --------------- --- ---------------- -- --------------- --- -----------------
  -
  -------- -
    ------ ------------------------------
  -
-
  1. render()

我们已经在挂载阶段介绍过 render 了，在更新阶段中它也会被调用。它的作用与挂载阶段相同。

  1. getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate 函数会在组件更新前被调用，可以在该函数中获取更新前的 DOM 元素，并返回一个值作为 componentDidUpdate 函数的第三个参数。

示例代码：

-- -------------------- ---- -------
----- --- ------- --------------- -
  ------------------ -
    -------------
    ---------- - - ------ - --
  -
  ---------------------------------- ---------- -
    ------ ---------------------------
  -
  ----------------------------- ---------- --------- -
    --------------------- ------ --------- ----------
  -
  -------- -
    ------ ------------------------------
  -
-
  1. componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate 函数会在组件更新后被调用。在该函数中，可以访问组件更新后的 DOM 元素，并根据更新前后的 props 和 state 进行一些操作。

示例代码：

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

卸载阶段

卸载阶段是指组件被从 DOM 中卸载的阶段。在组件卸载时，以下生命周期函数将被调用。

  1. componentWillUnmount()

componentWillUnmount 函数会在组件从 DOM 中卸载前被调用。在该函数中，可以进行一些清理操作，例如取消计时器或移除事件监听器。

示例代码：

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

总结

React 组件的生命周期函数是非常重要的，它们可以帮助我们掌握组件在不同阶段的行为，并针对不同阶段进行一些操作。在编写 React 组件时，我们应该充分利用这些生命周期函数，以提高组件的性能和可维护性。

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

纠错
反馈
相关推荐
精选内容