React Hook 是 React 16.8 引入的一种新特性，它允许我们无需编写或使用 class，就可以在函数式组件中使用状态和其它 React 功能。其中最重要的一个 Hook 就是 useState，它能够让我们轻松地在函数式组件中管理状态。
使用 useState
使用 useState 的方式非常简单，只需要在函数式组件中声明一个变量和一个更新函数，例如：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------ -
-----
---------- ------------
------- ----------- -- -------------- - --------------
------- ----------- -- -------------- - --------------
------
--
-在上面的例子中，我们使用 useState 来声明了 count 和 setCount 两个变量。count 表示当前的计数值，setCount 是一个更新函数，用来更新 count 的值。当我们需要更新 count 的时候，只需要调用 setCount 并传入一个新值，就会自动更新组件的状态。
使用多个 useState
在函数式组件中，我们可以使用多个 useState 来管理多个状态。例如，下面的例子中，我们使用了两个 useState 分别管理了一个 input 元素的文本值和一个下拉列表的选中值：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ------ -
----- ------ -------- - -------------
----- ------- --------- - -----------------
----- ---------------- - - -- ------------------------
----- ----------------- - - -- -------------------------
------ -
------
-------
-----
------ ----------- ------------ --------------------------- --
--------
--- --
-------
------
------- ------------- -----------------------------
------- ------------------------
------- ----------------------------
------- --------------------------
---------
--------
-------
--
-在上面的例子中，我们使用两个 useState 来管理了 name 和 color 两个状态，分别对应输入框的文本值和下拉列表的选中值。当这些值变化时，我们通过对应的 onChange 事件来更新它们的值，从而更新组件。
总结
React Hook 是一种非常方便的编写函数式组件的方式，能够让我们更容易地管理状态和其它 React 功能。在本文中，我们使用了 useState 这个 Hook 来演示了如何在函数式组件中进行状态管理。当然，除了 useState，还有其它许多 Hook，例如 useEffect、useContext 等等，它们都能够让我们轻松地编写出高效、易于维护的 React 组件。如果你还没有使用 React Hook，那么现在就是时候开始学习了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d41ab4b5eee0b525b9290f