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中可不可以使用事件總線的簡略介紹，當然詳細使用上面的不同還得要大家自己使用過才領會。如果想了解更多，歡迎關注億速云行業資訊頻道哦！