React事件总线

在React开发中如果有跨组件之间的事件传递，应该如何操作？
A、在Vue中我们可以通过Vue的实例，快速实现一个事件总线（EventBus），来完成操作；
B、在React中可以依赖一个使用较多的库 events 来完成对应的操作；

1、首先安装依赖库events：

$ yarn add events;

events常用的API：
创建EventEmitter对象：eventBus对象；
发出事件：eventBus.emit("事件名称", 参数列表);
监听事件：eventBus.addListener("事件名称", 监听函数)；
移除事件：eventBus.removeListener("事件名称", 监听函数)；

2、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('contextClick', 'Lucy', '99')
  }
}

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>这是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;