React 中跨层级组件如何通信？

推荐答案

在 React 中，跨层级组件通信可以通过以下几种方式实现：

1. Context API：使用 React 的 Context 可以在组件树中传递数据，而不必手动通过每一层级的 props 传递。Context 提供了一个在组件之间共享数据的方式，适用于跨多层级的组件通信。

2. 状态管理库：如 Redux、MobX 等状态管理库可以集中管理应用的状态，并通过订阅机制让组件在状态变化时自动更新。这种方式适合大型应用或状态复杂的场景。

3. 事件总线：通过自定义事件总线（Event Bus）或使用第三方库（如 EventEmitter）来实现组件之间的通信。这种方式适合组件之间没有直接父子关系的情况。

4. 回调函数与状态提升：通过将回调函数作为 props 传递给子组件，子组件可以通过调用这些回调函数来通知父组件状态的变化。这种方式适合父子组件之间的通信。

本题详细解读

1. Context API

Context 是 React 提供的一种跨层级组件通信的机制。它允许你在组件树中传递数据，而不必手动通过每一层级的 props 传递。Context 的使用步骤如下：

• 创建 Context：使用 React.createContext 创建一个 Context 对象。
• 提供 Context：使用 Context.Provider 组件包裹需要共享数据的组件树，并通过 value 属性传递数据。
• 消费 Context：在需要访问数据的组件中使用 Context.Consumer 或 useContext Hook 来获取数据。

// www.javascriptcn.com code example
const MyContext = React.createContext();

function App() {
  return (
    <MyContext.Provider value="Hello, World!">
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

2. 状态管理库

状态管理库如 Redux、MobX 等可以帮助你在应用中集中管理状态，并通过订阅机制让组件在状态变化时自动更新。这种方式适合大型应用或状态复杂的场景。

• Redux：Redux 通过 store 来管理应用的状态，组件可以通过 connect 或 useSelector 来订阅 store 中的状态变化。
• MobX：MobX 通过 observable 和 observer 来实现状态的自动更新。

3. 事件总线

事件总线是一种通过自定义事件来实现组件通信的方式。你可以使用 EventEmitter 或自定义事件总线来实现。

// www.javascriptcn.com code example
const EventBus = new EventEmitter();

function ComponentA() {
  const handleClick = () => {
    EventBus.emit('event', 'Hello from ComponentA');
  };

  return <button onClick={handleClick}>Click Me</button>;
}

function ComponentB() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const listener = (msg) => setMessage(msg);
    EventBus.on('event', listener);
    return () => EventBus.off('event', listener);
  }, []);

  return <div>{message}</div>;
}

4. 回调函数与状态提升

回调函数与状态提升是 React 中最常见的父子组件通信方式。通过将回调函数作为 props 传递给子组件，子组件可以通过调用这些回调函数来通知父组件状态的变化。

// www.javascriptcn.com code example
function ParentComponent() {
  const [message, setMessage] = useState('');

  const handleMessageChange = (newMessage) => {
    setMessage(newMessage);
  };

  return (
    <div>
      <ChildComponent onMessageChange={handleMessageChange} />
      <div>{message}</div>
    </div>
  );
}

function ChildComponent({ onMessageChange }) {
  const handleClick = () => {
    onMessageChange('Hello from ChildComponent');
  };

  return <button onClick={handleClick}>Click Me</button>;
}