반응에 이벤트 버스를 사용할 수 있습니까?

이벤트 버스는 이벤트 버스를 사용하여 구성 요소 간 이벤트 전송을 해결합니다. 일반적으로 사용되는 라이브러리 이벤트를 사용하여 해당 작업을 완료할 수 있습니다. 구문은 다음과 같습니다. "npm 설치 이벤트" 및 "원사 추가 이벤트".

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React에서 이벤트 버스를 사용할 수 있습니다

React 이벤트 버스로 해결되는 문제: 컴포넌트 간의 이벤트 전송

React 개발에서 컴포넌트 간 이벤트 전송이 있다면 어떻게 해야 할까요?

A. Vue 인스턴스를 통해 이벤트 버스(EventBus)를 신속하게 구현하여 작업을 완료할 수 있습니다.

B. React에서는 일반적으로 사용되는 라이브러리 이벤트를 사용하여 해당 작업을 완료할 수 있습니다.

구현 방법

타사 라이브러리 이벤트를 사용하여 구현

Common 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 기본 EventTest를 통해 전송됩니다.

Person 파일 콘텐츠

A는 QcEventEmitter가 도입되었습니다.

B. 이벤트는 componentDidMount의 QcEventEmitter.addListener를 통해 모니터링됩니다.

C.commentorWillUnmount

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;

의 QcEventEmitter.removeListener를 통해 이벤트 모니터링을 제거합니다. 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 front-end]

위 내용은 반응에 이벤트 버스를 사용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!