如何构建React中的EventHub

React前端框架大多数情况下是一个单页面框架，对导出的对象具有全局唯一性。

按照如下代码构建一个全局的唯一性实例，通过该实例，达到跨组件的消息交互。

class _XEventHub{
    constructor() {
    };

    listenerMapping:any = {};//listeners for eventName,one to many
    querierMapping:any = {}; //querier for queryName,one to one

    registListener(eventName:string,listener:any){
        let list = this.listenerMapping[eventName];
        if(list == null){
            this.listenerMapping[eventName] = list = [];
        }
        list.push(listener);
    };

    unregistListener(eventName:string,listener:any){
        let list = this.listenerMapping[eventName];
        if(list){
            list = list.filter((item:any) => item !== listener);
            this.listenerMapping[eventName] = list;
        }
    };

    fireEvent(eventName:string,data:any){
        let list = this.listenerMapping[eventName];
        if(list){
            list.forEach((listener:any) => {
                listener(eventName,data);
            });
        }
    };

    registQuerier(queryName:string,querier:any){
        this.querierMapping[queryName] = querier;
    };

    unregistQuerier(queryName:string){
        delete this.querierMapping[queryName];
    };

    callQuerier(queryName:string,paras:any){
        if(!this.querierMapping[queryName]){
            return null;
        }
        return this.querierMapping[queryName](paras);
    }
};

export const XEventHub = new _XEventHub();

监听方或信息提供方在页面创建时调用regist方法，并在页面销毁时调用unregist方法。

事件发布或调用方，在需要的代码逻辑处进行fireEvent或callQuerier的调用，实现跨组件的信息传递。