React - fbemitter 广播

前言

fbemitter相当于是一个作用在全局的监听器

可用于想触发某个组件的函数可以通过开启监听来触发

正式开始~

1.准备工作

npm install fbemitter 

2.我一般实例化提出来单独作为引用文件

// 我这里把文件的名字定义为 singleton.js
import { EventEmitter } from 'fbemitter'; // 先解构出

const SINGLETON = {
  globalEventEmitter: new EventEmitter(), // new出来
};

export default SINGLETON;

 3.此页面为基业

// 注：这个页面一般为基础页 暂时命名为Page.jsx
/**
    在constructor阶段再new一个EventEmitter 如果只想全局调用可以忽略
    emitEvent: 发射出事件
    addEventListener: 添加事件监听
**/
/**
    emitGlobalEvent: 发射出全局事件 - 必要！
    addGlobalEventListener: 添加去全局事件监听 - 必要！
**/
import { EventEmitter } from 'fbemitter';
import singleton from './singleton';

class BasePage extends React.PureComponent {
    constructor(props) {
        super(props);
        this.eventEmitter = new EventEmitter();
    }
    
     emitEvent(eventName, ...args) {
        this.eventEmitter.emit(eventName, ...args);
     }

     emitGlobalEvent(eventName, ...args) {
       singleton.globalEventEmitter.emit(eventName, ...args);
     }

     addEventListener(eventName, listener) {
       return this.eventEmitter.addListener(eventName, listener);
     }

     addGlobalEventListener(eventName, listener) {
       return singleton.globalEventEmitter.addListener(eventName, listener);
     }
    
     render() {
         <>{this.props.children}<>
     }
}

3.使用

/**
这里就用继承Page文件的页面来使用广播
如果想使用全局也是同理 就直接调用即可：
emitGlobalEvent: 发射出全局事件
addGlobalEventListener: 添加去全局事件监听
**/
import Page from './Page';
class A1 extends Page {
    componentDidMount() {
        //这里直接调用创建出事件监听 值1：事件的名称 - 值2：事件回调函数
        this.Listener = this.addEventListener('on_listener', this.click);
    }

    componentWillUnmount() {
        // 离开的时候销毁
        this.Listener.remove();
    }
    
    click(value) {
        console.log(value);
    }
    ......
}
====================================================================================
class A2 extends Page {
    componentDidMount() {
        //这里直接触发事件 值1：要触发的事件名称 - 值2：触发的事件传入的值(也可以传入函数)
        this.emitEvent('on_listener', "事件触发了！");
    }
    ......
}