深入了解 React 中的生命周期函数
React 是一个社区广泛，应用范围广泛的 JavaScript 库，用于构建复杂的 UI 界面。在 React 中有许多关键的特性，其生命周期函数是其中之一。生命周期函数是在组件被渲染之前、之后以及在被更新之前、之后触发的方法。本文将带您深入了解 React 中的生命周期函数，它是如何工作的以及如何使用它们来控制 React 组件。
生命周期函数的分类
React 的组件是由多个生命周期函数组成，这些函数被分为三种：挂载、更新和卸载。以下是每种功能的生命周期函数列表：
挂载
- constructor()
- static getDerivedStateFromProps()
- render()
- componentDidMount()
更新
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
卸载
- componentWillUnmount()
生命周期函数在组件的不同阶段运行，从而控制组件的行为，这对于控制 React 组件的行为非常重要。
生命周期函数的解释
在学习每个生命周期函数之前，让我们先讨论一下什么是生命周期函数。在 React 中，生命周期函数是一些方法，这些方法在组件的生命周期内被调用。
一个组件的生命周期始于当它被创建并插入到 DOM 中，直到最终从 DOM 中删除。React 组件渲染成 HTML 元素，并将它们插入到 DOM 中。组件本身可以具有状态，甚至可以更改状态，但它们通常都是为了显示某些数据而被创建。
那么，让我们现在开始讨论生命周期函数如何工作。
挂载周期
挂载是 React 组件的第一阶段。这是组件被创建并放置在 DOM 中的过程。以下是挂载周期中的每个方法详细解释：
constructor()
constructor() 是类的一个构造器方法，React 组件中所有生命周期函数的第一个调用。在此方法中，使用 this.state 初始化组件的 state 属性。
例如：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 0
}
}
}static getDerivedStateFromProps()
getDerivedStateFromProps() 是 React 16.3 新增的生命周期函数之一。此函数在组件挂载或者更新时被触发。它接收 props 和 state 作为参数，并返回一个对象来更新 state，或者返回 null 表示未更新。
此函数用于在组件收到新 props 并根据这些新 props 更改 state 值时被调用。当然，我们只能使用此函数来计算新状态，它不应该执行其他操作。
render()
render() 是操作 HTML 元素的函数。在此方法中，通常会使用数据生成 UI，并返回封装在组件中的 HTML 元素。它会在组件挂载时调用，也会在更新时调用。
例如：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
-------- -
------ -
-----
---------- -----------
------
--
-
-componentDidMount()
componentDidMount() 在组件挂载后立即运行。它适合在此方法中进行 DOM 操作、发出网络请求、添加定时器等。
例如：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
-------- -
-
-
------------------- -
------------ - ------------
-- -- ------------
----
--
-
------ -
---------------
-------- ------------------ - -
---
-
---------------------- -
----------------------------
-
-------- -
------ -
-----
---------- -----------
-----------------------------
------
--
-
-更新周期
在 React 中更新是指组件更新，更改其属性或状态。更新周期包括以下方法：
static getDerivedStateFromProps()
getDerivedStateFromProps() 在每次组件更新 state 或 props 时都被触发，返回一个对象，当返回对象不为 null 时，组件的 state 会被更新。
这是 16.3 版本新增的生命周期之一，它与 componentWillReceiveProps() 的功能类似，但有一个重要的区别，那就是返回的值会被用来更新 state。
shouldComponentUpdate()
shouldComponentUpdate() 用于决定是否重新渲染组件，返回值 true 或 false。默认情况下，此函数的返回值总是 true。
此函数的一种常见用法是嵌套组件（顾名思义，嵌套组件是组件内部嵌套其他组件的组件）。如果嵌套的组件没有发生变化，则父组件也没有必要重新渲染。
render()
更新时触发的 render() 与第一次加载时的渲染类似。它返回要渲染的内容。
例如：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
-------- -
------ -
-----
---------- -----------
--------------------------
------
--
-
-getSnapshotBeforeUpdate()
getSnapshotBeforeUpdate() 发生在 render() 之后，但在组件实际更新到 DOM 之前。返回值会被传递到 componentDidUpdate(prevProps, prevState, snapshot) 函数。
此函数通常用于处理从 DOM 中捕获信息的情况，如捕获滚动位置。
componentDidUpdate()
组件更新后此函数被触发。此函数用于执行更新 DOM、发送 AJAX 请求等等。
例如：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
-------- -
-
-
------------------- -
------------ - ------------
-- -- ------------
----
--
-
----------------------------- ---------- -
---------------------- -----------
-
------ -
---------------
-------- ------------------ - -
---
-
---------------------- -
----------------------------
-
-------- -
------ -
-----
---------- -----------
-----------------------------
------
--
-
-卸载周期
卸载周期用于在组件被从 DOM 中卸载时清理组件。它只包括一个方法 - componentWillUnmount()。
componentWillUnmount()
此方法在组件从 DOM 中删除之前调用。它通常用于清理组件，如取消计时器或取消网络请求等。
例如：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
-------- -
-
-
------------------- -
------------ - ------------
-- -- ------------
----
--
-
---------------------- -
----------------------------
-
------ -
---------------
-------- ------------------ - -
---
-
-------- -
------ -
-----
---------- -----------
-----------------------------
------
--
-
-总结
React 的生命周期函数是理解 React 组件的关键部分之一，利用生命周期函数能让您了解组件状态以及更好地掌握 React 应用程序的工作原理。在本文中，我们学习了每个生命周期函数的功能和用法，以及如何在每个生命周期中使用它们以提高组件性能。
示例代码
以下是一个完整的 React 组件示例，它展示了如何在生命周期函数中实现一些常见的操作：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
-------- -
--
---------------------------
-
------ ------------------------------- ------ -
---------------- ------- ----- ---- --------
------ -----
-
-------------------------------- ---------- -
------------------- --------- ---------
------ -----
-
---------------------------------- ---------- -
---------------- -------- ------ ---------
------ -----
-
----------------------------- ---------- --------- -
---------------------- --- ---------
-
---------------------- -
---------------------- ---- ----------
-
------------------- -
---------------------- --- --------
------------ - ------------
-- -- ------------
----
--
-
------ -
------------------------- ------ -- --
-------- ----------------- - -
----
-
-------- -
----------------------
------ -
-----
---------- -----------
-----------------------------
------
--
-
-
------ ------- ------------以上代码会在控制台输出组件的状态，以便进行调试、开发和理解生命周期功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648aa17148841e98948bdb9e