Mobx和Flux

MobX简介

mobx 是一个数据管理库，
可以和 react 配合使用
可以直接修改数据，对 UI 进行精确刷新
透明的函数响应式编程，状态管理变得简单和可扩展

核心要点

（1）State
状态集，一个可实例化的类
（2）observable
可观察的，对变量进行观察/监控 ，定义属性时使用
（3）Computed values(计算值)
创建计算值，没有任何副作用而只是返回一个值
（4）Actions(动作)
在任何更改 observable 或者有副作用的函数上使用动作
（5）Decorators（装饰器）
@observable
@action
@computed
（6）Reactions（反应）
反应 是自动响应状态变化的副作用

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要更新页面

说法二：

View: 视图部分，负责显示用户界面。
Action: 视图层发出的消息（用户操作导致，比如鼠标点击页面）
Dispatcher: 处理动作分发，维持Store之间的依赖关系。
Store: 负责存储数据和处理数据相关逻辑。并且数据一旦发生变动，就要提醒View更新页面。

Flux的流程：

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

说法二：

flux的最大特点：单向数据流。
1.用户访问 View
2.View 发出用户的 Action
3.Dispatcher 收到 Action，要求 Store 进行相应的更新
4.Store 更新后，发出一个"change"事件
5.View 收到"change"事件后，更新页面

代码流程

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