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

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[]) => voidclass 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;