【Lolttery】项目开发日志 （八）通过事件通知 实现react js组件间通信

react.js的天坑

---

挺长时间没有更新了。

最近Lolttery已经进入了内测阶段，改bug改得头昏脑涨。

还有很多诸如react.js的填坑工作，比如本次。

react.js对于父子组件之间的通信还是比较简单的。但是对于两个组件之间的通信就很操蛋了。

另一个问题就是对于其它js框架的联动也会遇到这类的问题。

在官方给出的方案是：

对于没有 父-子 关系的组件间的通信，你可以设置你自己的全局事件系统。 在 componentDidMount() 里订阅事件，在 componentWillUnmount() 里退订，然后在事件回调里调用 setState()。

我当时的表情是：

呵呵

做一个全局事件系统

---

既然人家说没辙，那就做呗。

事件系统的核心也就是订阅-通知，其实对于javascript来说，挺好实现的。

话不多说，直接看代码：

Commons.EventDriver = (function(){

        var regtable = {};

        this.register = function(event,callback){
            var reciverlist = regtable[event]||[];
            reciverlist.push(callback);
            regtable[event] = reciverlist;
        };

        this.unregister = function(event,callback){
            var reciverlist = regtable[event]||[];
            var mark = -1;
            for(var i=0;i<reciverlist;i++){
                if(reciverlist[i]==callback){
                    mark = i;
                    break;
                }
            }
            if(mark!=-1){
                reciverlist.splice(mark,1);
            }
        };

        this.send = function(event,props){
            var reciverlist = regtable[event];
            console.log("call this");
            if(reciverlist){
                for(var i=0;i<reciverlist.length;i++){
                    reciverlist[i](props);
                }
            }
        };
        return this;
    }());

代码很简单，三个方法：注册，注销，发送。

通过一个全局的事件管理对象，以事件名称作为key，在此注册一个回调函数，当发送事件时，依次触发所有已注册的回调函数。为了方便参数传递，还附带了一个Prop对象保存参数。

注册如下：

 Commons.EventDriver.register("updateUserInfo",this.reload);

通知如下：

Commons.EventDriver.send("updateUserInfo");

总结

---

其实呢，这一套东西不仅是实现react.js的组件间通信，更能达到事件驱动执行的效果。当然现在的功能还十分简陋，但是核心的思想是木有问题的。

最后呢，其实用来做组组件间通信的时候还真不多，更多的被我拿来在页面上通过js调用组件内方法了。