React 组件间的消息传递当我们封装了可复用的组件之后，用来驱动组件渲染内容的数据就变得愈发灵活，组件之间数据通信的问

Nov 28, 2015

当我们封装了可复用的组件之后，用来驱动组件渲染内容的数据就变得愈发灵活，组件之间数据通信的问题就摆在了桌面上。React 组件间的消息传递主要集中于三种关系中：

从父组件向子组件的消息传递
从子组件向父组件的消息传递
无关联组件之间的消息传递

前两种关系都可以使用 React 内建的 this.props 对象来处理：

无关联组件之间的消息传递

这里的“无关联”，是指两个组件既不是父子关系，也不是兄弟关系。对于这种关系，可以用一个简单的发布订阅模型来实现，这种模型又被称为观察者模式。

这里选用的是基于全局对象的发布订阅模型，需要自定义事件名称：


let events = {};


const trigger = (event, ...data) => {
    const fns = events[event];


    if (!fns || fns.length === 0) {
        return false;
    }

    for ( let i = 0; i 
        fns[i](...data);
    }
};


const on = (event, fn) => {

    if (!events[event]) {
        events[event] = [];
    }
    events[event].push(fn);
};


const off = (event, fn) => {
    const fns = events[event];


    if (!fns) {
        return false;
    }

    if (!fn && fns) {
        fns.length = 0;
    }

    else {
        for (let i = fns.length - 1; i >= 0; i--) {
            if (fn === fns[i]) {
                fns.splice(i, 1);
            }
        }
    }
};

const PubSub = {
    on: on,
    off: off,
    trigger: trigger
};

export default PubSub;