Flux

Flux

最近React(web/native)依旧如火如荼,相信大家都跃跃欲试,入职新公司，现在的团队也开始在React领域有所尝试. 2016年应该是
React 逐渐走向成熟的一年。之前在原来公司搞不懂的问题，同样是自学，发觉在新公司都搞懂了。哈哈，我也不知道为什么。

flux是干嘛的？

其实我刚开始学习的时候，一直不知道flux有什么鸟用。

官方说法是：Flux是Facebook内部用来构建React应用的一套架构。它本身并不是一个框架或库。它仅仅是一个用于完善React应用开发的一种新的应用程序架构， Flux架构最大的特点是其倡导的是单向数据流方案。

　　个人理解就是：比如我删除了一条数据，或者新增了一条数据，我怎么来让view知道我删除或者新增了该数据来做相应显示的改变呢，就是通过这种单向的数据流来告知，从而让数据的流动变得更加清晰。

比如 action就专门来处理你是点击删除，还是新增件，dispatcher就专门来派发这些动作，store就专门用来对数据的删除，增加做操作。view就专门来更新视图和发出动作。我是这么理解的。

首先来看看这张图：

Flux

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

界面是这样的：

Flux

这个demo比较简单，就是数据的增加和删除，在输入框中输入内容，然后出来上面的东西，点击删除按钮可以对数据就行删除

下面对demo进行解读：

view部分

index.jsx

var React = require('react');

var ReactDOM = require('react-dom');

var MyButtonController = require('./components/MyButtonController');
 
ReactDOM.render(

  <MyButtonController/>,

  document.querySelector('#example')
);

比较简单，就是将组建渲染到页面上

component部分。

这里面包含两个组件，一个是 MyButtonController.jsx, 一个MyButton.jsx

MyButtonController.jsx内容如下：

var React = require('react');
// 引入数据层

var ListStore = require('../stores/ListStore');
// 引入动作层

var ButtonActions = require('../actions/ButtonActions');

var MyButton = require('./MyButton');
 
var MyButtonController = 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) {
 
    var text=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部分

// 这里就是相当于MVC中的model,只用来生成数据
 
var EventEmitter = require('events').EventEmitter;

var assign = require('object-assign');
 
// Store 更新后（this.addNewItemHandler()）发出事件（this.emitChange()），
// 表明状态已经改变。 View 监听到这个事件，就可以查询新的状态，更新页面了。
 
var ListStore = assign({}, EventEmitter.prototype, {

  items: [],
 
  getAll: function () {

    return this.items;

  },
 
  addNewItemHandler: function (text) {

    // 新增一个元素

    var id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);

    var obj= {

      id: id,

      text: text

    };

    this.items.push(obj);

  },

  deleteItem:function(id){

    // 删除指定元素

    var myItems=this.items;

    for (var i =0;i<myItems.length;i++) {

      var delId=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

Flux

初始化状态也是直接拿我们store里面的数据。

所以，flux就是一个数据流的操作方式，让我们的数据流动很清晰。向一条河流一样，流完这个地方才能到达另外一个地方。

flux缺点：

　　如果你搞懂了flux，虽然你会被他清晰的数据流所震撼和吸引，不过有没有发觉它很复杂，很啰嗦。比如我就想增加一个元素，兜了那么大的一个圈。

这也是它不好的地方之一。而且如果一个项目中，有些人才会用，有些人不会用。那也不好沟通。

相关推荐