Flux

最近React(web/native)依舊如火如荼,相信大家都躍躍欲試,入職新公司，現在的團隊也開始在React領域有所嘗試. 2016年應該是
React 逐漸走向成熟的一年。之前在原來公司搞不懂的問題，同樣是自學，發覺在新公司都搞懂了。哈哈，我也不知道為什么。

flux是干嘛的？

其實我剛開始學習的時候，一直不知道flux有什么鳥用。

官方說法是：Flux是Facebook內部用來構建React應用的一套架構。它本身并不是一個框架或庫。它僅僅是一個用于完善React應用開發的一種新的應用程序架構， Flux架構最大的特點是其倡導的是單向數據流方案。

　　個人理解就是：比如我刪除了一條數據，或者新增了一條數據，我怎么來讓view知道我刪除或者新增了該數據來做相應顯示的改變呢，就是通過這種單向的數據流來告知，從而讓數據的流動變得更加清晰。

比如 action就專門來處理你是點擊刪除，還是新增件，dispatcher就專門來派發這些動作，store就專門用來對數據的刪除，增加做操作。view就專門來更新視圖和發出動作。我是這么理解的。

首先來看看這張圖：

flux包括了四個東西：

view: 視圖

action:動作

dispatcher：派發器

store:數據層

打個比方，用戶要刪除一條數據，流程是這樣的：

用戶點擊刪除按鈕-->傳遞給action,告訴action,我要刪除啦-->派發器接收到了這個動作--->告訴store這個數據層。把用戶點擊的數據刪除了-->store通過一個change時間告訴view,數據刪掉了，然后顯示的時候刪掉的數據就沒有了

demo1

寫了一個demo,demo是在阮一峰大神的案例里做修改的。當然這篇文章也是基于阮一峰里的flux來寫的，期間加一些自己的理解和思考

阮一峰flux地址：http://www.ruanyifeng.com/blog/2016/01/flux.html#comment-text

我的demo地址如下：https://github.com/xianyulaodi/myFluxTest

界面是這樣的：

這個demo比較簡單，就是數據的增加和刪除，在輸入框中輸入內容，然后出來上面的東西，點擊刪除按鈕可以對數據就行刪除

下面對demo進行解讀：

view部分

index.jsx

1 2 3 4 5 6 7 8

varReact = require('react'); varReactDOM = require('react-dom'); varMyButtonController = require('./components/MyButtonController'); ReactDOM.render( <MyButtonController/>, document.querySelector('#example') );

比較簡單，就是將組建渲染到頁面上

component部分。

這里面包含兩個組件，一個是 MyButtonController.jsx, 一個MyButton.jsx

MyButtonController.jsx內容如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

varReact = require('react'); // 引入數據層 varListStore = require('../stores/ListStore'); // 引入動作層 varButtonActions = require('../actions/ButtonActions'); varMyButton = require('./MyButton'); varMyButtonController = React.createClass({ getInitialState:function() { return{ items: ListStore.getAll() }; }, componentDidMount:function() { ListStore.addChangeListener(this._onChange); }, componentWillUnmount:function() { ListStore.removeChangeListener(this._onChange); }, _onChange:function() { this.setState({ items: ListStore.getAll() }); }, // view把用戶的動作傳給action。新增一個數據 createNewItem:function(event) { vartext=this.refs.myInput.value; if(text!==''){ // 這個是action里面的函數 ，用戶通過這個點擊事件，告訴action,我點擊了增加了按鈕了 ButtonActions.addNewItem(text); this.refs.myInput.value=''; }else{ alert('請輸入內容'); } }, // 刪除元素，告訴action，我點擊了刪除按鈕 deleteItem:function(id){ ButtonActions.destroy(id); }, render:function() { // 將事件傳給這個組件的子組件，MyButton return( <div> <MyButton items={this.state.items} onClick={this.createNewItem} delFn={this.deleteItem} /> <input type="text"ref="myInput"placeholder="請輸入內容"style={{"height":"25px","width":"200px","border":"1px solid #ccc"}}></input> </div> ) } }); module.exports = MyButtonController;

　這里先介紹這個組件的兩個函數，createNewItem 和deleteItem .這里就相當于view發出的action.當觸發這個事件的時候，就調用action里面對應的事件，從而將用戶的動作達到一個傳給action的作用。

　　MyButton是它的子組件，我們將這些事件傳給它的子組件，由子組件來執行。

MyButton.jsx的內容如下：

var React = require('react');


var MyButton = function(props) {
  var items = props.items;
  var _this=this;
  var itemHtml = items.map(function (ele, i) {
    return <li key={i}>您增加的文本是：{ele.text}，它的id是 {ele.id}<a href="#" onClick={props.delFn.bind(_this,ele.id)} >點擊刪除</a></li>;
  });

  return <div>
            <ul>{itemHtml}</ul>
            <button onClick={props.onClick}>確認添加</button>
          </div>;
};

module.exports = MyButton;

它的作用主要是顯示我們的內容。比如新增了什么，點擊是否刪除等等。

Action部分

var AppDispatcher = require('../dispatcher/AppDispatcher');

var ButtonActions = {

    // 從用戶那里傳來的動作
  addNewItem: function (text) {
    AppDispatcher.dispatch({
      actionType: 'ADD_NEW_ITEM',
      text: text
    });
  },

  destroy: function(id) {
    AppDispatcher.dispatch({
      actionType: 'DELETE_ITEM',
      id: id
    });
  },

};

module.exports = ButtonActions;

因為我們只有兩個動作，新增和刪除，所以里面也只有兩個事件。因為新增的是文本內容，所以我們傳入text,因為刪除是需要根據id來就行刪除，所有我們傳入id.

Dispatcher部分

var Dispatcher = require('flux').Dispatcher;
var AppDispatcher = new Dispatcher();
var ListStore = require('../stores/ListStore');

// 用來接收action,并把它傳遞到store,一個頁面有且只有一個dispatcher,而且是全局的
AppDispatcher.register(function (action) {
  switch(action.actionType) {
    case 'ADD_NEW_ITEM':
      // 根據傳入動作的不同，來調用不同的數據
      ListStore.addNewItemHandler(action.text);
      ListStore.emitChange();
      break;
      case 'DELETE_ITEM':
      ListStore.deleteItem(action.id);
      ListStore.emitChange();
      break;
    default:
      // no op
  }
})

module.exports = AppDispatcher;

　　dispatcher的作用是派發器，根據不同的動作，來執行不同的store。也就是說，根據不同的動作，來生成不同的數據。比如上面的。如果你的動作是ADD_NEW_ITEM,那我就執行store里面的addNewItemHandler這個函數來生產數據。如果你是DELETE_ITEM這個動作，我就執行store里面的deleteItem這個動作來執行刪除數據。

　　dispatcher就是這樣來聯系action和store的。那我怎么告訴頁面我刪除或者新增數據了呢，store里面的emitChange幫我們完成了這個動作。每次數據的改變，就執行一下這個 emitChange.來告訴view,我新增數據啦，你給我趕緊跟著跟新，我刪除數據啦，給老子跟新你的頁面

　　值得注意點是：在flux中，一個頁面只有一個dispatcher.

store部分

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

// 這里就是相當于MVC中的model,只用來生成數據 varEventEmitter = require('events').EventEmitter; varassign = require('object-assign'); // Store 更新后（this.addNewItemHandler()）發出事件（this.emitChange()）， // 表明狀態已經改變。 View 監聽到這個事件，就可以查詢新的狀態，更新頁面了。 varListStore = assign({}, EventEmitter.prototype, { items: [], getAll:function() { returnthis.items; }, addNewItemHandler:function(text) { // 新增一個元素 varid = (+newDate() + Math.floor(Math.random() * 999999)).toString(36); varobj= { id: id, text: text }; this.items.push(obj); }, deleteItem:function(id){ // 刪除指定元素 varmyItems=this.items; for(vari =0;i<myItems.length;i++) { vardelId=myItems[i].id; if(id==delId){ this.items.splice(i,1); } } }, emitChange:function() { this.emit('change'); }, addChangeListener:function(callback) { this.on('change', callback); }, removeChangeListener:function(callback) { this.removeListener('change', callback); } }); module.exports = ListStore;

　　在flux中，store的作用是數據工廠，也就是說所有的數據操作都在這里執行，不管你是新增也好，刪除也好。還有就是view里面的數據都是從這里來的。

我們可以看到，我們首先定義了一個item這個數組用來存放數據。我們再來回看一下我們的MyButtonController.jsx

初始化狀態也是直接拿我們store里面的數據。

所以，flux就是一個數據流的操作方式，讓我們的數據流動很清晰。向一條河流一樣，流完這個地方才能到達另外一個地方。

flux缺點：

　　如果你搞懂了flux，雖然你會被他清晰的數據流所震撼和吸引，不過有沒有發覺它很復雜，很啰嗦。比如我就想增加一個元素，兜了那么大的一個圈。

這也是它不好的地方之一。而且如果一個項目中，有些人才會用，有些人不會用。那也不好溝通。

所以在理解了flux之后，我準備去學redux了。

總結

以上是生活随笔為你收集整理的Flux的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。