React 是一款非常流行的前端框架，它的核心是组件化开发。在 React 中，每个组件都有自己的生命周期函数，这些函数可以让我们在组件的不同阶段执行一些操作。本文将介绍 React 中的生命周期函数，并提供一些实用的技巧，帮助你更好地使用它们。
生命周期函数的分类
React 中的生命周期函数可以分为三类：
- 挂载阶段（Mounting）：组件第一次渲染时调用的函数，包括
constructor、getDerivedStateFromProps、render、componentDidMount。 - 更新阶段（Updating）：组件更新时调用的函数，包括
getDerivedStateFromProps、shouldComponentUpdate、render、getSnapshotBeforeUpdate、componentDidUpdate。 - 卸载阶段（Unmounting）：组件从 DOM 中移除时调用的函数，包括
componentWillUnmount。
下面我们将分别介绍每个生命周期函数的作用和使用方法。
挂载阶段
constructor
constructor 是组件的构造函数，它在组件创建时调用。通常我们在这里初始化组件的状态和绑定方法。例如：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
---------------- - ----------------------------
-
------------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ ------- -------------------------------- ------------
-
-getDerivedStateFromProps
getDerivedStateFromProps 是一个静态函数，它在组件创建和更新时都会调用。它的作用是根据新的属性值和当前的状态计算出新的状态值。例如：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------ ------------------------------- ------ -
-- ------------ --- ------------ -
------ - ------ ----------- --
-
------ -----
-
------------------ -
-------------
---------- - - ------ ----------- --
-
-------- -
------ ------------------------------
-
-render
render 是组件渲染函数，它返回组件的虚拟 DOM。在挂载阶段，它只会被调用一次。例如：
class MyComponent extends React.Component {
render() {
return <div>Hello, {this.props.name}!</div>;
}
}componentDidMount
componentDidMount 是组件挂载后调用的函数，它通常用来进行一些异步操作，例如获取数据、添加事件监听器等。例如：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------- -
------------------
-------------- -- ----------------
---------- -- --------------- ---- ----
-
-------- -
------ -----------------------------
-
-更新阶段
getDerivedStateFromProps
在更新阶段，getDerivedStateFromProps 的作用和挂载阶段一样，它可以根据新的属性值和当前的状态计算出新的状态值。
shouldComponentUpdate
shouldComponentUpdate 是组件更新前调用的函数，它用来控制组件是否需要更新。默认情况下，React 会比较新旧虚拟 DOM 是否相同，如果相同则不会更新组件。但是有些情况下我们需要手动控制更新，例如当组件的某个属性改变时需要重新渲染。例如：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
-------------------------------- ---------- -
------ --------------- --- -----------------
-
-------- -
------ ------------------------------
-
-render
在更新阶段，render 的作用和挂载阶段一样，它返回组件的虚拟 DOM。
getSnapshotBeforeUpdate
getSnapshotBeforeUpdate 是组件更新前调用的函数，它可以获取到组件更新前的 DOM 快照。例如：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
---------------------------------- ---------- -
-- ---------------- --- ----------------- -
------ -------------------------
-
------ -----
-
----------------------------- ---------- --------- -
-- --------- --- ----- -
------------------------ - ---------
-
-
-------- -
------ ---- -------- -- -------------- - ------------------------------
-
-componentDidUpdate
componentDidUpdate 是组件更新后调用的函数，它通常用来进行一些 DOM 操作，例如滚动到指定位置、聚焦输入框等。例如：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
----------------------------- ---------- -
-- ---------------- --- ----------------- -
-------------------
-
-
-------- -
------ ------ -------- -- ---------- - ---- ------------------------------- ---
-
-卸载阶段
componentWillUnmount
componentWillUnmount 是组件卸载前调用的函数，它通常用来清除一些副作用，例如取消异步操作、移除事件监听器等。例如：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------- -
--------------------------------- -------------------
-
---------------------- -
------------------------------------ -------------------
-
-------------- -
-- ---
-
-------- -
------ ----------- -------------
-
-总结
React 中的生命周期函数可以让我们在组件的不同阶段执行一些操作，从而实现更加复杂的业务逻辑。不过需要注意的是，过度使用生命周期函数会导致代码难以维护，因此需要谨慎使用。在实际开发中，我们可以根据具体的业务需求选择合适的生命周期函数，并结合一些实用的技巧，使代码更加简洁、易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ffc6a3d10417a222b04cf3
