在 React 和 Redux 中，Hooks 是一种非常流行的编程模式。它们可以帮助开发者更轻松地管理组件状态和应用程序状态，从而提高代码的可读性和可维护性。在本文中，我们将比较 React Hooks 和 Redux Hooks 的使用场景，帮助您决定何时使用哪种类型的 Hooks。
React Hooks
React Hooks 是 React 16.8 引入的一种新的编程模式。它们允许您在函数组件中使用状态和其他 React 功能，而不需要编写类组件。React Hooks 包括以下几种类型：
useState
useState Hook 允许您在函数组件中添加状态。例如，以下代码演示了如何使用 useState 来跟踪组件的计数器：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-在这个例子中，useState Hook 接受一个初始状态值 0，并返回一个包含当前状态值和更新状态值的函数。每次用户单击按钮时，组件的状态将更新，并重新渲染。
useEffect
useEffect Hook 允许您在组件渲染后执行副作用操作，例如订阅、网络请求等。例如，以下代码演示了如何使用 useEffect 来订阅一个 WebSocket：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- --------------- -
----- --------- ----------- - -------------
------------ -- -
----- ------ - --- -------------------------------
---------------- - ----- -- -
-----------------------
--
------ -- -- -
---------------
--
-- ----
------ ---------------------
-在这个例子中，useEffect Hook 接受两个参数：一个副作用函数和一个依赖数组。在这个例子中，我们传递了一个空数组 []，表示我们不依赖任何状态或属性，因此副作用函数只会在组件渲染后执行一次。
useContext
useContext Hook 允许您在一个 React 上下文中访问共享状态。例如，以下代码演示了如何使用 useContext 来访问一个主题上下文：
-- -------------------- ---- ------- ------ ------ - ---------- - ---- -------- ----- ------------ - ----------------------------- -------- ----------- - ----- ----- - ------------------------- ------ ------------ ------ -------------- -
在这个例子中，我们创建了一个名为 ThemeContext 的上下文，并将其初始值设置为 'light'。然后，我们在 ThemeDemo 组件中使用 useContext Hook 来访问该上下文的值。
Redux Hooks
Redux Hooks 是一种用于与 Redux Store 交互的 Hooks。它们允许您在函数组件中访问 Store 中的状态和调度操作。Redux Hooks 包括以下几种类型：
useSelector
useSelector Hook 允许您从 Redux Store 中选择状态。例如，以下代码演示了如何使用 useSelector 来选择一个计数器状态：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------------
-------- --------- -
----- ----- - ----------------- -- -------------
------ -
-----
------ ------- ------- ---------
------- ----------- -- ---------- ----- ----------- ----
----- --
---------
------
--
-在这个例子中，useSelector Hook 接受一个选择器函数，该函数从 Store 中选择一个状态。每次状态发生变化时，组件将重新渲染。
useDispatch
useDispatch Hook 允许您调度 Redux 操作。例如，以下代码演示了如何使用 useDispatch 来调度一个增量操作：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------------
-------- --------- -
----- -------- - --------------
------ -
-----
------ ------- ------- ---------
------- ----------- -- ---------- ----- ----------- ----
----- --
---------
------
--
-在这个例子中，useDispatch Hook 返回一个调度函数，该函数接受一个操作对象，该对象描述了要执行的 Redux 操作。在这个例子中，我们调度了一个增量操作。
比较
React Hooks 和 Redux Hooks 有一些相似之处，例如它们都允许您在函数组件中使用状态和其他功能。但是，它们的使用场景略有不同。
如果您只需要在组件中使用局部状态，例如表单输入或计数器，那么使用 React Hooks 是最好的选择。React Hooks 允许您轻松地管理组件状态，并避免使用类组件和 this 关键字。
然而，如果您需要与整个应用程序状态交互，例如用户身份验证或购物车状态，那么使用 Redux Hooks 是更好的选择。Redux Hooks 允许您选择和调度 Store 中的状态，从而实现全局状态共享。
结论
React Hooks 和 Redux Hooks 都是非常有用的编程模式。它们可以帮助您更轻松地管理组件状态和应用程序状态，并提高代码的可读性和可维护性。在选择使用 React Hooks 还是 Redux Hooks 时，您应该考虑您需要管理的状态的作用域和范围。以上是本文的所有内容，希望对您有所帮助。
示例代码
以下是一个使用 React Hooks 的计数器示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-以下是一个使用 Redux Hooks 的计数器示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
-------- --------- -
----- ----- - ----------------- -- -------------
----- -------- - --------------
------ -
-----
------ ------- ------- ---------
------- ----------- -- ---------- ----- ----------- ----
----- --
---------
------
--
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6764f8b827e83c872be5277b