React hooks 是 React 16.8 版本中引入的新特性，它提供了一种新的方式来编写 React 组件。React hooks 的一个重要特性就是可以在函数组件中使用状态和其他 React 特性，这使得函数组件可以替代类组件。
在 React hooks 中，组件状态是通过 useState() 钩子来管理的。当我们需要在多个组件之间共享状态时，React hooks 提供了一些方法来实现状态共享。
Context API
Context API 是 React 提供的一种组件之间共享状态的方法。它允许我们在组件树中传递数据，而不必一级一级地将数据传递下去。在 React hooks 中，我们可以使用 useContext() 钩子来访问 Context API。
下面是一个使用 Context API 在组件之间共享状态的示例代码：
------ ------ - -------------- ----------- -------- - ---- --------
----- -------------- - ----------------
-------- ---------------------- -
----- ------- --------- - ------------
------ -
------------------------ -------------- -----------
----------------
--------------------------
--
-
-------- --------- -
----- ------- --------- - ---------------------------
------ -
-----
--------- -----------
------- ----------- -- -------------- - ----------------------
------
--
-
-------- ----- -
------ -
-----------------
-------- --
-------- --
------------------
--
-在上面的代码中，CounterProvider 组件是一个使用 useState() 钩子来管理状态的组件。它使用 createContext() 创建了一个 CounterContext 对象，并通过 CounterContext.Provider 将状态共享给子组件。Counter 组件使用 useContext() 钩子来访问 CounterContext，并更新计数器的值。
useReducer()
useReducer() 钩子是 useState() 的替代品，它允许我们使用类似 Redux 的 reducer 函数来管理状态。useReducer() 钩子接受两个参数：reducer 函数和初始状态。reducer 函数接受当前状态和一个操作对象，返回新的状态。
下面是一个使用 useReducer() 钩子在组件之间共享状态的示例代码：
------ ------ - -------------- ----------- ---------- - ---- --------
----- -------------- - ----------------
-------- -------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
----- --- --------
-
-
-------- ---------------------- -
----- ------- --------- - ------------------- - ------ - ---
------ -
------------------------ -------------- -----------
----------------
--------------------------
--
-
-------- --------- -
----- ------- --------- - ---------------------------
------ -
-----
--------- -----------------
------- ----------- -- ---------- ----- ----------- ----------------------
------- ----------- -- ---------- ----- ----------- ----------------------
------
--
-
-------- ----- -
------ -
-----------------
-------- --
-------- --
------------------
--
-在上面的代码中，CounterProvider 组件使用 useReducer() 钩子来管理状态。它接受一个 reducer 函数和初始状态 { count: 0 }。Counter 组件使用 useContext() 钩子来访问 CounterContext，并通过 dispatch() 方法来触发 reducer 函数。
Redux
Redux 是一个流行的状态管理库，它提供了一种集中式的状态管理方式。在 React hooks 中，我们可以使用 react-redux 提供的 useSelector() 和 useDispatch() 钩子来访问 Redux 状态和触发 Redux action。
下面是一个使用 Redux 在组件之间共享状态的示例代码：
------ ----- ---- --------
------ - ----------- - ---- --------
------ - --------- ------------ ----------- - ---- --------------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------
-------- --------- -
----- ----- - ----------------- -- -------------
----- -------- - --------------
------ -
-----
--------- -----------
------- ----------- -- ---------- ----- ----------- ----------------------
------- ----------- -- ---------- ----- ----------- ----------------------
------
--
-
-------- ----- -
------ -
--------- --------------
-------- --
-------- --
-----------
--
-在上面的代码中，我们使用 createStore() 函数创建了一个 Redux store，并将 reducer 函数传递给它。Counter 组件使用 useSelector() 钩子来访问 Redux store 中的 count 状态，使用 useDispatch() 钩子来触发 Redux action。
总结
React hooks 提供了多种方法来在组件之间共享状态。使用 Context API 可以在组件树中传递数据，使用 useReducer() 钩子可以使用 reducer 函数来管理状态，使用 Redux 可以集中式地管理状态。选择哪种方法取决于应用程序的需求和个人偏好。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660a46aad10417a2229a3e02