react组件之间的通讯

720 查看

背景故事很简单：
父组件对子组件传递信息，直接使用props即可；
子组建对父组件传递信息，参考自React 组件之间如何交流，让子组件触发

this.props.callbackParent(newState);

父组件进行对应的设置：

 onChildChanged: function (newState) { 
    this.setState({ checked: newState }); 
},

并在render加入：

<ToggleButton text="Toggle me" 
initialChecked={this.state.checked} 
callbackParent={this.onChildChanged}
 />

这里ToggleButton就是对应的子组件，看起来流程有些复杂。

那么独立组件之间呢？据说flux可以解决这样的问题，于是发现flux傻瓜教程，提到：

如果你的应用需要处理动态的数据，那很可能需要使用 Flux。
如果只是一些静态的视图，它们之间不共享状态，你也没什么数据保存或者更新，就不需要使用 Flux，用了也没什么好处。

当然flux的单向数据流处理机制可以解决独立组件的通信，但我的通讯需求没那么多，并且把当前代码全部改写为适用于flux的代码也挺烦人的。有没有轻量的办法？有一个工具，叫做js-signals。
样例十分明朗:

//custom object that dispatch a `started` signal
var myObject = {
  started : new signals.Signal()
};
function onStarted(param1, param2){
  alert(param1 + param2);
}
myObject.started.add(onStarted); //add listener
myObject.started.dispatch('foo', 'bar'); //dispatch signal passing custom parameters
myObject.started.remove(onStarted); //remove a single listener

对于两个独立组件，使用它的思路是：

建立一个全局组件，其中引入signals所需，并让两个组件都分别引入这个全局组件：

import Signals  from  'signals';
var Global = {
      broadData: new Signals.Signal(), //全局数据广播对象
      datas : {}  //总数据对象
};
module.exports = Global;

发送方在自己的某个事件中，先设置好要传递的数据，然后调用dispatch：

this.preValue = e.target.value ;
Global.datas.curValue=this.preValue; //将curValue放入总数居对象
Global.broadData.dispatch( Global.datas); //发布数据

接收方注册一个响应事件即可:
```
getPer(){
             var that=this;
             console.log(Global.datas);
             Global.broadData.add(function(data){ //收听到数据
             console.log('data'+data);
                that.setState({
                   endValue:data.curValue,
                });
             });

         }
```
这里需要特别注意的是，该事件注册一次就好了。我写在了constructor里，其他合适的时机下也没有问题：
```
constructor(props) {
 super(props);
 this.state = {
   endValue: 0 ,
 };

this.getPer();
}
```
你通过代码已经注意到，如果有多个接收方，都是先照单全收，然后根据发来的数据其中的属性“归不归自己管”来进行处理。这当然不是最好的办法，但轻度使用还是足够。更多独自组件的通讯方法请参见React 组件之间如何交流。