React 中什么时候用事件总线

事件总线（Event Bus）是一种用于组件之间通信的模式，通常是基于发布/订阅（Pub/Sub）模型。它在 React 中的应用场景包括：

适用场景

1. 跨层级组件通信：

   • 当组件之间没有直接的父子关系（跨层级通信），也无法通过 props 或 context 简单地传递数据时，可以使用事件总线。

2. 松耦合的组件通信：

   • 如果组件之间不想直接依赖，可以通过事件总线实现松耦合的通信。

3. 全局事件管理：

   • 如果需要在全局范围内监听某些事件，例如通知系统、全局用户操作等。

4. 避免复杂的状态管理工具：

   • 在某些场景下，如果不想使用 Redux 或 Context 等复杂的状态管理工具，事件总线可以作为一个轻量级替代方案。

不适用场景

• 状态复杂且需要可视化调试：
  • 在状态复杂的场景中，建议使用 Redux 或 MobX 等状态管理工具，事件总线可能会导致难以维护的事件流。
• 父子组件通信：
  • 父子组件之间通信应该使用 props 或 context，而不是事件总线。

---

封装一个专业、灵活的事件总线组件

我们将封装一个可扩展的事件总线组件，支持以下功能：

• 事件订阅：订阅指定事件。
• 事件触发：触发指定事件，向订阅者发送数据。
• 事件取消订阅：移除订阅者，避免内存泄漏。
• 灵活扩展：支持动态添加功能或中间件。

---

事件总线核心实现

我们使用 EventEmitter 的设计模式来实现一个事件总线。

class EventBus {
  constructor() {
    this.events = {}; // 存储事件和对应的订阅者
  }

  /**
   * 订阅事件
   * @param {string} eventName - 事件名称
   * @param {function} callback - 事件触发时调用的回调函数
   */
  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = []; // 如果事件不存在，初始化为数组
    }
    this.events[eventName].push(callback); // 添加回调到事件列表
  }

  /**
   * 触发事件
   * @param {string} eventName - 事件名称
   * @param {...any} args - 传递给订阅者的参数
   */
  emit(eventName, ...args) {
    if (this.events[eventName]) {
      this.events[eventName].forEach((callback) => {
        callback(...args); // 调用每个订阅者的回调函数
      });
    }
  }

  /**
   * 取消订阅事件
   * @param {string} eventName - 事件名称
   * @param {function} callback - 要移除的回调函数
   */
  off(eventName, callback) {
    if (this.events[eventName]) {
      this.events[eventName] = this.events[eventName].filter(
        (cb) => cb !== callback
      );
    }
  }

  /**
   * 清除所有订阅者
   * @param {string} eventName - 事件名称
   */
  clear(eventName) {
    if (this.events[eventName]) {
      delete this.events[eventName];
    }
  }
}

// 导出单例模式的事件总线
export const eventBus = new EventBus();

React 中使用事件总线

我们将结合 useEffect 和 useState 来展示如何在 React 中使用事件总线。

---

示例：组件间通信

javascript
import React, { useEffect, useState } from 'react';
import { eventBus } from './EventBus';

// 发送事件的组件
function Sender() {
  const sendEvent = () => {
    eventBus.emit('message', 'Hello from Sender!'); // 触发事件并发送数据
  };

  return (
    <button onClick={sendEvent}>
      Send Message
    </button>
  );
}

// 接收事件的组件
function Receiver() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const handleMessage = (msg) => {
      setMessage(msg); // 更新状态
    };

    eventBus.on('message', handleMessage); // 订阅事件

    return () => {
      eventBus.off('message', handleMessage); // 取消订阅，避免内存泄漏
    };
  }, []);

  return (
    <div>
      <h2>Received Message: {message}</h2>
    </div>
  );
}

// 主组件
export default function App() {
  return (
    <div>
      <h1>React Event Bus Example</h1>
      <Sender />
      <Receiver />
    </div>
  );
}

示例：扩展事件总线功能

你可以扩展 EventBus 类的功能，例如添加一次性订阅（once）功能：

/**
 * 订阅一次性事件
 * @param {string} eventName - 事件名称
 * @param {function} callback - 事件触发时调用的回调函数
 */
once(eventName, callback) {
  const wrapper = (...args) => {
    callback(...args); // 调用回调
    this.off(eventName, wrapper); // 触发后自动取消订阅
  };
  this.on(eventName, wrapper);
}

然后在 React 中使用：

/**
 * 订阅一次性事件
 * @param {string} eventName - 事件名称
 * @param {function} callback - 事件触发时调用的回调函数
 */
once(eventName, callback) {
  const wrapper = (...args) => {
    callback(...args); // 调用回调
    this.off(eventName, wrapper); // 触发后自动取消订阅
  };
  this.on(eventName, wrapper);
}

---

优点和扩展性

优点

1. 松耦合：组件之间可以通过事件通信，而不需要直接引用对方。
2. 简单易用：EventBus 结构清晰、扩展性强。
3. 轻量级：适合小型到中型项目的组件通信。

扩展方向

1. 中间件支持：
   • 可以在事件触发前后添加中间件，用于日志记录、权限检查等。
2. 事件优先级：
   • 给事件订阅者设定优先级，按优先级顺序调用回调。
3. 异步支持：
   • 可以扩展为支持异步事件回调。
4. 类型安全：
   • 使用 TypeScript 为事件总线添加类型支持，确保事件和参数的类型安全。

---

事件总线与其他状态管理工具的选择

工具	优点	缺点	使用场景
事件总线	简单、轻量、松耦合组件通信	状态不可追踪，调试难	跨层级通信、全局事件管理
useContext	内置，轻量，适合简单状态共享	性能可能受影响，依赖组件树	状态较少且组件树较浅
Redux	状态集中管理，可视化调试	学习曲线高，样板代码较多	大型应用，复杂状态管理

---

总结

• 事件总线 是一种轻量级、灵活的工具，适合跨层级通信和全局事件管理。
• 使用 EventBus 类可以封装强大且可扩展的事件总线。
• 在需要复杂状态管理时，推荐结合 Redux 或其他状态管理工具使用。