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>        <h2>這是Person子組件</h2>       </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;

【