React 是一个用于构建用户界面的 JavaScript 库。在 React 中，通常将整个应用程序拆分成多个组件，并将它们组合在一起以形成具有功能性和目的性的整体。但是在跨多个组件传递信息时，有时我们可能需要一种机制来进行跨组件通信。下面我们将探讨一些 React 中处理跨组件通信的方法。
Props 和状态提升
React 组件接受其父组件传递的 props 属性，从而实现了跨组件之间的信息传递。这种方式被称为“状态提升”，因为它可以将信息从下层组件提升到更高层组件。
例如，我们可以定义一个名为 ParentComponent 的父组件，它通过将一个 name 属性传递给它的子组件 ChildComponent 来使得两个组件进行通信。在 ParentComponent 中，我们可以定义 name 属性并将其通过 props 传递给 ChildComponent：
-- -------------------- ---- -------
----- --------------- ------- --------------- -
-------- -
------ --------------- ---------------------- ---
-
-
----- -------------- ------- --------------- -
-------- -
------ -----------------------------
-
-在这个示例中，我们通过 props 将 ParentComponent 的 name 属性传递给 ChildComponent，从而实现了跨组件通信。当然，这种方法的局限性是信息只能从父组件向子组件传递，无法反向传递信息。
Context API
Context API 是 React 在版本 16.3 中引入的新特性。它是一种跨组件通信的解决方案，可以解决在多层嵌套的组件树中传递相同的数据的问题。
要使用 Context API，我们需要先创建一个 Provider，它可以向下层组件传递信息。在下层组件中，可以通过 Consumer 来接收来自 Provider 的信息。
以下是一个使用 Context API 进行跨组件通信的示例：
-- -------------------- ---- -------
-- ------ -------------- - ------- --
----- ------------ - -----------------------------
-- ---- -------- ---- ------------ ------------
----- --- ------- --------------- -
-------- -
------ -
---------------------- -------------
------- --
----- --
------------------------
--
-
-
-- - ------ ------ -------- ------ ------------ ---
----- ------ ------- --------------- -
-------- -
------ -
-----------------------
------ -- ----------- ------ --------------
------------------------
--
-
-
-- - ---- ------ -------- ------ ------------ ---
----- ---- ------- --------------- -
-------- -
------ -
-----
-----------------------
------ -- --------- ------ --------------
------------------------
-------- --
------
--
-
-
-- - ------- ------ -------- ------ ------------ ---
----- ------- ------- --------------- -
-------- -
------ -
-----------------------
------ -- ------------ ------ --------------
------------------------
--
-
-在这个示例中，我们创建了一个名为 ThemeContext 的 Context 对象，并通过 Provider 将其设置为 dark。在 Header、Main 和 Content 组件中，我们通过 Consumer 组件接收来自 ThemeContext 的信息（即 dark），并将其渲染到界面上。
Redux
Redux 是一个独立于 React 的 JavaScript 库，它通过在整个应用程序中管理全局状态，实现了跨组件通信。Redux 使用一个名为 Store 的中心化状态容器来存储应用程序的状态，并通过 Action 触发器来更新该状态。
Redux 的工作原理如下：
- Action 触发器将 Action（即描述更新应用程序状态的消息）发送到 Store。
- Reducer 将 Action 和当前状态合并，并返回一个新的状态。
- Store 将新状态更新到 Store 中，并通知所有订阅者状态的更改。
想要使用 Redux 进行跨组件通信，需要先安装 Redux 库及其相关依赖项。下面是一个使用 Redux 实现跨组件通信的示例：
-- -------------------- ---- -------
-- -- ------ --
----- ----------- - --------------
-- -- ------ -------- ---- --
-------- ---------------- -
------ -
----- ------------
-------- ----
--
-
-- -- ------------ ---- --
-------- ----------------- - --- ------- -
------ ------------- -
---- ------------
------ ---------------
--------
------ ------
-
-
-- -- -------- ------- --
----- ----- - -------------------------------
-- ------ -----
----- --- ------- --------------- -
------------------ -
-------------
---------- - - ----- -- --
-
------------------- -
-- -------- -------- ---- -----
---------------- - ------------------ -- -
----- ---- - -----------------
--------------- ---- ---
---
-
---------------------- -
-- ----------
-------------------
-
-------- -
------ --------------- ---------------------- ---
-
-
-- ------- ----- ---- ----- ----- ---
----- -------------- ------- --------------- -
-------- -
------ -----------------------------
-
-在这个示例中，我们定义了一个 Action 触发器 updateName，用于更新 name 状态。我们还定义了一个 Reducer 函数 nameReducer，用于更新 name 状态。最后我们创建了一个 Store，并在 App 组件中订阅该 Store。在 ChildComponent 组件中，我们直接通过 props 访问来自 Redux Store 的 name 状态。
结论
以上是几种处理跨组件通信的方法。在使用时，我们应该根据实际情况选择适合的方案。Props 和状态提升适用于父子关系的组件之间进行简单的单向数据传递。Context API 适用于在多层嵌套组件之间传递同一数据的情况。Redux 则适用于管理全局状态，并实现了跨组件的双向数据传递。
当然，以上方案仅仅是其中的几种，还有一些其他的方案，如事件总线、自定义 Hooks 等等。在实际开发中，我们需要根据具体情况进行选择，灵活使用各种跨组件通信方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670890bed91dce0dc8727014