事件总线

我们来看一个案例，比如我们想：

这就涉及到跨组件传递了，我们也可以一层一层传。当然了，使用event bus事件总线会更方便。事件总线在Vue、flutter里面都有。

安装events库

React用的最多的是一个events库，我们先安装

yarn add events

使用events库

import { EventEmitter } from 'events';
// 事件总线: event bus
const eventBus = new EventEmitter();

有了events库我们就可以发射事件了。 我们查看emit需要传的参数

第一个参数为事件名，后面可以跟一堆内容。

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

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

我们来看完整的代码：

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

//
const eventBus = new EventEmitter()
class Home extends PureComponent {
  render() {
    return (
      <div>
        Home

      </div>
    )
  }
  componentDidMount(){
    //添加事件(第一个事件名,第二是函数),这里我们把函数定义到外面
    eventBus.addListener("sayHello",this.handleSayHelloListener)
  }
  componentWillUnmount(){
    //清除事件
    eventBus.removeListener('sayHello',this.handleSayHelloListener)
  }

  //事件的函数
  handleSayHelloListener(num,message){ //多个参数都要用变量来接受
    console.log(num,message);
  }
}

class Profile extends PureComponent {
  render() {
    return (
      <div>
        Profile
        <button onClick={e => this.emmitEvent()}>点击了profile按钮</button>
      </div>
    )
  }
  //发射事件
  emmitEvent(){
    eventBus.emit("sayHello",999,"Hello Home i am profile")
  }
}

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