当前位置：首页 > news >正文

react使用eventBus在不同模块间进行通信

news 2025/7/14 21:22:36

1. eventBus 使用说明

eventBus 是一个事件总线（Event Bus）实例，用于在不同的组件或模块之间进行通信。它提供了 on、off 和 emit 方法来订阅、取消订阅和触发事件。以下是 eventBus 的详细使用方法：

2. 主要方法

on(eventName: string, callback: Callback): void
功能：订阅一个事件。
参数：
eventName：事件名称（字符串）。
callback：事件触发时执行的回调函数。

off(eventName: string, callback: Callback): void
功能：取消订阅一个事件。
参数：
eventName：事件名称（字符串）。
callback：要取消订阅的回调函数。

emit(eventName: string, …args: any[]): void
功能：触发一个事件，并传递参数给所有订阅该事件的回调函数。
参数：
eventName：事件名称（字符串）。
…args：传递给回调函数的参数。

3. 使用

在项目中创建eventbus文件夹，里面创建index.tsx

type Callback = (...args: any[]) => void

class EventBus {
  private events: Map<string, Callback[]>

  constructor() {
    this.events = new Map()
  }

  on(eventName: string, callback: Callback): void {
    if (!this.events.has(eventName)) {
      this.events.set(eventName, [])
    }
    this.events.get(eventName)?.push(callback)
  }

  off(eventName: string, callback: Callback): void {
    if (this.events.has(eventName)) {
      const callbacks: any = this.events.get(eventName)
      const index = callbacks.indexOf(callback)
      if (index !== -1) {
        callbacks.splice(index, 1)
      }
    }
  }

  emit(eventName: string, ...args: any[]): void {
    if (this.events.has(eventName)) {
      this.events.get(eventName)?.forEach(callback => {
        callback(...args)
      })
    }
  }
}

const eventBus = new EventBus()
export default eventBus

订阅事件
在组件 A 中订阅一个事件：

import React, { useEffect } from 'react';
import eventBus from '@/packages/eventbus';

const ComponentA = () => {
  useEffect(() => {
    const handleEvent = (data: any) => {
      console.log('ComponentA received event:', data);
    };

    eventBus.on('myEvent', handleEvent);

    // 清理订阅
    return () => {
      eventBus.off('myEvent', handleEvent);
    };
  }, []);

  return <div>Component A</div>;
};

export default ComponentA;

触发事件
在组件 B 中触发该事件：

import React from 'react';
import eventBus from '@/packages/eventbus';

const ComponentB = () => {
  const triggerEvent = () => {
    eventBus.emit('myEvent', { message: 'Hello from Component B!' });
  };

  return (
    <div>
      Component B
      <button onClick={triggerEvent}>Trigger Event</button>
    </div>
  );
};

export default ComponentB;