react-flux，flux前端框架

Flux

在2013年，Facebook让React亮相的同时推出了Flux框架，React的初衷实际上是用来替代jQuery的，Flux实际上就可以用来替代Backbone.js，Ember.js等一系列MVC架构的前端JS框架。

其实Flux在React里的应用就类似于Vue中的Vuex的作用，但是在Vue中，Vue是完整的mvvm框架，而Vuex只是一个全局的插件。

契机：React只是一个MVC中的V(视图层)，只管页面中的渲染，一旦有数据管理的时候，React本身的能力就不足以支撑复杂组件结构的项目，在传统的MVC中，就需要用到Model和Controller。Facebook对于当时世面上的MVC框架并不满意，于是就有了Flux, 但Flux并不是一个MVC框架，他是一种新的思想（ 新的架构思想 ）。

Flux 组成部分

• View： 视图层 （ 用React的组件来代替 ）
• ActionCreators（动作创造者）：视图层发出的消息（比如mouseClick）
• Dispatcher（派发器）：用来接收Actions、执行回调函数
• Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Views要更新页面

Flux的流程：

1. 组件获取到store中保存的数据挂载在自己的状态上
2. 用户产生了操作，调用actions的方法
3. actions接收到了用户的操作，进行一系列的逻辑代码、异步操作
4. 然后actions会创建出对应的action，action带有标识性的属性
5. actions调用dispatcher的dispatch方法将action传递给dispatcher
6. dispatcher接收到action并根据标识信息判断之后，调用store的更改数据的方法
7. store的方法被调用后，更改状态，并触发自己的某一个事件
8. store更改状态后事件被触发，该事件的处理程序会通知view去获取最新的数据

Flux的使用流程

使用flux写一个计数的例子 count

1. 要想使用FLux架构思维，需要通过一个工具进行使用， 这个工具就是flux
2. 安装 flux
   $ yarn add flux
3. 在src目录下 新建store目录，里面新建index.js
   • store有两个功能
     • 存储数据
     • 当数据发生改变时，视图要进行更新 （ 当前组件中的state发生了改变，从新从store中获取数据，要想重新复制，那么要通过事件的发布，订阅 ）

    const EventEmitter = require( 'events' ).EventEmitter   //通过node引入events模块
    								//react之所以可以用node，模块，底层用的webpack，webpack底层又是node

    const store = {
   
      ...EventEmitter.prototype,				//通过prototype获取on。emit 进行事件发布和订阅
      state: {