初学Reflux

这两天学习了Reflux的基础知识，贯彻5w1h的学习方法，加上思维导图有力地辅助，总结如下

---

首先戳这里:看官网是必须的

1、Reflux是什么

• Reflux 是一个简单的单向数据流应用库，灵感来自于 ReactJS Flux

Flux又是什么

• React 标榜自己是 MVC 里面 V 的部分，那么 Flux 就相当于添加 M 和 C 的部分。Flux 是 Facebook 使用的一套前端应用的架构模式

2、Reflux是谁什么时候提出的

• Facebook在2014年4月提出的

Facebook为什么要提出

• 因为React在设计之初就只关注在View本身上，其余部分如数据的获取，事件处理等，全然不在考虑之内。不过构建大型的Web前端应用，这些点又实在不可避免。所以Facebook的工程师提出了前端的Flux架构，这个架构的最大特点是单向数据流（后面详述）。但是Flux本身的实现有很多不合理的地方，比如单例的Dispatcher会在系统中有多种事件时导致臃肿的switch-cases等，鉴于Flux本身只是一个架构，而且Facebook提供的参考实现又有一些问题，所以社区有了很多版本的Flux实现。比如我们这里会用到的Reflux。

3、Reflux的提出解决了什么问题

• 解决了数据在 React 应用中的流动方式及过程

React中的流动方式是怎样的

• 我们将数据传送给顶层组件，同样作为父祖件的它，便可以通过组件的属性将一些有用的数据传给各个子组件，一级一级自上而下传递下去，最终每一个组件都得到自己渲染所需的数据，从而完成UI渲染

Reflux是怎么解决的

• 主要由actions和stores组成，例：当组件list增加Item时，会调用actions某个方法（如addItem（data）并将新的数据当参数传递进去，通过事件机制，数据会传送到stores中，stores可以向服务器发送请求并提交给数据库，数据更新后，再通过事件机制传递到list当中，并更新UI

4、Reflux的优势在哪里

• 单向数据流（核心思想）
• 数据层（M）与视图层（V）抽离

什么是单向数据流

• Actions ────────────> Stores ────────────> View Components
  ^
  └──────────────────────────────────────┘
  如上图数据和操作在三者之间单向流动

数据单向流动的优点和缺点

• 优点：数据流动方向可以跟踪，流动单一，追查问题的时候可以跟快捷
• 缺点：写起来不太方便。要使UI发生变更就必须创建各种action来维护对应的state

5、与Flux的相同点

• 都有action、store、单项数据流

6、与Flux的不同点

• 通过内部拓展actions的行为，移除了单例的dispatcher
• stores可以监听actions的行为，无需进行冗杂的switch判断
• stores可以相互监听，可以进行进一步的数据聚合操作，类似于，map/reduce
• waitFor被连续和平行的数据流所替代

7、Reflux怎么安装

• npm安装：npm install reflux
• bower安装：bower install reflux

8、Reflux主要内容有什么

• Action
• Store
• view（controller-views）

什么是Action

• Action 是把数据从应用传到 store 的有效载荷，是store 数据的唯一来源，只用来描述“发生了什么”

怎么创建Action

• 创建单个actions：
  var addItem = Reflux.createAction();

• 创建多个actions：

  var TodoActions = Reflux.createActions([    'addItem',    'deleteItem']);

什么是Store

• 负责封装应用的业务逻辑和数据交互

怎么创建Store

var TodoStore = Reflux.createStore({        init: function () {            this.listenTo(TodoActions.addItem, 'addItem');            this.listenTo(TodoActions.deleteItem, 'deleteItem');        },        addItem: function (model) {           console.log(model)        },        deleteItem:function(model){            console.log(model);        }    });

什么是Views（controller-views）

• 整个App 的 入口，监听store 的变化以获取新的数据，重新render 自己及子组件

9、实现一个Hello World

需求分析

• 学习 使用 reflux 实现 界面渲染hello world

分解任务

1. 使用React创建一个组件，在页面渲染出hello word
2. 安装Reflux
3. 通过创建一个action 将“hello world”，传给创建的stores，然后 stores 将值传递给 component，并且渲染到页面
4. 将代码上传至github

分步实现任务

• 使用React创建一个组件，在页面渲染出hello word

'use strict';import React from 'react';import {render} from 'react-dom';const App = React.createClass({ render:function(){     return <div>         hello world     </div> }});render(<App/>, document.getElementById("content"));

• 安装Reflux

npm install reflux

• 通过创建一个action 将“hello world”，传给创建的stores，然后 stores 将值传递给 component，并且渲染到页面

'use strict';import React from 'react';import Reflux from 'reflux';import {render} from 'react-dom';const action = Reflux.createActions(['getHello']);const store = Reflux.createStore({    listenables: [action],    onGetHello: function (hello) {        this.trigger(hello);    }});const App = React.createClass({    mixins: [Reflux.connect(store, "hello")],    componentDidMount: function () {        action.getHello("hello world!");    },    render: function () {        return <div>            {this.state.hello}        </div>    }});render(<App/>, document.getElementById("content"));

• 将代码上传至github

10、总结

• 以后学习新知识的时候要分清问题的侧重点，确定目标后再分步学习去完成目标
• 学习知识要在最开始确定任务范围，尽量不引入别的新知识，增加学习负担
• 学习知识时要始终保持一颗积极学习新知识的心