Flux

最近React(web/native)依舊如火如荼,相信大家都躍躍欲試,入職新公司，現(xiàn)在的團(tuán)隊(duì)也開(kāi)始在React領(lǐng)域有所嘗試. 2016年應(yīng)該是
React 逐漸走向成熟的一年。之前在原來(lái)公司搞不懂的問(wèn)題，同樣是自學(xué)，發(fā)覺(jué)在新公司都搞懂了。哈哈，我也不知道為什么。

flux是干嘛的？

其實(shí)我剛開(kāi)始學(xué)習(xí)的時(shí)候，一直不知道flux有什么鳥(niǎo)用。

官方說(shuō)法是：Flux是Facebook內(nèi)部用來(lái)構(gòu)建React應(yīng)用的一套架構(gòu)。它本身并不是一個(gè)框架或庫(kù)。它僅僅是一個(gè)用于完善React應(yīng)用開(kāi)發(fā)的一種新的應(yīng)用程序架構(gòu)， Flux架構(gòu)最大的特點(diǎn)是其倡導(dǎo)的是單向數(shù)據(jù)流方案。

　　個(gè)人理解就是：比如我刪除了一條數(shù)據(jù)，或者新增了一條數(shù)據(jù)，我怎么來(lái)讓view知道我刪除或者新增了該數(shù)據(jù)來(lái)做相應(yīng)顯示的改變呢，就是通過(guò)這種單向的數(shù)據(jù)流來(lái)告知，從而讓數(shù)據(jù)的流動(dòng)變得更加清晰。

比如 action就專(zhuān)門(mén)來(lái)處理你是點(diǎn)擊刪除，還是新增件，dispatcher就專(zhuān)門(mén)來(lái)派發(fā)這些動(dòng)作，store就專(zhuān)門(mén)用來(lái)對(duì)數(shù)據(jù)的刪除，增加做操作。view就專(zhuān)門(mén)來(lái)更新視圖和發(fā)出動(dòng)作。我是這么理解的。

首先來(lái)看看這張圖：

flux包括了四個(gè)東西：

view: 視圖

action:動(dòng)作

dispatcher：派發(fā)器

store:數(shù)據(jù)層

打個(gè)比方，用戶要?jiǎng)h除一條數(shù)據(jù)，流程是這樣的：

用戶點(diǎn)擊刪除按鈕-->傳遞給action,告訴action,我要?jiǎng)h除啦-->派發(fā)器接收到了這個(gè)動(dòng)作--->告訴store這個(gè)數(shù)據(jù)層。把用戶點(diǎn)擊的數(shù)據(jù)刪除了-->store通過(guò)一個(gè)change時(shí)間告訴view,數(shù)據(jù)刪掉了，然后顯示的時(shí)候刪掉的數(shù)據(jù)就沒(méi)有了

demo1

寫(xiě)了一個(gè)demo,demo是在阮一峰大神的案例里做修改的。當(dāng)然這篇文章也是基于阮一峰里的flux來(lái)寫(xiě)的，期間加一些自己的理解和思考

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

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

界面是這樣的：

這個(gè)demo比較簡(jiǎn)單，就是數(shù)據(jù)的增加和刪除，在輸入框中輸入內(nèi)容，然后出來(lái)上面的東西，點(diǎn)擊刪除按鈕可以對(duì)數(shù)據(jù)就行刪除

下面對(duì)demo進(jìn)行解讀：

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') );

比較簡(jiǎn)單，就是將組建渲染到頁(yè)面上

component部分。

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

MyButtonController.jsx內(nèi)容如下：

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'); // 引入數(shù)據(jù)層 varListStore = require('../stores/ListStore'); // 引入動(dòng)作層 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把用戶的動(dòng)作傳給action。新增一個(gè)數(shù)據(jù) createNewItem:function(event) { vartext=this.refs.myInput.value; if(text!==''){ // 這個(gè)是action里面的函數(shù) ，用戶通過(guò)這個(gè)點(diǎn)擊事件，告訴action,我點(diǎn)擊了增加了按鈕了 ButtonActions.addNewItem(text); this.refs.myInput.value=''; }else{ alert('請(qǐng)輸入內(nèi)容'); } }, // 刪除元素，告訴action，我點(diǎn)擊了刪除按鈕 deleteItem:function(id){ ButtonActions.destroy(id); }, render:function() { // 將事件傳給這個(gè)組件的子組件，MyButton return( <div> <MyButton items={this.state.items} onClick={this.createNewItem} delFn={this.deleteItem} /> <input type="text"ref="myInput"placeholder="請(qǐng)輸入內(nèi)容"style={{"height":"25px","width":"200px","border":"1px solid #ccc"}}></input> </div> ) } }); module.exports = MyButtonController;

　這里先介紹這個(gè)組件的兩個(gè)函數(shù)，createNewItem 和deleteItem .這里就相當(dāng)于view發(fā)出的action.當(dāng)觸發(fā)這個(gè)事件的時(shí)候，就調(diào)用action里面對(duì)應(yīng)的事件，從而將用戶的動(dòng)作達(dá)到一個(gè)傳給action的作用。

　　MyButton是它的子組件，我們將這些事件傳給它的子組件，由子組件來(lái)執(zhí)行。

MyButton.jsx的內(nèi)容如下：

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)} >點(diǎn)擊刪除</a></li>;
  });

  return <div>
            <ul>{itemHtml}</ul>
            <button onClick={props.onClick}>確認(rèn)添加</button>
          </div>;
};

module.exports = MyButton;

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

Action部分

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

var ButtonActions = {

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

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

};

module.exports = ButtonActions;

因?yàn)槲覀冎挥袃蓚€(gè)動(dòng)作，新增和刪除，所以里面也只有兩個(gè)事件。因?yàn)樾略龅氖俏谋緝?nèi)容，所以我們傳入text,因?yàn)閯h除是需要根據(jù)id來(lái)就行刪除，所有我們傳入id.

Dispatcher部分

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

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

module.exports = AppDispatcher;

　　dispatcher的作用是派發(fā)器，根據(jù)不同的動(dòng)作，來(lái)執(zhí)行不同的store。也就是說(shuō)，根據(jù)不同的動(dòng)作，來(lái)生成不同的數(shù)據(jù)。比如上面的。如果你的動(dòng)作是ADD_NEW_ITEM,那我就執(zhí)行store里面的addNewItemHandler這個(gè)函數(shù)來(lái)生產(chǎn)數(shù)據(jù)。如果你是DELETE_ITEM這個(gè)動(dòng)作，我就執(zhí)行store里面的deleteItem這個(gè)動(dòng)作來(lái)執(zhí)行刪除數(shù)據(jù)。

　　dispatcher就是這樣來(lái)聯(lián)系action和store的。那我怎么告訴頁(yè)面我刪除或者新增數(shù)據(jù)了呢，store里面的emitChange幫我們完成了這個(gè)動(dòng)作。每次數(shù)據(jù)的改變，就執(zhí)行一下這個(gè) emitChange.來(lái)告訴view,我新增數(shù)據(jù)啦，你給我趕緊跟著跟新，我刪除數(shù)據(jù)啦，給老子跟新你的頁(yè)面

　　值得注意點(diǎn)是：在flux中，一個(gè)頁(yè)面只有一個(gè)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

// 這里就是相當(dāng)于MVC中的model,只用來(lái)生成數(shù)據(jù) varEventEmitter = require('events').EventEmitter; varassign = require('object-assign'); // Store 更新后（this.addNewItemHandler()）發(fā)出事件（this.emitChange()）， // 表明狀態(tài)已經(jīng)改變。 View 監(jiān)聽(tīng)到這個(gè)事件，就可以查詢新的狀態(tài)，更新頁(yè)面了。 varListStore = assign({}, EventEmitter.prototype, { items: [], getAll:function() { returnthis.items; }, addNewItemHandler:function(text) { // 新增一個(gè)元素 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的作用是數(shù)據(jù)工廠，也就是說(shuō)所有的數(shù)據(jù)操作都在這里執(zhí)行，不管你是新增也好，刪除也好。還有就是view里面的數(shù)據(jù)都是從這里來(lái)的。

我們可以看到，我們首先定義了一個(gè)item這個(gè)數(shù)組用來(lái)存放數(shù)據(jù)。我們?cè)賮?lái)回看一下我們的MyButtonController.jsx

初始化狀態(tài)也是直接拿我們store里面的數(shù)據(jù)。

所以，flux就是一個(gè)數(shù)據(jù)流的操作方式，讓我們的數(shù)據(jù)流動(dòng)很清晰。向一條河流一樣，流完這個(gè)地方才能到達(dá)另外一個(gè)地方。

flux缺點(diǎn)：

　　如果你搞懂了flux，雖然你會(huì)被他清晰的數(shù)據(jù)流所震撼和吸引，不過(guò)有沒(méi)有發(fā)覺(jué)它很復(fù)雜，很啰嗦。比如我就想增加一個(gè)元素，兜了那么大的一個(gè)圈。

這也是它不好的地方之一。而且如果一個(gè)項(xiàng)目中，有些人才會(huì)用，有些人不會(huì)用。那也不好溝通。

所以在理解了flux之后，我準(zhǔn)備去學(xué)redux了。

總結(jié)

以上是生活随笔為你收集整理的Flux的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。