React Hooks 是 React16.8 新增的特性之一。它使得开发者在函数组件中维护组件自身状态、生命周期以及其他 React 特性的能力得到了大幅提升。通过 React Hooks，我们可以避免类组件中出现的过多模板代码，以及组件嵌套层次深的问题。本文将会带我们深入了解 React Hooks，学习如何在函数组件中使用 Hooks， 并通过代码示例，演示 Hooks 如何简化我们的开发工作。
useState
首先，我们来看 useState 是如何使用的。它是最常用的 Hooks 之一，用于管理组件的 state 状态。在类组件中，我们需要通过构造函数或 class fields 进行初始化。而使用 useState，你可以在函数组件中声明一个 state 变量，并使用一个 setter 函数改变它。useState 始终返回一个数组，第一个元素是 state，第二个元素是更新 state 的方法。
------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------ -
-----
------ ------- ------- ----------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-在这个示例中，我们通过设置一个 state 变量 count，并初始化它的值为 0。我们也引入了 useState，通过 useState 创建一个名为 count 的 state 变量以及用于更改该状态的函数 setCount。在组件中，我们通过点击按钮来更新 count 的值。
useEffect
接下来介绍的是 useEffect。它类似于 componentDidMount、componentDidUpdate 和 componentWillUnmount 三个生命周期组合的函数。useEffect 会在 React 渲染完组件后执行指定的 effect。它可以用于管理副作用（Side effects），例如数据获取、订阅或更改 DOM 等。然而，useEffect 默认在组件渲染完成后运行，这可能会导致不必要的资源浪费。如果我们需要避免不必要的浪费，我们可以传递一个依赖项数组。
------ - --------- --------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------------ -- -
-- ------ --- -------- ----- ----- --- ------- ---
-------------- - ---- ------- -------- -------
-- ---------
------ -
-----
------ ------- ------- ----------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-在这个示例中，我们通过 useEffect 来更新 document.title。我们指定了依赖项数组，这意味着当 count 改变时函数才会重新执行。如果没有指定依赖项数组，useEffect 会在每次渲染时都执行。
useContext
useContext 用于消费 React 的 context。在 React 中，context 允许我们在组件之间共享数据，而无需通过 props 层层传递。它在许多情况下非常有用，例如主题颜色等全局变量的管理。
首先，我们需要创建一个 context：
------ - ------------- - ---- -------- ----- ------------ - -----------------------
在这个示例中，我们创建了一个名为 ThemeContext 的 context，并初始化它的值为 light。
接下来，我们可以使用 useContext 来接收 context 中的值：
------ - --------- ---------- - ---- --------
------ - ------------ - ---- ------------------
-------- --------- -
----- ------- --------- - ------------
----- ----- - -------------------------
------ -
---- -----------------------------
------ ------- ------- ----------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-在这个示例中，我们使用 useContext 获取 ThemeContext 的值，并根据它来动态地预览不同的主题颜色。
useReducer
useReducer 是在函数组件中替代 this.setState 的 Hook，它是助力状态更加复杂的组件开发。useReducer 的基本思想是采用类似 Redux 的变化方式来管理组件的状态。传递一个当前状态以及一个更新值的 action，系统会将当前状态进行组合，返回一个新的状态和一个消息。你可以使用 useReducer 来更好地管理组件的状态流，从而缩短 componentDidMount、componentDidUpdate 等等生命周期。
------ ------ - ---------- - ---- --------
-------- --------- -
----- ------- --------- - ------------------- --------------
-------- -------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
----- --- --------
-
-
------ -
-----
------ -------------
------- ----------- -- ---------- ----- ----------- ----
---------
---------
------- ----------- -- ---------- ----- ----------- ----
---------
---------
------
--
-在这个示例中，我们通过 useReducer 来管理 state 状态。reducer 函数采用之前的状态并使用 action 返回状态。我们创建了两个按钮，分别调用 dispatch 方法来改变 count 的值。
自定义 Hooks
有时候，我们会发现我们在许多组件中使用的状态或逻辑非常相似，甚至是相同的。在这种情况下，我们可能会想要封装它们，以便在需要时可以轻松地重用。自定义 Hook就派上用场了。
例如，我们有一个组件，需要计算两个数的商：
------ - -------- - ---- --------
-------- --------- -
----- ----------- ------------- - ------------
----- ------------- --------------- - ------------
----- -------- ---------- - ------------
-------- --------- -
------------------- - -------------
-
------ -
-----
------ ----------------- ------------- -- ----------------------------- --
------ ------------------- ------------- -- ------------------------------- --
------- ----------------------------------
---------- ------------
------
--
-这样可能会导致重复的模式、样板代码等等。我们可以轻松地封装它到自定义的 Hook 中：
------ - -------- - ---- --------
-------- ---------------------- ------------ -
----- -------- ---------- - ------------
-------- --------- -
------------------- - -------------
-
------ --------- --------
-
-------- --------- -
----- ----------- ------------- - ------------
----- ------------- --------------- - ------------
----- --------- ------- - ---------------------- -------------
------ -
-----
------ ----------------- ------------- -- ----------------------------- --
------ ------------------- ------------- -- ------------------------------- --
------- ----------------------------------
---------- ------------
------
--
-在这个示例中，我们把逻辑抽象成了一个名为 useComputed 的自定义 Hook，并将它导出。在Example组件中，我们利用自定义 Hook 来计算选择和值结果。useComputed 接受两个参数 numerator 和 denominator，返回一个带有 compute 函数和结果 result 的数组。
通过自定义 Hook，我们可以公开状态和逻辑，并使它们可重用。
总结
在本文中，我们学习了如何使用 useState、useEffect、useContext、useReducer 等常用的 Hooks 来简化我们的代码，并使开发更加容易。我们还讲述了自定义 Hooks 对于重用逻辑及状态的惠及。使用 Hooks，我们可以使 React 代码更加简洁，同时进一步了解 React 的核心特性。
如果您还不使用 Hooks，为什么不尝试使用一下？我相信您将喜欢这种更优雅、更精简的 React 编程方式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c36e0d83d39b48817734e2