原文地点：https://gmiam.com/post/react-…

因为 React 只触及 UI 层的处置惩罚，所以构建大型运用应当搭配一个框架形式才能使后期保护本钱相对较小~

Flux 恰是 FB 官方给出的运用架构，他推重一种单向的数据活动形式，看下图感觉下

全部流程是

• 用户与 View 层交互，触发 Action

• Action 运用 Dispatcher 举行分发

• Dispatcher 触发 Store 回调举行更新

• Store 更新触发 View 层事宜

• View层 收到信号举行更新

相对传统 MV* 形式，Flux 一个最大的特征就是单向的数据流让事变变的可预感，看下面大型运用图感觉下差别

MV*

Flux

实在观点说了一堆照样比较难明白，人人能够合营 flux-todomvc 官方示例来直观感觉明白下

app.js 衬着的是 TodoApp.react.js 这个组件，组件内部从 TodoStore 猎取数据通报给子组件，同时监听了 TodoStore 的数据变化，FB 管这类顶层 View 叫做 Controller-View

TodoApp.react.js

var TodoStore = require('../stores/TodoStore');

function getTodoState() {
  return {
    allTodos: TodoStore.getAll(),
    areAllComplete: TodoStore.areAllComplete()
  };
}

var TodoApp = React.createClass({

  getInitialState: function() {
   // 猎取初始数据
    return getTodoState();
  },

  componentDidMount: function() {
    // 监听数据变化
    TodoStore.addChangeListener(this._onChange);
  },

  render: function() {
    return (
      <div>
        <Header />
        <MainSection
          allTodos={this.state.allTodos}
          areAllComplete={this.state.areAllComplete}
        />
        <Footer allTodos={this.state.allTodos} />
      </div>
    );
  },

  _onChange: function() {
    this.setState(getTodoState());
  }

});

TodoApp.react.js 又嵌套了几个子组件，这里我们关注下 Header.react.js 这个子组件感觉一下全部流程就好了

Header.react.js 的子组件 TodoTextInput.react.js 监听 dom 输入框的种种事宜，触发父组件通报给他的 Action 要领

Header.react.js

var TodoTextInput = require('./TodoTextInput.react');

var Header = React.createClass({
  render: function() {
    return (
      <header id="header">
        <h1>todos</h1>
        <TodoTextInput
          id="new-todo"
          placeholder="What needs to be done?"
          onSave={this._onSave}
        />
      </header>
    );
  },
  _onSave: function(text) {
    if (text.trim()){
      TodoActions.create(text);
    }
  }

});

TodoTextInput.react.js

var TodoTextInput = React.createClass({

  getInitialState: function() {
    return {
      value: this.props.value || ''
    };
  },

  render: function() /*object*/ {
    return (
      <input
        className={this.props.className}
        id={this.props.id}
        placeholder={this.props.placeholder}
        onBlur={this._save}
        onChange={this._onChange}
        onKeyDown={this._onKeyDown}
        value={this.state.value}
        autoFocus={true}
      />
    );
  },

  _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.js

var TodoActions = {
  create: function(text) {
    AppDispatcher.dispatch({
      actionType: TodoConstants.TODO_CREATE,
      text: text
    });
  },
  ...
}

Dispatcher 的分发会触发 Store 中注册的回调，实行对应的行动更新数据，同时触发 Store Change 事宜，那末 TodoApp.react.js 中监听的 Store Change 事宜就会触发，从新设置组件的 state 数据，以致 View 从新 render

TodoStore.js

AppDispatcher.register(function(action) {
  var text;

  switch(action.actionType) {
    case TodoConstants.TODO_CREATE:
      text = action.text.trim();
      if (text !== '') {
        create(text);
        TodoStore.emitChange();
      }
      break;
    default:
      // no op
  }
});

如许就形成了 Flux 架构的单向闭环更新流，然则写起来照样有些烦琐和复杂性，下一节我们来看更简约和文雅的体式格局 Redux ~