一.React
对于一个标准的React Web应用,它的UI将会由无数个组件(component)嵌套组合而成,React是一种自上而下的渲染方式,数据传递到父组件,然后父组件传递给它的各个子组件,就这样一级一级自上而下地传递下去,从而完成UI的渲染。也就因此有了上一篇父组件,子组件之间的通信。
然而React仅仅是一个View
如果我们在渲染过程中数据发生变化,显然光是view是无法做到的。
最早是Flux来解决这一问题,后面衍生到ReFlux的出现,这里主要是说ReFlux。
二.ReFlux
同样是单项数据流
同样有actions和stores
stores监听action
当执行操作的时候触发某个actions的方法,然后携带着数据参数传递到stroes中,stores执行ajax请求更新数据,更新成功后,还是通过事件机制传递到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的应用,在store里面我们采用listenables来监听actions。得到最新数据后调用trigger方法将数据传递到绑定的list中。
下面代码中我们采用mixins中Reflux.connect来直接获得最新数据,只需调用trigger数据就会自动更新到我们state指定的属性list上。当然还有Reflux.listenTo或者Reflux.connectFilter来接收新数据,这里不再一一赘述。
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'));