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
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
通过事件通知 实现react.js组件间通信
最新推荐文章于 2024-07-27 00:10:42 发布