通过事件通知 实现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调用组件内方法了。
 
 


作者：Ay叔
链接：http://www.jianshu.com/p/600e82dd15d9
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。