Can event bus be used in react?

The event bus can be used in react; react uses the event bus to solve the event transfer between components. You can use a commonly used library events to complete the corresponding operations. It can be installed using npm or yarn. events, the syntax is "npm install events" and "yarn add events".

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

The event bus can be used in react

The problem solved by the react event bus: event transmission between components

If there is any problem in React development How to transfer events between components?

A. In Vue, we can quickly implement an event bus (EventBus) through an instance of Vue to complete the operation;

B. In React, we can rely on a commonly used library events to complete the corresponding operations;

How to implement

Use third-party library events to implement

common api

Create EventEmitter object: eventBus object

Emit an event: eventBus.emit("event name", parameter list)

Listen to events: eventBus.addListener("event name", Listening function)

Remove event: eventBus.removeListener("event name", listening function)

You need to install it before use. Choose one of the following two methods

npm install events 
yarn add events

events practice:

First create a new file QcEventEmitter.js. The content of the file is as follows:

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

The following will implement the EventTest component to pass events to the Person component:

EventTest file content

A. Introduce QcEventEmitter into the EventTest component

B. Send events through QcEventEmitter.emit in the click event

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 file Content

A. QcEventEmitter is introduced in the Person component.

B. Listen for events through QcEventEmitter.addListener in componentDidMount.

C. Move through QcEventEmitter.removeListener in componentWillUnmount. In addition to monitoring events

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;

Render the EventTest component and the Person component in the App.js file (after the Person component is rendered, you can listen to the events emitted by EventTest, and there is no need for any dependencies between them)

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;

【Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of Can event bus be used in react?. For more information, please follow other related articles on the PHP Chinese website!