发布 / 订阅模式

是什么

发布/订阅（Pub/Sub）让发布者与订阅者通过中介（事件总线、消息代理）通信，彼此不直接引用，从而解耦。

在 React 中可用于跨层通信；规模变大时通常会让位于 Context、状态管理库或 URL 状态，便于调试与数据流可追溯。

基本概念

发布者：发出事件（及可选 payload）。
订阅者：注册回调，在事件发生时执行。
事件总线：维护「事件名 → 回调列表」，负责 subscribe / publish / unsubscribe。

极简 EventBus

type Handler<T = unknown> = (data: T) => void;

class EventBus {
  private events = new Map<string, Handler[]>();

  subscribe<T>(event: string, callback: Handler<T>) {
    const list = this.events.get(event) ?? [];
    list.push(callback as Handler);
    this.events.set(event, list);
    return () => this.unsubscribe(event, callback as Handler);
  }

  publish<T>(event: string, data: T) {
    this.events.get(event)?.forEach((cb) => cb(data));
  }

  unsubscribe(event: string, callback: Handler) {
    const list = this.events.get(event);
    if (!list) return;
    this.events.set(
      event,
      list.filter((cb) => cb !== callback),
    );
  }
}

在 React 中使用注意

在 useEffect 里订阅，清理函数里取消订阅，避免泄漏与重复回调。
与 Context 对比：Pub/Sub 更「广播」、不随组件树；Context 更贴合 React 数据自上而下传递。

适用场景

模块间松耦合通知、小型全局事件；复杂应用优先显式数据流或专用消息基础设施。

发布 / 订阅模式 ​

是什么 ​

基本概念 ​

极简 EventBus ​

在 React 中使用注意 ​

适用场景 ​

发布 / 订阅模式

是什么

基本概念

极简 EventBus

在 React 中使用注意

适用场景