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;
相关推荐
vvilkim3 分钟前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架
장숙혜6 分钟前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang9 分钟前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端12 分钟前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_14 分钟前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
莫问alicia15 分钟前
react 常用钩子 hooks 总结
前端·javascript·react.js
Mintopia24 分钟前
图形学中的数学基础与 JavaScript 实践
前端·javascript·计算机图形学
Mintopia31 分钟前
Three.js 制作飘摇的草:从基础到进阶的全流程教学
前端·javascript·three.js
BillKu31 分钟前
Vue3父子组件数据双向同步实现方法
前端·javascript·vue.js
红尘散仙1 小时前
七、WebGPU 基础入门——Texture 纹理
前端·rust·gpu