原文地址：https://gmiam.com/post/react-...由于React只涉及到UI层的处理，构建大型应用应该搭配框架模式，让后期的维护成本相对较小~Flux是FB的官网鉴于应用架构，他提倡一种单向的数据流模式。看下图感觉整个过程就是用户与View层交互，触发ActionAction使用Dispatcher分发Dispatcher触发Store回调更新Store更新触发View层事件View中最大的一个Flux的特点是单向数据流使事情比传统的MV*模式更具可预测性。请参阅下面的大型应用图，体验不同的MV*Flux概念。理解，可以配合flux-todomvc官方的例子，直观的理解app.js渲染了TodoApp.react.js组件。组件内部从TodoStore获取数据，传递给子组件。同时监控TodoStore的数据变化。FB管理这个顶层View叫Controller-ViewTodoApp.react.jsvarTodoStore=require('../stores/TodoStore');functiongetTodoState(){return{allTodos:TodoStore.getAll(),areAllComplete:TodoStore.areAllComplete()};}varTodoApp=React.createClass({getInitialState:function(){//获取初始数据returngetTodoState();},componentDidMount:function(){//监听数据变化TodoStore.addChangeListener(this._onChange);},render:function(){return(

);},_onChange:function(){this.setState(getTodoState());}});TodoApp.react.js嵌套了几个子组件，这里我们关注Header.react.js子组件来感受一下整个过程。Header.react.js的子组件TodoTextInput.react.js监听dom输入框的各种事件，触发父组件Header.react.js传递给他的Action方法TodoTextInput=require('./TodoTextInput.react');varHeader=React.createClass({render:function(){return(

todos

);},_onSave:function(text){if(text.trim()){TodoActions.create(text);}}});TodoTextInput.react.jsvarTodoTextInput=React.createClass({getInitialState:function(){返回{值：this.props.value||''};},render:function()/*object*/{return();},_save:function(){this.props.onSave(this.state.value);this.setState({value:''});},_onChange:function(/*object*/event){this.setState({value:event.target.value});},_onKeyDown:function(event){if(event.keyCode===ENTER_KEY_CODE){this._save();}}});Action执行Dispatcher进行行为分发，其中Dispatcher是FB实现的一个事件分发系统TodoActions.jsvarTodoActions={create:function(text){AppDispatcher.dispatch({actionType:TodoConstants.TODO_CREATE,text:text});},...}Dispatcher的分发会触发Store注册的回调执行相应的行为更新数据，同理StoreChange事件触发时，会触发TodoApp.react.js中监听的StoreChange事件，重置组件的状态数据，导致View重新渲染TodoStore.jsAppDispatcher.register(function(action){vartext;switch(action.actionType){caseTodoConstants.TODO_CREATE:text=action.text.trim();if(text!==''){create(text);TodoStore.emitChange();}break;默认://无操作}});这样就形成了一个Flux架构的单向闭环更新流程，但是写起来还是有点繁琐和复杂。下一节，我们将看看更简洁优雅的Redux方式~