回答react中可以使用事件总线吗

 所属分类:web前端开发

 浏览:191次-  评论: 0次-  更新时间:2022-11-03
描述:更多教程资料进入php教程获得。 react中可以使用事件总线;react使用事件总线可以用于解决跨组件之间的事件传递,可以利用一个使用较多的库...
更多教程资料进入php教程获得。

react中可以使用事件总线;react使用事件总线可以用于解决跨组件之间的事件传递,可以利用一个使用较多的库events来完成对应的操作,利用npm或者yarn可以安装events,语法为“npm install events”和“yarn add events”。

前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用

本教程操作环境: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中可以使用事件总线吗的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: react,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!