事件总线

• 在 React 中,我们通常依赖 events 库来实现跨组件之间的事件传递
• 安装命令: yarn add events
• 常用 API

• 创建 EventEmitter 对象,eventBus 对象
• 发出事件:eventBus.emit("事件名称",参数); 这个参数是可变参数
• 监听事件:eventBus.addListener("事件名称",监听函数);监听函数中的参数也是可变的,是与发事件传的参数的顺序是一致的,如果发出事件时传的是一个参数,那么监听函数也只需接收一个参数;如果发出事件传的是多个参数,那么监听函数也需要写同样多的参数才能将传递过来的参数接收完,如果发出 n 个参数,而接收只写了 n-1,个参数,那么只能收到发出的前 n-1 个参数
• 移除事件:eventBus.removerListener("事件名称",监听函数);如果不写传监听函数,则默认移除所有相同事件名称的事件

import React, { PureComponent } from 'react';
import { EventEmitter } from 'events';

// 事件总线: event bus
const eventBus = new EventEmitter();

class Home extends PureComponent {
  // 一般在这里监听,因为监听只需要一次
  componentDidMount() {
    eventBus.addListener("sayHello", this.handleSayHelloListener);
  }
  // 有监听就要有移除监听
  componentWillUnmount() {
    eventBus.removeListener("sayHello", this.handleSayHelloListener);
  }

  handleSayHelloListener(num, message) {
    console.log(num, message);
  }

  render() {
    return (
      <div>
        Home
      </div>
    )
  }
}

class Profile extends PureComponent {
  render() {
    return (
      <div>
        Profile
        <button onClick={e => this.emmitEvent()}>点击了profile按钮</button>
      </div>
    )
  }

  emmitEvent() {
    eventBus.emit("sayHello", 123, "Hello Home");
  }
}

export default class App extends PureComponent {
  render() {
    return (
      <div>
        <Home/>
        <Profile/>
      </div>
    )
  }
}