[JavaScript知识库]react 非父子组件 跨组件通信 使用 Events 的 EventBus

一般在Vue中我们可以通过Vue的实例，快速实现一个事件总线（EventBus）来完成操作；

在React中可以依赖一个使用较多的库 events 来完成对应的操作；

写一个小demo

1. 添加events库

yarn add events

2. 封装成一个Event工具类
值得注意的是，封装起来就是要让，整个项目统一使用一个总事件对象

//EventBus.js 文件
import { EventEmitter } from 'events'
export default new EventEmitter();

3. 抛出事件的组件

import React  from "react";
import EventBus from "../util/EventBus.js";
export default class MyEventBus extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            data: 'hello world'
        }
    }
    handleEvent=()=>{
        //事件名 和 参数
        EventBus.emit('eventName',this.state.data);
    }
    render(){
        return (
            <div>
                <h1>你好，世界</h1>
                <button onClick={this.handleEvent}>抛出一个全局事件</button>
            </div>
        )
    }
}

4. 接收抛出事件的组件

//app.js文件
import React, { useEffect } from "react";
import EventBus from "./util/EventBus";

function App() {
  useEffect(() => {
    //接收全局抛出的事件
    EventBus.addListener('eventName', data => {
      alert(data);
    })
  }, [])
  return (
    <h1>这是app.js文件</h1>
  )
}