Flux入门

这篇文章来自国外一位作者的Flux For Stupid People，文章没有深究flux的具体实现，但对于想入门flux的你会有所收获。

我应该使用Flux么

• 如果你的应用有很多动态数据需要处理，你可能需要flux。

• 如果你的应用多包含静态视图，并且很少涉及到数据的存储和更新，那么flux也许不会给你带来任何好处。

什么是Flux

Flux通过事件和监听来实现了单向数据流，具体请看后文。
我们在示例代码中使用了这两个库：Flux Dispatcher和microevent.js。

官方的文档过于意识流，不适合新手学习。我们在学习时也不要将Flux与一些MVC框架相比，否则你会更加迷惑。

下面是一些Flux中提到的基本概念：

1. Your Views "Dispatch" "Actions"(视图触发事件)

dispatcher 是一个基本的事件系统，他有自己的一些规则。他会广播事件，并注册回调函数。这里我们有仅一个全局的dispatcher。你应该使用FB的Dispatcher Library。初始化很容易：

var AppDispatcher = new Dispatcher();

假设你有一个按钮，点击之后会向列表增加一条数据。

<button onClick={ this.createNewItem }>New Item</button>

点击之后，你的视图会分发一个action，其中有action的名称和增加的数据内容:

createNewItem: function( evt ){
  AppDispatcher.dispatch({      actionName: 'new-item', 
      newItem: { name: 'Marco' } // 所需要增加的一条数据 
  });
}

"action"是一个核心概念。他是一个js对象，描述了我们需要做的事和我们需要的数据。如上所述，我们要做的是添加一条数据，我们需要的数据是一个名叫"Marco"的name。

Your "Store" Responds to Dispatched Actions(store触发回调)

store也是一个核心概念。我们在应用中创建一个集合，存放方法和数据，它通常是一个列表。

store是单例的，在你的整个应用中只有一个store存在：

// Single object representing list data and logicvar ListStore = {  
// Actual collection of model data 
  items: []
};

store会对被分发的action做出处理：

var ListStore = ...//在dispatcher中注册我们需要监听的一些事件AppDispatcher.register( function( payload ) {    switch( payload.actionName )｛        //对action作出处理
        case 'new-item':            //存储一个数据
            ListStore.items.push( payload.newItem);            break;
   }
});

以上是一个典型的例子，介绍了Flux处理回调函数的方式。传入的参数payload包含了action的名称和需要处理的数据。
switch语句中会对相应的action做出数据的处理。

关键概念：

• store不是MVC中的model，但是它包含了models。

• 应用中数据处理只能在store中进行，这是Flux核心理念。被分发的action无法增加或者删除一条数据。

假设，你的应用中需要保存一些图片及其基本信息，那么你应该再创建一个Items，命名为ImageItems。一个数组即可代表一种数据类型了。

只有stores能够注册被分发action的回调函数。千万不要在视图中调用AppDispatcher.register。dispatcher只会单向地从视图传递数据给store。视图会针对不同的事件重新渲染。

Your Store Emits a "Change" Event(store触发change事件)

现在，store中的数据已经改变了，我们传递出数据改变的信息了。

我们将让store出发一个事件，如果在你使用了MicroEvent.js：

MicroEvent.mixin( ListStore );

然后触发change事件：

case 'new-item':
     ListStore.items.push( payload.newItem ); 
  
   // Tell the world we changed! 
     ListStore.trigger('change');     break;

关键概念：

• 事件触发的时候不传递数据，视图只关心是否有数据发生变化。

Your View Responds to the "Change" Event（视图接收到事件重新渲染）

视图会在数据发生变化后重新渲染，没错是重新渲染。

我们在react组件的初始化完成后为store注册监听：

componentDidMount: function( ) {
    ListStore.bind( 'change', this.listChanged );
},

为了简单起见，我们调用forceUpdate，使视图重新渲染。

listChanged : function() {    this.forceUpdate( );
},

别忘记在组件回收时，解绑监听的事件:

componentWillUnmount: function( ){
      ListStore.unbind( 'change', this.listChanged );
},

然后来看下组件的render函数:

render: function() {  
    // Remember, ListStore is global!  
    // There's no need to pass it around 
    var items = ListStore.getAll();  
    // Build list items markup by looping  
    // over the entire list 
    var itemHtml = items.map( function( listItem ) {  
      // "key" is important, should be a unique  
      // identifier for each list item 
        return <li key={ listItem.id }>
              { listItem.name }                    </li>; 
      });     return <div> 
                  <ul> { itemHtml } </ul> 
                  <button onClick={ this.createNewItem }>New Item</button> 
     </div>;
}

我们已经完成了整个数据，视图更新过程.当你添加一条数据的时候，视图会分发一个action，store会对action做出数据处理，并且触发一个change事件，之后视图接受到change事件并重新渲染。

但是有一个问题，每当数据更新的时候，视图将全部重新渲染，这样是否会造成效率低下？
其实并不会发生你所担心的事情，React内部构建了虚拟DOM，react会比较视图是否发生变化，实现部分的渲染，是以JS计算开销换取了dom渲染开销的方法来提升效率。

One More Thing: What The Hell Is An "Action Creator"?（Action Creator是什么鬼？）

我们在点击按钮的时候触发了一个action

AppDispatcher.dispatch({     eventName: 'new-item', 
     newItem: { name: 'Samantha' }
 });

当我们拥有很多按钮，需要出发不同的action时，我们需要这么写看起来会比较优雅：

ListActions = { 
add: function( item ) { 
  AppDispatcher.dispatch({ 
      eventName: 'new-item', 
      newItem: item 
  }); 
}

del: ...

};

现在增加一条数据的时候就只需要这么写：ListActions.add({ name: '...' })

PS:不要使用 forceUpdate

文中只为了简单起见，使用了forceUpdate，正确的做法应该从store中读取数据，并且改变state，触发视图更新。

这里有一个demo，主要实现了一个简单的Todo。

作者：Jevirs
链接：https://www.jianshu.com/p/d85d5ee6e55d