React全局事件传递之events简单案例

在react中如果有不同的组件需要有事件传递的话，就可以用到这个events

第一步就是安装这个events了

yarn add events

下面这个案例主要是在Profile组件里面，点击button通过events发送一个事件，然后在Home组件里面进行接收

import React, { PureComponent } from 'react'


import {EventEmitter} from 'events'
const eventBus = new EventEmitter()


class Home extends PureComponent{
  componentDidMount(){
    //进行事件监听
    eventBus.addListener("sayHello",this.handleSayHelloListener)
  }
  componentWillMount(){
    //取消事件监听
    eventBus.removeListener("sayHello",this.handleSayHelloListener)
  }
  handleSayHelloListener(message,num){
    console.log(message,num)
  }
  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","Hello Home",123)
  }
}

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

如图，效果如上