react中可不可以使用事件总线

本篇文章和大家了解一下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 (
      <div>
        <button onClick={e => this.btnCLick()}>测试event事件</button>
      </div>
    );
  }
  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 (
      <div>
       <h3>这是Person子组件</h3>
      </div>
    );
  }
}
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 (
    <div className="App">
      <ContetTest />
      <Person />
    </div>
  );
}
export default App;

以上就是react中可不可以使用事件总线的简略介绍，当然详细使用上面的不同还得要大家自己使用过才领会。如果想了解更多，欢迎关注亿速云行业资讯频道哦！