react中可不可以使用事件總線

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

react中可以使用事件總線；react使用事件總線可以用于解決跨組件之間的事件傳遞，可以利用一個(gè)使用較多的庫(kù)events來(lái)完成對(duì)應(yīng)的操作，利用npm或者yarn可以安裝events，語(yǔ)法為“npm install events”和“yarn add events”。

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

react中可以使用事件總線

react 事件總線解決的問(wèn)題：跨組件之間的事件傳遞

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

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

B、在React中可以依賴一個(gè)使用較多的庫(kù) events 來(lái)完成對(duì)應(yīng)的操作；

如何實(shí)現(xiàn)

借助第三方庫(kù) events來(lái)實(shí)現(xiàn)

常見(jiàn)的 api

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

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

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

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

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

npm install events 
yarn add events

events實(shí)踐：

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

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

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

EventTest文件內(nèi)容

A、EventTest組件中引入QcEventEmitter

B、在點(diǎn)擊事件中通過(guò)QcEventEmitter.emit來(lái)發(fā)送事件

import React, { Component } from 'react';
import QcEventEmitter from 'common/utils/QcEventEmitter'
class EventTest extends Component {
  render() {
    return (
      <div>
        <button onClick={e => this.btnCLick()}>測(cè)試event事件</button>
      </div>
    );
  }
  btnCLick(){
    QcEventEmitter.emit('contextClick', 'Lucy', '99')
  }
}

export default EventTest;

Person文件內(nèi)容

A、Person組件中引入QcEventEmitter，

B、在componentDidMount中通過(guò)QcEventEmitter.addListener來(lái)監(jiān)聽(tīng)事件，

C、在 componentWillUnmount中通過(guò)QcEventEmitter.removeListener移除對(duì)事件的監(jiān)聽(tīng)

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

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中可不可以使用事件總線的簡(jiǎn)略介紹，當(dāng)然詳細(xì)使用上面的不同還得要大家自己使用過(guò)才領(lǐng)會(huì)。如果想了解更多，歡迎關(guān)注億速云行業(yè)資訊頻道哦！