React Hooks 是 React 16.8 引入的一种新特性，它可以让我们在不编写类组件的情况下，使用 state 和其他 React 特性。
本篇文章将深入探讨 React Hooks 的各种用法，并提供详细的示例代码，帮助读者更好地理解和使用这一特性。
useState
useState 是 React Hooks 中最常用的一个。它可以让我们在函数组件中使用 state。
基础用法
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-上面的代码中，我们使用了 useState 创建了一个名为 count 的 state 变量和一个名为 setCount 的更新函数。初始值为 0。
当用户点击按钮时，我们通过 setCount 更新了 count 的值，并将其显示在页面上。
使用对象
如果我们需要使用多个 state 变量，可以将它们封装在一个对象中。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ------ -
----- ---------- ------------ - ----------
----- ---
------ --
---
----- ----------------- - ----- -- -
----- - ----- ----- - - -------------
------------- ------------ ------- ----- ---
--
------ -
------
------ ----------- ----------- --------------------- ---------------------------- --
------ ------------ ------------ ---------------------- ---------------------------- --
-------
--
-上面的代码中，我们使用了一个名为 formData 的 state 变量，它是一个包含 name 和 email 两个属性的对象。
当用户输入时，我们使用 handleInputChange 函数更新 formData 对象中对应属性的值。
需要注意的是，我们在更新 formData 时，使用了展开运算符 ...formData 来保留对象中的原有属性，只更新目标属性的值。
使用函数
如果我们需要使用一个函数来更新 state 变量，可以将其传给 useState 的第一个参数。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
----- --------- - -- -- -------------- - ---
----- --------- - -- -- -------------- - ---
------ -
-----
--------- -----------
------- ------------------------------
------- ------------------------------
------
--
-上面的代码中，我们将 increment 和 decrement 函数作为参数传给了 useState。这样我们就可以通过这两个函数来更新 count 的值了。
需要注意的是，我们在更新 count 时，使用了 count 的原有值。这是因为 useState 的更新函数并不会自动合并 state 对象，而是替换整个对象。
useEffect
useEffect 是 React Hooks 中另一个常用的特性。它可以让我们在函数组件中处理副作用（如数据获取、DOM 操作等）。
基础用法
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- ---------- -
----- ------- --------- - -------------
------------ -- -
---------------------------------------------------
-------------- -- ----------------
---------- -- ----------------
-- ----
------ -
----
--------------- -- -
--- ------------------------------
---
-----
--
-上面的代码中，我们使用 useEffect 在组件渲染时发起了一个异步请求，获取了用户列表，并将其保存在了 state 变量中。
需要注意的是，我们在 useEffect 的第二个参数中传入了一个空数组，表示我们只在组件挂载时执行一次副作用。
使用 cleanup
如果我们需要在组件销毁时执行一些清理操作，可以在 useEffect 中返回一个函数。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- -------------- -
----- ---------- ------------ - ---------- -- -- -- - ---
------------ -- -
----- --------------- - ----- -- ------------- -- -------------- -- ------------- ---
------------------------------------ -----------------
------ -- -- -
--------------------------------------- -----------------
--
-- ----
------ -
-------- --------- ------------- ----------------
--
-上面的代码中，我们使用 useEffect 在组件渲染时添加了一个鼠标移动事件监听器，并在组件销毁时移除了该监听器。
需要注意的是，我们在 useEffect 的返回值中返回了一个函数，这个函数会在组件销毁时被调用。
使用依赖
如果我们需要在 state 变量或 props 发生变化时执行副作用，可以在 useEffect 的第二个参数中传入相应的依赖项。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- --------- ------------ -- -
----- ------- --------- - -----------------------
------------ -- -
-------------- - ------- ----------
-- ---------
------ -
-----
--------- -----------
------- ----------- -- -------------- - --------------
------- ----------- -- -------------- - --------------
------
--
-上面的代码中，我们使用 useEffect 在组件渲染时更新了页面标题，并在 count 变化时重新更新了标题。
需要注意的是，我们在 useEffect 的第二个参数中传入了 count 变量，表示只有 count 变化时才执行副作用。
useContext
useContext 是 React Hooks 中用于访问上下文的特性。它可以让我们在函数组件中使用 React 上下文。
基础用法
-- -------------------- ---- -------
------ ------ - -------------- ---------- - ---- --------
----- --------- - ----------------
-------- ------------- -
------ -
------------------- ------------- --------
-------- --
---------------------
--
-
-------- --------- -
----- ----- - ----------------------
------ -
--------------
--
-上面的代码中，我们使用 createContext 创建了一个名为 MyContext 的上下文，并在 MyComponent 中使用 Provider 提供了一个值。
在 MyChild 中，我们使用 useContext 获取了 MyContext 的值，并将其渲染在了页面上。
动态值
如果我们需要动态改变上下文的值，可以将其封装在一个 state 变量中。
-- -------------------- ---- -------
------ ------ - -------------- ----------- -------- - ---- --------
----- --------- - ----------------
-------- ------------- -
----- ------- --------- - ---------------- ---------
------ -
------------------- -------------- -----------
-------- --
---------------------
--
-
-------- --------- -
----- ------- --------- - ----------------------
------ -
--
--------------
------- ----------- -- ------------------ -------------------------
---
--
-上面的代码中，我们将上下文的值封装在了一个数组中，并在 MyChild 中使用了一个按钮来改变这个值。
需要注意的是，我们在 useContext 中传入了 MyContext，这样 React 就会自动更新组件，以反映上下文的最新值。
useCallback
useCallback 是 React Hooks 中用于缓存函数的特性。它可以让我们在组件渲染时缓存函数，避免不必要的重新渲染。
基础用法
-- -------------------- ---- -------
------ ------ - --------- ----------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
----- --------- - -------------- -- -
-------------- -- ----- - ---
-- ----
------ -
-----
--------- -----------
------- ------------------------------
------
--
-上面的代码中，我们使用 useCallback 缓存了一个名为 increment 的函数。这个函数只在组件挂载时被创建一次，并在按钮点击时更新了 count 的值。
需要注意的是，我们在 useCallback 的第二个参数中传入了一个空数组，表示这个函数不依赖于任何变量。
使用依赖
如果我们的函数依赖于某些变量，可以在 useCallback 的第二个参数中传入这些变量，以便在它们发生变化时重新创建函数。
-- -------------------- ---- -------
------ ------ - --------- ----------- - ---- --------
-------- --------- ------------ -- -
----- ------- --------- - -----------------------
----- --------- - -------------- -- -
-------------- -- ----- - ---
-- ------------
------ -
-----
--------- -----------
------- ------------------------------
------
--
-上面的代码中，我们将 setCount 作为 useCallback 的依赖。这样，每次 setCount 发生变化时，increment 函数都会被重新创建。
useMemo
useMemo 是 React Hooks 中用于缓存计算结果的特性。它可以让我们在组件渲染时缓存计算结果，避免不必要的重复计算。
基础用法
-- -------------------- ---- -------
------ ------ - --------- ------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
----- ------ - ---------- -- -
------ ----- - ------
-- ---------
------ -
-----
--------- -----------
---------- ------------
------- ----------- -- -------------- - --------------
------
--
-上面的代码中，我们使用 useMemo 缓存了一个名为 square 的变量。这个变量只在 count 发生变化时重新计算。
使用函数
如果我们需要缓存一个函数，可以将其封装在 useMemo 中。
-- -------------------- ---- -------
------ ------ - --------- ------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
----- --------- - -- -- -
-------------- - ---
--
----- ----------------- - ---------- -- -
------ -- -- -
------------
--
-- -------------
------ -
-----
--------- -----------
------- --------------------------------------
------
--
-上面的代码中，我们使用 useMemo 缓存了一个名为 memoizedIncrement 的函数。这个函数只在 increment 发生变化时重新创建。
useRef
useRef 是 React Hooks 中用于访问 DOM 元素或保存任意值的特性。它可以让我们在函数组件中使用 ref。
基础用法
-- -------------------- ---- -------
------ ------ - ------ - ---- --------
-------- ----------- -
----- -------- - -------------
----- ----------- - -- -- -
-------------------------
--
------ -
--
------ ----------- -------------- --
------- ------------------------------------
---
--
-上面的代码中，我们使用 useRef 创建了一个名为 inputRef 的 ref，并将其传递给了 input 元素。
在 handleClick 函数中，我们使用 inputRef.current.focus() 将焦点设置到了 input 元素上。
访问组件实例
如果我们需要访问组件实例（如获取当前组件的 props 或 state），可以将其封装在 useRef 中。
-- -------------------- ---- -------
------ ------ - --------- ------- --------- - ---- --------
-------- --------- ------------ -- -
----- ------- --------- - -----------------------
----- ------------ - ---------------------
------------ -- -
-------------------- - ------
-- ---------
----- ----------- - -- -- -
-----------------------
--
----- ---------- - -- -- -
-------------------------------
--
------ -
-----
--------- -----------
------- ----------- -- -------------- - --------------
------- ----------- -- -------------- - --------------
------- ------------------------------------
------- ----------------------------------
------
--
-上面的代码中，我们使用 useRef 创建了一个名为 prevCountRef 的 ref，并将其初始化为 initialCount。
在 useEffect 中，我们使用 prevCountRef.current 记录了上一次的 count 值。
在 handleUndo 函数中，我们使用 prevCountRef.current 恢复了上一次的 count 值。
useReducer
useReducer 是 React Hooks 中用于处理复杂状态逻辑的特性。它可以让我们在函数组件中使用 reducer。
基础用法
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
----- ------------ - - ------ - --
-------- -------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
----- --- --------
-
-
-------- --------- -
----- ------- --------- - ------------------- --------------
------ -
-----
--------- -----------------
------- ----------- -- ---------- ----- ----------- --------------
------- ----------- -- ---------- ----- ----------- --------------
------
--
-上面的代码中，我们使用 useReducer 创建了一个名为 state 的状态变量和一个名为 dispatch 的更新函数。
在 reducer 中，我们根据 action 的类型更新了状态变量，并返回了一个新的状态对象。
在 Counter 中，我们使用 dispatch 来调用相应的 reducer，更新状态变量的值。
使用 context
如果我们需要在多个组件中共享状态变量和更新函数，可以将它们封装在一个上下文中，并使用 useContext 在组件中访问。
-- -------------------- ---- -------
------ ------ - -------------- ----------- ---------- - ---- --------
----- ------------ - - ------ - --
-------- -------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
----- --- --------
-
-
----- -------------- - ----------------
-------- ----------------- -------- -- -
----- ------- --------- - ------------------- --------------
------ -
------------------------ -------- ------ -------- ---
----------
--------------------------
--
-
-------- ---------------- -
----- - ----- - - ---------------------------
------ -
--------- -----------------
--
-
-------- ---------------- -
----- - -------- - - ---------------------------
------ -
--
------- ----------- -- ---------- ----- ----------- --------------
------- ----------- -- ---------- ----- ----------- --------------
---
--
-
-------- --------- -
------ -
-----------------
--------------- --
--------------- --
------------------
--
-上面的代码中，我们使用 createContext 创建了一个名为 CounterContext 的上下文，并在 CounterProvider 中创建了状态变量和更新函数。
在 CounterDisplay 和 CounterButtons 中，我们使用 useContext 访问了 CounterContext，并分别渲染了计数器的值和按钮。
在 Counter 中，我们使用 CounterProvider 包裹了 CounterDisplay 和 CounterButtons，以便它们可以访问 CounterContext。
总结
React Hooks 是一种强大的特性，它可以让我们在函数组件中使用 state、副作用、上下文、缓存和 reducer。它的使用方式与传统的 React 组件编写方式不同，但它可以让我们更快地编写更简洁的代码。
希望本篇文章能够帮助读者更好地理解和使用 React Hooks，提高前端开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cb4b1cadd4f0e0ff503c48