在 React 中，开发者们可以使用生命周期函数来监测组件的挂载、更新和卸载等过程。同时，React 还提供了一种新的组件类型 Hooks，它的出现极大地简化了组件间的状态管理。
本文主要介绍 React 的生命周期函数与 Hooks 的区别，并带有详细的示例代码。
生命周期函数
生命周期函数是 React 中非常基础的概念，是用来监测组件的挂载、更新和卸载等过程的。React 组件包含了如下常用的生命周期函数：
- componentWillMount()
- componentDidMount()
- componentWillReceiveProps(nextProps)
- shouldComponentUpdate(nextProps, nextState)
- componentWillUpdate(nextProps, nextState)
- componentDidUpdate(prevProps, prevState)
- componentWillUnmount()
下面是一个使用生命周期函数的示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
----- --- ------- --------- -
----- - -
------ -
-
-------------------- -
---------------------
-
------------------- -
---------------------
-
-------------------------------- ---------- -
-- ---------------- - -- -
------ -----
-
------ ----
-
---------------------- -
---------------------
-
----------- - -- -- -
---------------
------ ---------------- - -
--
-
-------- -
------ -
-----
--------- ----------------------
------- ---------------------------------------
------
-
-
-
------ ------- ---在上面的代码中，我们使用了常用的生命周期函数，并通过 shouldComponentUpdate 函数实现了一个简单的状态控制。
Hooks
Hooks 是 React 16.8 新增的特性，它允许开发者在不编写 Class 的情况下使用 React 的特性，如 state、lifecycle 等。同时，它解决了 Class 的一些问题：如难以理解的 this、代码复用问题等等。
React 的核心团队给 Hooks 提出了三个用例：
- state（useState）
- 生命周期函数（useEffect）
- 上下文（useContext）
下面是一个简单的 Hooks 示例：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- -------
-------- ----- -
----- ------- --------- - -----------
------------ -- -
---------------------
-- --------
----- ----------- - -- -- -
-------------- - --
-
------ -
-----
--------- -----------
------- ----------------------------------
------
-
-
------ ------- ---在上面的代码中，我们使用了 React 的 Hooks，通过 useState 函数实现了对状态的控制，并通过 useEffect 函数实现了对组件更新的监测。
生命周期函数与 Hooks 的区别
调用方式
生命周期函数是通过继承 React.Component 而来的，因此需要使用 Class 类型的组件。而 Hooks 形成了一种新的组件类型，可以在函数中使用，不再需要使用 Class。
代码复用
在 React 的生命周期函数中，代码复用需要借助高阶组件（HOC）等技术。而 Hooks 的设计则更注重代码复用，通过自定义 Hooks 可以方便地复用逻辑。
类型判断
生命周期函数在类型判断时需要严格按照声明周期函数的名称来编写。而 Hooks 则可以根据需要命名，自由使用。
总结
本文介绍了 React 的生命周期函数与 Hooks 的区别，并提供了详细的示例代码。在实际开发中，开发者可以根据实际情况选用不同的编程方式，在提升代码复用和降低维护成本方面更有优势。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645abbb2968c7c53b0d119ca