react中可以使用事件总线吗

93 阅读 0 评论 62 点赞

我是靠谱客的博主糊涂黑米，最近开发中收集的这篇文章主要介绍react中可以使用事件总线吗，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本教程操作环境：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>
       <h2>这是Person子组件</h2>
      </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;
登录后复制

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

以上就是react中可以使用事件总线吗的详细内容，更多请关注靠谱客其它相关文章！