本篇文章和大家了解一下react中可不可以使用事件总线。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
创新互联服务项目包括莲都网站建设、莲都网站制作、莲都网页制作以及莲都网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，莲都网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到莲都省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
react中可以使用事件总线；react使用事件总线可以用于解决跨组件之间的事件传递，可以利用一个使用较多的库events来完成对应的操作，利用npm或者yarn可以安装events，语法为“npm install events”和“yarn add events”。
本教程操作环境：Windows10系统、react17.0.1版、Dell G3电脑。
react中可以使用事件总线
react 事件总线解决的问题：跨组件之间的事件传递
在React开发中如果有跨组件之间的事件传递，应该如何操作？
A、在Vue中我们可以通过Vue的实例，快速实现一个事件总线（EventBus），来完成操作；
B、在React中可以依赖一个使用较多的库 events 来完成对应的操作；
如何实现
借助第三方库 events来实现
常见的 api
创建EventEmitter对象：eventBus对象
发出事件：eventBus.emit(“事件名称”, 参数列表)
监听事件：eventBus.addListener(“事件名称”, 监听函数)
移除事件：eventBus.removeListener(“事件名称”, 监听函数)
使用前需要先安装，下面两种方式任选一个
npm install events
yarn add events
events实践：
首先新建一个文件QcEventEmitter.js，文件内容如下：
import { EventEmitter } from 'events'
class QcEventEmitter extends EventEmitter {};
export default new QcEventEmitter();下面将实现EventTest组件向Person组件传递事件：
EventTest文件内容
A、EventTest组件中引入QcEventEmitter
B、在点击事件中通过QcEventEmitter.emit来发送事件
import React, { Component } from 'react';
import QcEventEmitter from 'common/utils/QcEventEmitter'
class EventTest extends Component {
render() {
return (
this.btnCLick()}>测试event事件
);
}
btnCLick(){
QcEventEmitter.emit('contextClick', 'Lucy', '99')
}
}export default EventTest;
Person文件内容
A、Person组件中引入QcEventEmitter，
B、在componentDidMount中通过QcEventEmitter.addListener来监听事件，
C、在 componentWillUnmount中通过QcEventEmitter.removeListener移除对事件的监听
import React, { Component, useContext } from 'react';
import QcEventEmitter from 'common/utils/QcEventEmitter'
class Person extends Component {
componentDidMount(){
QcEventEmitter.addListener("contextClick", this.headerClick)
}
componentWillUnmount() {
QcEventEmitter.removeListener("contextClick", this.headerClick)
}
headerClick(name, age) {
console.log(name, age);
}
render() {
return (
这是Person子组件
);
}
}
export default Person;在App.js文件中渲染EventTest组件和Person组件(Person组件渲染后，就可以监听EventTest发出的事件了，他们之间并不需要任何依赖)
import React from 'react';
import ContetTest from './pages/contenxt'
import Person from 'pages/contenxt/person'
function App() {
return (
