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>
       <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;

【相關推薦：、】

以上就是react中可以使用事件匯流排嗎的詳細內容，更多請關注TW511.COM其它相關文章！