react事件监听和触发（针对跨页面和跨级等等）

events.js文件

/*
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2021-08-30 14:40:39
 * @LastEditors: sueRimn
 * @LastEditTime: 2021-08-30 15:07:21
 */
function evtBus() {
  const listeners = {}; // 保存已经注册的事件
  const isFunction = (fn) => fn && Object.prototype.toString.call(fn) === '[object Function]';
  const isString = (str) =>
    str && (typeof str === 'string' || Object.prototype.toString.call(str) === '[object String]');
  const isValid = (event, callback) => isString(event) && isFunction(callback);

  return {
    on(event, callback) {
      // 校验合法性
      if (isValid(event, callback)) {
        // 已经注册过该事件的话，将callback加入到该事件的回调数组中
        if (listeners[event] && !listeners[event].includes(callback))
          listeners[event].push(callback);
        else listeners[event] = [callback];
      } else {
        console.error('$evtBus.on() 参数不合法');
      }
    },
    emit(event, params) {
      console.log(listeners[event],'listeners[event]')
      if (isString(event) && listeners[event])
        listeners[event].forEach((cb) => {
          cb(params);
        });
    },
    remove(event, callback) {
      if (isValid(event, callback) && listeners[event]) {
        const index = listeners[event].indexOf(callback);
        if (index !== -1) listeners[event].splice(index, 1);
      }
    },
  };
}

export default new evtBus();

挂载待react上

import Events from './utils/event_bus'
React.$Events = Events;

组件调用react事件总线api及例子

触发组件：

import React from 'react'

export default function test() {
  return (
    <button onClick={() => {
      React.$Events.emit('tap') // 触发总线事件
    }}>
      点击事件触发监控
    </button>
  )
}

其他页面监听事件：

import React, { useEffect } from 'react'

export default function test () {

  const cb = () => {
    console.log('总线事件触发')
  }

  useEffect(() => {
    React.$Events.on('tap', cb) // 绑定事件
    return () => {
      React.$Events.remove('tap') // 移除事件（可在任意地方移除）
    }
  }, [])

  return (
    <div>
      监听页面
    </div>
  )
}