1. 引言
React Hooks 是 React 16.8 版本引入的新特性，它可以让函数组件具有类组件的功能。ReactHooks 的出现是为了解决 React 的繁琐问题，帮助我们书写更简洁、易读、可维护和高效的组件。
这篇文章将介绍 React Hooks 的常用 Hook 及其使用场景，让我们深入了解这一优秀的技术。
2. useState
useState 是 React Hooks 中最基础、最常用的 Hook 之一，它可以让我们在函数组件中使用状态。
看下面这个例子：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
-------- ------------- -
-------------- - ---
-
------ -
-----
------- --------------------------- -----------
------------ --------------
------
--
-在代码中，useState 定义了一个状态 count，并通过 setCount 方法修改状态。我们可以通过 useState 返回的数组分别获取当前状态和更改状态的方法。
3. useEffect
useEffect 是另一个常用的 Hook，它可以让我们在函数组件中使用生命周期方法。
看下面这个例子：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------------ -- -
-------------- - ---- ------- -------- -------
---
-------- ------------- -
-------------- - ---
-
------ -
-----
------- --------------------------- -----------
------------ --------------
------
--
-在代码中，useEffect 接受一个回调函数，每次组件渲染完成后都会执行回调函数。在这个例子中，我们使用 useEffect 实现了更改网页标题的功能。
当然，useEffect 还能做更多的事情，例如请求数据、订阅事件等等。不过，需要注意的是，使用 useEffect 时需要指定依赖项，否则会导致无限循环的渲染。
4. useContext
useContext 可以用来在子组件中使用父组件传递进来的 context 值。
看下面这个例子：
-- -------------------- ---- -------
------ ------ - --------- ---------- - ---- --------
----- ------------ - -----------------------------
-------- --------- -
----- ------- --------- - ------------
----- ----- - -------------------------
-------- ------------- -
-------------- - ---
-
------ -
---- ------------------
------- --------------------------- -----------
------------ --------------
------
--
-
-------- ----- -
------ -
---------------------- -------------
-------- --
------------------------
--
-在代码中，我们创建了一个 ThemeContext，并传递给了 Count 组件。在 Count 组件中，我们使用 useContext 获取了父组件传递进来的 theme 值，并将其作为 className。
5. useRef
useRef 可以用来获取组件中的 DOM 元素或保存变量。
看下面这个例子：
-- -------------------- ---- -------
------ ------ - ------ - ---- --------
-------- --------- -
----- -------- - ----------
-------- ------------- -
-------------------
------------------- ----------------------
-
------ -
-----
------- --------------------------- -----------
------
--
-在代码中，我们使用 useRef 创建了一个 countRef，并将它的初始值设为 0。在 handleClick 方法中，我们通过修改 countRef.current 来更新计数器的值。
另外，useRef 还可以保存上一次的值，例如：
-- -------------------- ---- -------
------ ------ - ---------- ------ - ---- --------
-------- --------- -
----- ------------ - ----------
----- ------- --------- - ------------
------------ -- -
-------------------- - ------
---
------ -
-----
------- ----------- -- -------------- - --------- -----------
------------- ------ --------------
-------------- ------ -----------------------------
------
--
-在代码中，通过 useRef 进行了上一次的保存，为了方便，我们在计数器中又使用了 useState 来维护 count 的值。
6. useCallback
useCallback 可以用来缓存函数，避免每次渲染都创建新的函数引用。
看下面这个例子：
-- -------------------- ---- -------
------ ------ - ------------ -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
----- ----------- - -------------- -- -
------------------- -----------
-------------- -- ----- - ---
-- ---------
------ -
-----
------- --------------------------- -----------
------
--
-在代码中，我们使用 useCallback 缓存了 handleClick 函数。通过传入依赖项 [count]，我们可以控制缓存的更新。因为 handleClick 中引用了 count，所以当 count 改变时，回调函数会被重新缓存。
7. useMemo
useMemo 可以用来缓存计算结果，避免每次重新计算。
看下面这个例子：
-- -------------------- ---- -------
------ ------ - -------- -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
----- -------------- - ---------- -- -
--- --- - --
--- ---- - - -- - -- ----- - ------ ---- -
--- -- --
-
------ ----
-- ---------
------ -
-----
------- ----------- -- -------------- - --------- -----------
------------- ------ --------------
--------------- ------ -----------------------
------
--
-在代码中，我们使用 useMemo 缓存了计算结果 expensiveCount。每次 count 改变时，useMemo 回调函数会被触发，这里我们简单地计算了一个数值，来模拟一些复杂的计算。如果没有使用 useMemo，每次渲染都会重新计算 expensiveCount，会造成无谓的性能浪费。
8. 自定义 Hook
除了 React 提供的一些 Hooks，我们还可以自己定义 Hook。
看下面这个例子：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ------------ -
----- ------- --------- - ------------
-------- ----------- -
-------------- - ---
-
-------- ----------- -
-------------- - ---
-
------ -
------
----------
----------
--
-
-------- --------- -
----- - ------ ---------- --------- - - -------------
------ -
-----
------- ------------------------------
--------------------
------- ------------------------------
------
--
-在代码中，我们创建了一个自定义 Hook useCounter，返回一个包含 count、increment 和 decrement 函数的对象。在组件中，通过解构的方式获取到对象并使用。
9. 总结
React Hooks 是 React 的一个重要特性，它使得函数组件的功能更加完善。在本文中，我们介绍了 useState、useEffect、useContext、useRef、useCallback、useMemo 等一系列常用的 Hooks，并且还带给大家了些例子，让我们更加深入的了解和理解这些 Hooks。
最后，我们需要注意，使用 Hooks 时需要遵循一些规则，例如：在总是在函数的最外层调用 Hook、不要在循环、条件语句中调用 Hook 等。我们希望这篇文章能为大家提供帮助，并指导读者更好地选择合适的 Hook 并正确使用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651bf7cb95b1f8cacd38ecba