React 非父子组件传递(全局事件总线的使用)

0. 需要安装events包

安装命令: yarn add events

import React, { PureComponent } from 'react'
// 1. 导入
import { EventEmitter } from "events";
//2.创建事件总线
const eventBus = new EventEmitter();
class Home extends PureComponent {
  // 4.接收事件传递过来的参数
  componentDidMount() {
                                     // 监听的事件名   抽离简化代码
    eventBus.addListener("sayHello", this.handleSayHelloListener)
  }
  // 5. 销毁事件
  componentWillUnmount() {
                                       // 监听的事件名   抽离简化代码
    eventBus.removeListener("sayHello", this.handleSayHelloListener)
  }

  handleSayHelloListener(...args) {
    console.log('我是在Home页面接收的参数:',...args);
  }
或者:
handleSayHelloListener(num,info) {
    console.log(num,info);
  }
  render() {
    return (
      <div>
        Home
      </div>
    )
  }
}

class Profile extends PureComponent {
  render() {
    return (
      <div>
        Profile
        {/* 3.点击按钮发射事件出去 */}
        <button onClick={e => this.emmitEvent()}>非父子组件通讯</button>
      </div>
    )
  }
  emmitEvent() {
                          事件名称        参数一        参数二
    eventBus.emit('sayHello', "Hello,Home", 123)
  }
}
export default class App extends PureComponent {
  render() {
    return (
      <div>
        <Home />
        <Profile />
      </div>
    )
  }
}

详细解释如下:

import React, { PureComponent } from 'react';

// 1.EventEmitter(事件发射)--> 这个是一个类
import { EventEmitter } from "events"
// 2.创建事件总线: event bus
// 像这样的文件你是可以单独的存在一个全局的文件中的
// 然后你再导入到你需要的文件中
const eventBus = new EventEmitter();

class Home extends PureComponent {
  // 5. 要想监听的话 你要在组件的生命周期里面去监听
  // componentDidMount(){} 要在挂载阶段去监听你的事件
  // componentWillUnmount() {} 要在卸载过程去下载你的事件
  componentDidMount() {
    /**
     *  eventBus.addListener()方法里面是有2个参数的
     *  
     *  第一个参数是:监听兄弟组件传递过来的事件名称
     *  第二个参数是: 一个回调函数
     * 
     * **/ 
    // eventBus.addListener('sayHello',(...args)=>{
    //   console.log(args);
    // })

    eventBus.addListener('sayHello',this.handleSayHelloListenner)
   }
  componentWillUnmount() { 
    // 6. 当组件即将消失的时候 你应当清楚监听事件
    // eventBus.removeListener()清除事件名称
    eventBus.removeListener("sayHello",this.handleSayHelloListenner)
  }

  // 单独定义这个事件
  handleSayHelloListenner(...args) {
    console.log(...args);

  }

  render() {
    return (
      <div>
        Home
      </div>
    )
  }
}
// 需求 当我在这个组件中点击按钮 
// 向上面的Home 组件传递一条数据过去
// 然后在Home组件中展示出来

// 解决方案:
// 需要下载一个第三方库 events --- > yarn add events
class Profile extends PureComponent {
  render() {
    return (
      <div>
        Profile
        {/* 3.发射一个事件出去 */}
        <button onClick={e => this.emitEvent()}>点击了Profile按钮</button>
      </div>
    )
  }
  emitEvent() {
    // 上面全局定义的一个eventBus对象 他new出来的有个事件叫emit
    // 4. emit() 方法里面 第一个参数是:事件名称,第二个是: 传递的参数
    eventBus.emit("sayHello", 'hello,world', 123322)

  }
}

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

export default App;

事件截图:

image.png

案例实现:

import React, { PureComponent } from 'react';
import { EventEmitter } from "events"
//1.
const EventBus = new EventEmitter()

class Header extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      infoData: {
        name: "胡振楚",
        money: "0W",
      },
      eventInfo: "没有参数传递过来"
    }
  }
  // 4.接收事件传递过来的参数
  componentDidMount() {
    // 这个地方必须要用 ...args 结构这个数组,不然你的第二个参数或者更多的参数 传递不过来
    EventBus.addListener('NameMoenyClick', (...args) => {
      console.log(args)
      const newInfo = args[0]
      const newEventInfo = args[1]
      this.setState({
        infoData: newInfo,
        eventInfo: newEventInfo
      })

    })
  }

  // 5. 销毁事件
  componentWillUnmount() {
    EventBus.removeListener("NameMoenyClick", () => { })
  }


  render() {
    return (
      <div>
        Header页面
        <div>{this.state.infoData.name}</div>
        <div>{this.state.infoData.money}</div>
        <div>{this.state.eventInfo}</div>

      </div >
    )
  }
}

class Footer extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      name: "张三",
      money: "100W"
    }
  }
  render() {
    return (
      <div>
        Header页面
        {/* 2. 绑定事件 */}
        <button onClick={e => this.eventBusClick()}>发射事件到Header页面</button>
      </div >
    )
  }
  // 3. 发射事件出去
  eventBusClick() {
    EventBus.emit('NameMoenyClick', { name: this.state.name, money: this.state.money }, "我是第二个参数,Footer传递过来的参数")
  }
}



class App extends PureComponent {
  render() {
    return (
      <div>
        <Header />
        <hr />
        <Footer />
      </div>
    );
  }
}
export default App;

实际截图:

image.png