背景故事很簡單：
父組件對子組件傳遞信息，直接使用props即可；
子組建對父組件傳遞信息，參考自React 組件之間如何交流，讓子組件觸發(fā)
this.props.callbackParent(newState);
父組件進行對應(yīng)的設(shè)置：
onChildChanged: function (newState) {
this.setState({ checked: newState });
},
并在render加入：
<ToggleButton text="Toggle me"
initialChecked={this.state.checked}
callbackParent={this.onChildChanged}
/>
這里ToggleButton就是對應(yīng)的子組件，看起來流程有些復(fù)雜。
那么獨立組件之間呢？據(jù)說flux可以解決這樣的問題，于是發(fā)現(xiàn)flux傻瓜教程，提到：
<blockquote>
如果你的應(yīng)用需要處理動態(tài)的數(shù)據(jù)，那很可能需要使用 Flux。
如果只是一些靜態(tài)的視圖，它們之間不共享狀態(tài)，你也沒什么數(shù)據(jù)保存或者更新，就不需要使用 Flux，用了也沒什么好處。
</blockquote>
當(dāng)然flux的單向數(shù)據(jù)流處理機制可以解決獨立組件的通信，但我的通訊需求沒那么多，并且把當(dāng)前代碼全部改寫為適用于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(), //全局?jǐn)?shù)據(jù)廣播對象
datas : {} //總數(shù)據(jù)對象
};
module.exports = Global;
- 發(fā)送方在自己的某個事件中，先設(shè)置好要傳遞的數(shù)據(jù)，然后調(diào)用dispatch：
this.preValue = e.target.value ;
Global.datas.curValue=this.preValue; //將curValue放入總數(shù)居對象
Global.broadData.dispatch( Global.datas); //發(fā)布數(shù)據(jù)
- 接收方注冊一個響應(yīng)事件即可:
getPer(){
var that=this;
console.log(Global.datas);
Global.broadData.add(function(data){ //收聽到數(shù)據(jù)
console.log('data'+data);
that.setState({
endValue:data.curValue,
});
});
}
這里需要特別注意的是，該事件注冊一次就好了。我寫在了constructor里，其他合適的時機下也沒有問題：
constructor(props) {
super(props);
this.state = {
endValue: 0 ,
};
this.getPer();
}
你通過代碼已經(jīng)注意到，如果有多個接收方，都是先照單全收，然后根據(jù)發(fā)來的數(shù)據(jù)其中的屬性“歸不歸自己管”來進行處理。這當(dāng)然不是最好的辦法，但輕度使用還是足夠。更多獨自組件的通訊方法請參見React 組件之間如何交流。
