React 中兄弟组件如何通信？

推荐答案

在 React 中，兄弟组件之间可以通过以下几种方式进行通信：

1. 通过共同的父组件传递数据：将共享的状态提升到共同的父组件中，然后通过 props 将数据传递给子组件。子组件可以通过回调函数将数据传递回父组件，父组件再更新状态并传递给另一个子组件。

2. 使用 Context API：通过 React 的 Context API，可以在组件树中共享数据，而不需要通过 props 逐层传递。兄弟组件可以通过 Context 来获取和更新共享的数据。

3. 使用状态管理库：如 Redux、MobX 等状态管理库，可以在全局范围内管理应用的状态。兄弟组件可以通过这些库来共享和更新状态。

本题详细解读

1. 通过共同的父组件传递数据

这是 React 中最常见的兄弟组件通信方式。假设有两个兄弟组件 ChildA 和 ChildB，它们需要共享一个状态 count。

-- -------------------- ---- -------
------ ------ - -------- - ---- --------

-------- -------- -
  ----- ------- --------- - ------------

  ----- --------- - -- -- -
    -------------- - ---
  --

  ------ -
    -----
      ------- ------------- --
      ------- --------------------- --
    ------
  --
-

-------- -------- ----- -- -
  ------ ----------- --------------
-

-------- -------- --------- -- -
  ------ ------- ---------------------------------------
-

在这个例子中，Parent 组件管理 count 状态，并通过 props 将 count 传递给 ChildA，将 increment 函数传递给 ChildB。当 ChildB 中的按钮被点击时，increment 函数会更新 count，从而触发 ChildA 的重新渲染。

2. 使用 Context API

Context API 提供了一种在组件树中共享数据的方式，而不需要通过 props 逐层传递。以下是一个使用 Context API 的例子：

-- -------------------- ---- -------
------ ------ - -------------- ----------- -------- - ---- --------

----- ------------ - ----------------

-------- -------- -
  ----- ------- --------- - ------------

  ------ -
    ---------------------- -------- ------ -------- ---
      ------- --
      ------- --
    ------------------------
  --
-

-------- -------- -
  ----- - ----- - - -------------------------
  ------ ----------- --------------
-

-------- -------- -
  ----- - -------- - - -------------------------
  ------ ------- ----------- -- ------------- -- ---- - -----------------------
-

在这个例子中，Parent 组件通过 CountContext.Provider 提供了 count 和 setCount，ChildA 和 ChildB 通过 useContext 获取这些值并进行操作。

3. 使用状态管理库

对于更复杂的应用，可以使用 Redux、MobX 等状态管理库来管理全局状态。以下是一个使用 Redux 的例子：

-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------
------ - --------- ------------ ----------- - ---- --------------

----- ------------ - - ------ - --

-------- ------------- - ------------- ------- -
  ------ ------------- -
    ---- ------------
      ------ - ------ ----------- - - --
    --------
      ------ ------
  -
-

----- ----- - ---------------------

-------- -------- -
  ------ -
    --------- --------------
      ------- --
      ------- --
    -----------
  --
-

-------- -------- -
  ----- ----- - ----------------- -- -------------
  ------ ----------- --------------
-

-------- -------- -
  ----- -------- - --------------
  ------ ------- ----------- -- ---------- ----- ----------- -----------------------
-

在这个例子中，Parent 组件通过 Provider 提供了 Redux store，ChildA 通过 useSelector 获取 count，ChildB 通过 useDispatch 分发 INCREMENT action 来更新 count。