React 是一个快速、高效且灵活的 JavaScript 库，用于构建用户界面。React 组件是 React 应用程序的构建块，是 JavaScript 类，可以接收任意的输入并返回 React 元素表示的视图。在 React 组件的生命周期中，有一些特殊的函数，被称为生命周期函数。这些生命周期函数在组件的不同阶段被调用，用于实现组件的初始化、更新和卸载等操作。
生命周期函数的分类
在 React 组件的生命周期中，生命周期函数可以分为三类：挂载阶段、更新阶段和卸载阶段。挂载阶段是指组件被添加到 DOM 中的过程；更新阶段是指组件在重新渲染时触发的过程；卸载阶段是指组件从 DOM 中移除的过程。每个阶段都有不同的生命周期函数，下面分别进行详细介绍。
挂载阶段
挂载阶段是组件第一次被渲染到 DOM 中的阶段。在这个阶段，组件会依次调用以下生命周期函数。
- constructor(props)
构造函数是组件的第一个函数，用来初始化组件的状态和属性。它在组件实例化时调用，只被调用一次。在构造函数中，可以使用 this.state 来初始化组件的状态，this.props 来访问组件的属性。
示例代码：
----- --- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
-------- -
------ ------------------------------
-
-- static getDerivedStateFromProps(props, state)
getDerivedStateFromProps 是静态方法，用于在组件的状态根据属性进行更新。在该方法中，可以根据传入的 props 和 state 返回一个新的状态，或者返回 null 表示不需要更新状态。
示例代码：
----- --- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
------ ------------------------------- ------ -
------ ----------- - ----------- - - ------ ----------- - - -----
-
-------- -
------ ------------------------------
-
-- render()
render 是组件的必选函数，用于将组件渲染成 DOM 元素并返回。在 render 函数中，可以使用 this.props 和 this.state 访问组件的属性和状态。注意，不能在 render 函数中修改组件的状态，这种修改会导致无限循环更新。
示例代码：
----- --- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
-------- -
------ ------------------------------
-
-- componentDidMount()
componentDidMount 函数在组件挂载后立即调用，所以它是用于进行一些初始化操作的好地方。在该函数中，可以访问组件渲染后的 DOM 元素。
示例代码：
----- --- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
------------------- -
---------------------- --- -------
-
-------- -
------ ------------------------------
-
-更新阶段
更新阶段是指在组件更新时触发的阶段。在组件的更新过程中，以下生命周期函数分别被调用。
- static getDerivedStateFromProps(props, state)
我们已经在挂载阶段介绍过 getDerivedStateFromProps 了，在更新阶段中它也会被调用。它的作用与挂载阶段相同。
- shouldComponentUpdate(nextProps, nextState)
shouldComponentUpdate 函数会在组件需要更新时调用。在该函数中，可以根据传入的 nextProps 和 nextState 来判断是否需要更新组件。如果返回 true，组件将继续更新；如果返回 false，组件将不会更新，直到 props 或 state 发生改变。
示例代码：
----- --- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
-------------------------------- ---------- -
------ --------------- --- ---------------- -- --------------- --- -----------------
-
-------- -
------ ------------------------------
-
-- render()
我们已经在挂载阶段介绍过 render 了，在更新阶段中它也会被调用。它的作用与挂载阶段相同。
- getSnapshotBeforeUpdate(prevProps, prevState)
getSnapshotBeforeUpdate 函数会在组件更新前被调用，可以在该函数中获取更新前的 DOM 元素，并返回一个值作为 componentDidUpdate 函数的第三个参数。
示例代码：
----- --- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
---------------------------------- ---------- -
------ ---------------------------
-
----------------------------- ---------- --------- -
--------------------- ------ --------- ----------
-
-------- -
------ ------------------------------
-
-- componentDidUpdate(prevProps, prevState, snapshot)
componentDidUpdate 函数会在组件更新后被调用。在该函数中，可以访问组件更新后的 DOM 元素，并根据更新前后的 props 和 state 进行一些操作。
示例代码：
----- --- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
----------------------------- ---------- -
-- ---------------- - ----------------- -
------------------ --------- ---- ------------------
-
-
-------- -
------ ------------------------------
-
-卸载阶段
卸载阶段是指组件被从 DOM 中卸载的阶段。在组件卸载时，以下生命周期函数将被调用。
- componentWillUnmount()
componentWillUnmount 函数会在组件从 DOM 中卸载前被调用。在该函数中，可以进行一些清理操作，例如取消计时器或移除事件监听器。
示例代码：
----- --- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
---------------------- -
-------------------------------
-
-------- -
------ ------------------------------
-
-总结
React 组件的生命周期函数是非常重要的，它们可以帮助我们掌握组件在不同阶段的行为，并针对不同阶段进行一些操作。在编写 React 组件时，我们应该充分利用这些生命周期函数，以提高组件的性能和可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6470278e968c7c53b0e4abf4