react中组件之间的数据传送,交流,最简单,通用,好用的方法.

该方法最大的方便就是:   模块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 'use strict'; 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/