Kann Event Bus in React verwendet werden?

Der Ereignisbus kann in React verwendet werden. React verwendet den Ereignisbus, um die Ereignisübertragung zwischen Komponenten zu lösen. Verwenden Sie npm oder Yarn, um Ereignisse zu installieren. „npm install events“ und „yarn add events“.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Sie können den Event-Bus in React verwenden

React Das durch den Event-Bus gelöste Problem: Ereignisübertragung zwischen Komponenten

Wie sollte in der React-Entwicklung eine Ereignisübertragung zwischen Komponenten erfolgen?

A. In Vue können wir schnell einen Ereignisbus (EventBus) implementieren, um den Vorgang abzuschließen.

B In React können wir uns auf häufig verwendete Bibliotheksereignisse verlassen

So implementieren Sie

Verwenden Sie Bibliotheksereignisse von Drittanbietern, um

Gemeinsame API zu implementieren

Erstellen Sie ein EventEmitter-Objekt: eventBus-Objekt

Geben Sie ein Ereignis aus: eventBus.emit („Ereignisname“, Parameterliste)

Auf Ereignisse warten: eventBus.addListener("Ereignisname", Abhörfunktion)

Ereignis entfernen: eventBus.removeListener("Ereignisname", Abhörfunktion)

Sie müssen es vor der Verwendung installieren. Wählen Sie eine der folgenden beiden Methoden

npm install events 
yarn add events

events Übung:

Erstellen Sie zunächst eine neue Datei QcEventEmitter.js. Der Inhalt der Datei lautet wie folgt:

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

Im Folgenden wird die EventTest-Komponente implementiert, um Ereignisse an die Person-Komponente zu übergeben:

EventTest-Dateiinhalt

A. Führen Sie QcEventEmitter in die EventTest-Komponente ein.

B. Klicken Sie auf „Im Ereignis wird das Ereignis über QcEventEmitter.emit gesendet.“

B. Das Ereignis wird durch QcEventEmitter.addListener in ComponentDidMount überwacht,

C. Entfernen Sie die Ereignisüberwachung durch QcEventEmitter.removeListener in ComponentWillUnmount

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

Rendern Sie die EventTest-Komponente und die Person-Komponente in der App.js-Datei (nach der Person). Wenn die Komponente gerendert wird, können Sie sich die von EventTest ausgegebenen Ereignisse anhören. Es ist keine Abhängigkeit zwischen ihnen erforderlich

Das obige ist der detaillierte Inhalt vonKann Event Bus in React verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!