该方法最大的方便就是: 模块a 发生一个事件 ,之后可以主动 触发模块b中事件改变模块b的state和props等,简直不要太方便.
如果你在纠结react模块之间怎么实现传值的话,不用再找其他了,就是这个方法了亲测好用,很通用.
很详细用法见http://taobaofed.org/blog/2016/11/17/react-components-communication/ 中 兄弟组件间通讯 部分
以下是经本人理解后的核心部分,方便上手。(简单demo如下)
模块 a 中写 var data = "hello,money"; eventProxy.trigger("test", data);
模块 b 中写 eventProxy.on("test", (data)=>{ console.log(data) });
只要模块a中的语句每次被触发执行时后都会触发模块b中语句打印出传递过来的data值.
- on、one:on 与 one 函数用于订阅者监听相应的事件,并将事件响应时的函数作为参数,on 与 one 的唯一区别就是,使用 one 进行订阅的函数,只会触发一次,而 使用 on 进行订阅的函数,每次事件发生相应时都会被触发。
- trigger:trigger 用于发布者发布事件,将除第一参数(事件名)的其他参数,作为新的参数,触发使用 one 与 on 进行订阅的函数。
- off:用于解除所有订阅了某个事件的所有函数。
---------下面的代码可以单独放在一个文件中,用script引入,或important入即可使用eventProxy--------------
// eventProxy.js ;const eventProxy = { onObj: {}, oneObj: {}, on: function(key, fn) { if(this.onObj[key] === undefined) { this.onObj[key] = []; } this.onObj[key].push(fn); }, one: function(key, fn) { if(this.oneObj[key] === undefined) { this.oneObj[key] = []; } this.oneObj[key].push(fn); }, off: function(key) { this.onObj[key] = []; this.oneObj[key] = []; }, trigger: function() { let key, args; if(arguments.length == 0) { return false; } key = arguments[0]; args = [].concat(Array.prototype.slice.call(arguments, 1)); if(this.onObj[key] !== undefined && this.onObj[key].length > 0) { for(let i in this.onObj[key]) { this.onObj[key][i].apply(null, args); } } if(this.oneObj[key] !== undefined && this.oneObj[key].length > 0) { for(let i in this.oneObj[key]) { this.oneObj[key][i].apply(null, args); this.oneObj[key][i] = undefined; } this.oneObj[key] = []; } } }; |
参见:http://taobaofed.org/blog/2016/11/17/react-components-communication/