一.React
對于一個標準的React Web應(yīng)用，它的UI將會由無數(shù)個組件（component）嵌套組合而成匣掸，React是一種自上而下的渲染方式霸琴，數(shù)據(jù)傳遞到父組件，然后父組件傳遞給它的各個子組件朽基，就這樣一級一級自上而下地傳遞下去布隔，從而完成UI的渲染。也就因此有了上一篇父組件稼虎，子組件之間的通信衅檀。
然而React僅僅是一個View
如果我們在渲染過程中數(shù)據(jù)發(fā)生變化，顯然光是view是無法做到的渡蜻。
最早是Flux來解決這一問題术吝，后面衍生到ReFlux的出現(xiàn)，這里主要是說ReFlux茸苇。
二.ReFlux
同樣是單項數(shù)據(jù)流
同樣有actions和stores
stores監(jiān)聽action
當執(zhí)行操作的時候觸發(fā)某個actions的方法排苍，然后攜帶著數(shù)據(jù)參數(shù)傳遞到stroes中，stores執(zhí)行ajax請求更新數(shù)據(jù)学密，更新成功后淘衙，還是通過事件機制傳遞到list當中，并更新UI腻暮。
var ReportAction = Reflux.createActions([
'getAll'
]);
var TodoStore=Reflux.createStore({
listenables:[ReportAction],
items:[],
onGetAll:function(data){
$.getJSON("http://xxxxxxxxxx/xxxxxx/xxx/xxxxx/xxxxx?callback=?", data, function (response) {
console.log(response);
this.items.unshift(response.data.list);
this.trigger(this.items[0]);
}.bind(this));
}
});
上面是一個比較常見的Reflux的應(yīng)用彤守，在store里面我們采用listenables來監(jiān)聽actions。得到最新數(shù)據(jù)后調(diào)用trigger方法將數(shù)據(jù)傳遞到綁定的list中哭靖。
下面代碼中我們采用mixins中Reflux.connect來直接獲得最新數(shù)據(jù)具垫，只需調(diào)用trigger數(shù)據(jù)就會自動更新到我們state指定的屬性list上。當然還有Reflux.listenTo或者Reflux.connectFilter來接收新數(shù)據(jù)试幽，這里不再一一贅述筝蚕。
var TodoComponent=React.createClass({
mixins: [Reflux.connect(TodoStore,'list')],
getInitialState:function(){
return {list:[],num:''}
},
onChangeText:function(ev){
//this.setState({text:ev.target.value});
//最新的refs獲取標簽不需要getDOMNode()了
this.setState({num:this.refs.reftext.value})
},
onGetAll:function(){
var data={num:this.state.num};
ReportAction.getAll(data);
this.setState({num:''})
},
render:function(){
return (
<div>
<input type="text" value={this.state.num} onChange={this.onChangeText} ref="reftext" />
<button onClick={this.onGetAll}>查詢</button>
</div>
);
}
});
ReactDOM.render(<TodoComponent />,document.getElementById('app'));
