ReactJS 是一种用于构建用户界面的 JavaScript 库。在 React 应用程序中，组件是构建块，这些组件可以通过使用生命周期方法来管理它们的状态和行为。本文将介绍 ReactJS 生命周期方法的概念，包括组件的挂载、更新和卸载过程，并提供示例代码和指导意义。
组件的生命周期
ReactJS 组件的生命周期由三个阶段组成：挂载（mounting）、更新（updating）和卸载（unmounting）。这些阶段涉及到一系列生命周期方法，用于管理组件的各种状态和行为。下面我们详细介绍每个阶段以及相关的生命周期方法。
1. 挂载阶段
当组件被创建并加入 DOM 中时，就进入了挂载阶段。在这个阶段，ReactJS 调用以下生命周期方法：
- constructor(props): 构造函数，用于初始化组件的状态和属性。
- static getDerivedStateFromProps(props, state): 该方法会在组件实例化之后，和每次接收新的 props 时被调用，在此方法内部调用 setState 方法不会触发额外的渲染。该方法必须要有返回值，通常返回一个对象来更新状态。
- render(): 渲染函数，用于生成虚拟 DOM。
- componentDidMount(): 组件挂载完成后调用的方法，通常用于执行一些副作用操作，比如网络请求和 DOM 操作。
2. 更新阶段
当组件的 props 或者 state 发生变化时，就进入了更新阶段。在这个阶段，ReactJS 调用以下生命周期方法：
- static getDerivedStateFromProps(props, state): 和挂载阶段相同。
- shouldComponentUpdate(nextProps, nextState): 判断组件是否需要重新渲染，该方法返回一个布尔值，如果为 true，则组件会进行重新渲染，否则不会。
- render(): 和挂载阶段相同。
- componentDidUpdate(prevProps, prevState): 组件完成更新后调用的方法，通常用于执行一些副作用操作，比如网络请求和 DOM 操作。
3. 卸载阶段
当组件从 DOM 中移除时，就进入了卸载阶段。在这个阶段，ReactJS 调用以下生命周期方法：
- componentWillUnmount(): 当组件从 DOM 中移除之前调用的方法，通常用于清理一些定时器和事件监听器等资源。
示例代码
下面是一个简单的计数器组件示例，展示了生命周期方法的应用：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------- ------- --------- -
------------------ -
-------------
---------- - - ------ - --
-
------------------- -
---------------------------------
-
-------------------------------- ---------- -
-------------------------------------
------ -----
-
----------------------------- ---------- -
----------------------------------
-
---------------------- -
------------------------------------
-
----------- - -- -- -
--------------- ------ ---------------- - - ---
--
-------- -
----------------------
------ -
-----
---------------------------
------- -------------------------------- -----------
------
--
-
-
------ ------- --------在上面的示例代码中，我们定义了一个计数器组件 Counter，该组件包含了构造函数、组件挂载、更新和卸载阶段的生命周期方法。当用户点击按钮时，计数器会自增，并且每个生命周期方法都会输出相应的信息到控制台。
指导意义
了解 ReactJS 生命周期方法的概念和调用顺序是非常重要的，这有助
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24450