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实践：

e网企业2.0

一款适用于中小企业自助建站程序，是c#与xml技术相结合的产物，支持动态设定二级栏目，采用了开放式架构，建站模版自由添加。程序整合了（单一文本，新闻列表，图片列表 ，在线订单， 文件下载 ， 留言板）六类插件，以所见即所得的方式，将烦锁的建站过程简化到三步，使用户可以轻松上手。 管理后台：manage.aspx 初始密码均为admin

下载

首先新建一个文件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 (
    

      
      
    
  );
}
export default App;

【相关推荐：javascript视频教程、web前端】