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;
相关推荐
灵感__idea2 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴3 小时前
Mix
前端·webgl
代码续发3 小时前
前端组件梳理
前端
试图让你心动4 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码4 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记4 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数5 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante5 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript