本篇文章和大家了解一下react中可不可以使用事件總線。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

創(chuàng)新互聯(lián)服務項目包括蓮都網(wǎng)站建設、蓮都網(wǎng)站制作、蓮都網(wǎng)頁制作以及蓮都網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，蓮都網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到蓮都省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

react中可以使用事件總線；react使用事件總線可以用于解決跨組件之間的事件傳遞，可以利用一個使用較多的庫events來完成對應的操作，利用npm或者yarn可以安裝events，語法為“npm install events”和“yarn add events”。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react中可以使用事件總線

react 事件總線解決的問題：跨組件之間的事件傳遞

在React開發(fā)中如果有跨組件之間的事件傳遞，應該如何操作？

A、在Vue中我們可以通過Vue的實例，快速實現(xiàn)一個事件總線（EventBus），來完成操作；

B、在React中可以依賴一個使用較多的庫 events 來完成對應的操作；

如何實現(xiàn)

借助第三方庫 events來實現(xiàn)

常見的 api

創(chuàng)建EventEmitter對象：eventBus對象

發(fā)出事件：eventBus.emit(“事件名稱”, 參數(shù)列表)

監(jiān)聽事件：eventBus.addListener(“事件名稱”, 監(jiān)聽函數(shù))

移除事件：eventBus.removeListener(“事件名稱”, 監(jiān)聽函數(shù))

使用前需要先安裝，下面兩種方式任選一個

npm install events 
yarn add events

events實踐：

首先新建一個文件QcEventEmitter.js，文件內(nèi)容如下：

import { EventEmitter } from 'events'
class QcEventEmitter extends EventEmitter {};
export default new QcEventEmitter();

下面將實現(xiàn)EventTest組件向Person組件傳遞事件：

EventTest文件內(nèi)容

A、EventTest組件中引入QcEventEmitter

B、在點擊事件中通過QcEventEmitter.emit來發(fā)送事件

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文件內(nèi)容

A、Person組件中引入QcEventEmitter，

B、在componentDidMount中通過QcEventEmitter.addListener來監(jiān)聽事件，

C、在 componentWillUnmount中通過QcEventEmitter.removeListener移除對事件的監(jiān)聽

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組件渲染后，就可以監(jiān)聽EventTest發(fā)出的事件了，他們之間并不需要任何依賴)

import React from 'react';
import ContetTest from './pages/contenxt'
import Person from 'pages/contenxt/person'
function App() {
  return (