深入浅出剖析 React 兄弟组件的三种通讯方式

前端

2023-09-20 09:54:23

兄弟组件在 React 中的沟通之道：深入探讨数据交换的艺术

在 React 的世界里，组件林立，彼此之间难免需要沟通。当组件之间没有父子关系时，也就是我们所说的兄弟组件，它们的数据交换就成了一个饶有兴致的话题。本文将深入探讨 React 中兄弟组件通讯的三种主要方法，让你成为组件沟通的大师！

一、props：简单明了的直达通道

props 是传递数据最简单直接的方式。就像一个快递员，它负责将数据从组件 A 送到组件 B。在组件 A 中，你只需在 props 中定义数据，而在组件 B 中，通过 props 就能轻松获取。

优点：

使用方便，不影响组件的封装性。

缺点：

只支持单向数据流，只能从父组件传递数据到子组件。
多个组件之间的数据传递会使代码变得杂乱。

代码示例：

// 组件 A（父组件）
const DataProvider = (props) => {
  const data = "Hello world!";
  return <DataReceiver data={data} />;
};

// 组件 B（子组件）
const DataReceiver = (props) => {
  return <div>{props.data}</div>;
};

二、context：祖辈的馈赠，后代的福利

context 就像一个家族中的长辈，可以将数据从祖先组件传递给所有后代组件。它创建一个共享的数据仓库，后代组件可以通过一个特殊的 hook 访问数据。

优点：

支持双向数据流，祖先组件和后代组件都可以访问数据。
不影响组件的封装性。

缺点：

容易造成命名冲突，不同的祖先组件可能使用相同的 context 名称。

代码示例：

// 创建 context
const MyContext = React.createContext();

// 祖先组件
const DataProvider = () => {
  const data = "Hello world!";
  return (
    <MyContext.Provider value={data}>
      <DataReceiver />
    </MyContext.Provider>
  );
};

// 后代组件
const DataReceiver = () => {
  const data = useContext(MyContext);
  return <div>{data}</div>;
};

三、event bus：灵动的消息中转站

event bus 是一个消息中转站，允许组件通过发布和订阅事件进行通讯。组件 A 可以发布一个事件，携带数据，而组件 B 可以订阅这个事件，在收到数据时做出响应。

优点：

灵活多变，支持任意组件之间的通讯。
不受组件层级限制。

缺点：

代码易于混乱，难以追踪事件流。

代码示例：

// 创建 event bus
const eventBus = new EventEmitter();

// 发布事件
eventBus.emit("data-update", { data: "Hello world!" });

// 订阅事件
eventBus.on("data-update", (data) => {
  console.log(data);
});