React 是一个流行的 JavaScript 库，用于构建用户界面。在 React 中，组件是构建块，可以将组件视为模块化的代码片段。在 React 中，组件之间的通信是通过状态和属性来完成的。在某些情况下，多个组件需要共享相同的状态。在本文中，我们将探讨如何在 React 中处理多个组件共享一个状态的问题。
状态提升
状态提升是一种处理多个组件共享状态的常见方法。状态提升是指将组件的状态从组件本身移到其父组件中，然后将状态作为属性传递给其子组件。这样，所有子组件都可以访问相同的状态。以下是一个示例：
-- -------------------- ---- -------
-- ---
----- --------------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
------------------- - -------------------------------
-
---------------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
-----
--------------- ------------------------ ----------------------------- --
--------------- ------------------------ ----------------------------- --
------
--
-
-
-- ---
-------- --------------------- -
------ -
------- ------------------------
------ -------------
---------
--
-在上面的示例中，父组件（ParentComponent）包含两个子组件（ChildComponent）。父组件维护一个 count 状态，并将其作为属性传递给两个子组件。当任何一个子组件被点击时，父组件中的 count 状态都会增加，并且所有子组件都会更新其显示。
使用 Context API
Context API 是一种在 React 中管理全局状态的方法。Context API 允许您将状态存储在一个地方，并让所有组件都可以访问该状态，而不必通过 props 进行传递。以下是一个示例：
-- -------------------- ---- -------
-- -------
----- ------------ - ----------------------
-- ---
----- --------------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
------------------- - -------------------------------
-
---------------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
---------------------- -------------------------
--------------- ----------------------------- --
--------------- ----------------------------- --
------------------------
--
-
-
-- ---
-------- --------------------- -
------ -
-----------------------
------ -- -
------- ------------------------
------ -------
---------
--
------------------------
--
-在上面的示例中，我们首先使用 React.createContext 创建了一个上下文对象（CountContext）。然后，在父组件中，我们使用 CountContext.Provider 将 count 状态作为值传递给所有子组件。在子组件中，我们使用 CountContext.Consumer 来访问 count 值，并在按钮上显示它。
使用 Redux
Redux 是一个流行的 JavaScript 库，用于管理应用程序的状态。Redux 允许您将状态存储在一个地方，并让所有组件都可以访问该状态，而不必通过 props 进行传递。以下是一个示例：
-- -------------------- ---- -------
-- -- ----- - ----------- -
-- -- ----- -----
------ - ----------- - ---- --------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------
-- ---
------ - ------- - ---- --------------
----- --------------- ------- --------------- -
-------- -
------ -
-----
--------------- --
--------------- --
------
--
-
-
-- ---
-------- --------------------- -
------ -
------- -------------------------------
------ -------------
---------
--
-
-------- ---------------------- -
------ - ------ ----------- --
-
-------- ---------------------------- -
------ - --------------- -- -- ---------- ----- ----------------- -- --
-
------ ------- ------------------------ ------------------------------------在上面的示例中，我们首先使用 createStore 函数创建了一个 Redux store，并定义了一个 reducer 函数来处理状态更新。然后，我们使用 connect 函数将 ChildComponent 组件连接到 Redux store，并将 count 状态和 incrementCount 函数作为 props 传递给该组件。在父组件中，我们只需要渲染两个 ChildComponent 组件，而不需要传递任何状态或函数。
结论
在 React 中，处理多个组件共享状态的问题有多种方法。状态提升是一种常见的方法，可以将状态从组件本身移到其父组件中。Context API 是一种更高级的方法，可以在整个应用程序中管理全局状态。Redux 是一个流行的 JavaScript 库，用于管理应用程序的状态。无论您选择哪种方法，都可以轻松地处理多个组件共享状态的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6764bae3856ee0c1d42db1ff