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

js 复制代码
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 中订阅一个事件:

js 复制代码
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 中触发该事件:

js 复制代码
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;
相关推荐
吞掉星星的鲸鱼23 分钟前
使用高德api实现天气查询
前端·javascript·css
lilye6626 分钟前
程序化广告行业(55/89):DMP与DSP对接及数据统计原理剖析
java·服务器·前端
zhougl9962 小时前
html处理Base文件流
linux·前端·html
花花鱼2 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_2 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo4 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之5 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端5 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡5 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木7 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5