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(&#39;contextClick&#39;, &#39;Lucy&#39;, &#39;99&#39;)
  }
}

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 id="这是Person子组件">这是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中可以使用事件匯流排嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！