React 中兄弟组件如何通信？

推荐答案

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

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

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

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

本题详细解读

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

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

// www.javascriptcn.com code example
import React, { useState } from 'react';

function Parent() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <ChildA count={count} />
      <ChildB increment={increment} />
    </div>
  );
}

function ChildA({ count }) {
  return <div>Count: {count}</div>;
}

function ChildB({ increment }) {
  return <button onClick={increment}>Increment</button>;
}

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

2. 使用 Context API

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

// www.javascriptcn.com code example
import React, { createContext, useContext, useState } from 'react';

const CountContext = createContext();

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={{ count, setCount }}>
      <ChildA />
      <ChildB />
    </CountContext.Provider>
  );
}

function ChildA() {
  const { count } = useContext(CountContext);
  return <div>Count: {count}</div>;
}

function ChildB() {
  const { setCount } = useContext(CountContext);
  return <button onClick={() => setCount(prev => prev + 1)}>Increment</button>;
}

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

3. 使用状态管理库

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

// www.javascriptcn.com code example
import React from 'react';
import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

const initialState = { count: 0 };

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

function Parent() {
  return (
    <Provider store={store}>
      <ChildA />
      <ChildB />
    </Provider>
  );
}

function ChildA() {
  const count = useSelector(state => state.count);
  return <div>Count: {count}</div>;
}

function ChildB() {
  const dispatch = useDispatch();
  return <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>;
}

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