一.Mobx是什么？
它是简单的，可扩展的状态管理。通过透明的函数响应式编程，使状态变得简单和可扩展。
Mbox的中心思想就是：任何源自应用状态的东西都应该自动获得。比如有一个需求，状态B是根据状态A计算得到的，当状态A发生改变的时候，状态B也应该重新计算。在Mobx里面应用它的computed，就会自动帮我们更新状态B。这样比较方便处理。
二、Mbox运行机制与核心概念？
运行机制：
上面这个模型图描述了单向数据流思想，主要是状态state的改变，会对应页面UI的改变，页面UI上用户事件的操作会触发Actions的操作再去更新状态。
在Mobx里，它的状态state叫做observables-可观察的状态值，它的UI和副作用（reactions）就是observers-观察者,当observables发生改变时会通知到它的observers,然后观察者可以通过actions做一下处理，再通知observables更新。
要点：
1、定义状态使其可观察
2、创建视图响应状态变化
3、更改状态
核心概念：
1.observable:可观察的状态值
2.actions：一些改变状态值的动作
3.computed：根据state的改变，计算出来的值
4.reactions：因state或者computed value变化而引起的反应，主要指的是UI重新渲染
常用的装饰器：
@observable:将一个变量变得可观察
@observer常用于React组件，可监视render函数里使用的可观察变量，从而做出相应的reactions
@autorun常用于组件类或者store类里面，监视函数参数里使用的可观察变量，一旦变量发生变化。做出相对于的reactions
@action 改变观察变量值的操作
@computed 通过可观察变量经过函数计算得来的值，使用的时候才会计算，没有用到的时候不会计算。
三、Mbox在React里面怎么使用？
首先在项目里面安装mobx和mobx-react
第一步：npm install mobx mobx-react --save
mobx会使用装饰器语法
第二步：npm install --save-dev babel-plugin-transform-decorators-legacy // 修饰符的插件
npm install @babel/plugin-proposal-decorators // 装饰器的一个插件
第三步:修改.babelrc
Mobx大概的实现原理：
在被观察者和观察者之间建立依赖关系：
通过一个Reaction来track一个函数，该函数中访问了Observable变量，Observable变量的get方法会被执行，此时可以进行依赖收集，将此函数加入到该Observable变量的依赖中。
类似于：
reaction.track(function() {
mobx.beginCollect();//开始收集
handler();//被观察函数
mobx.endCollect();//结束收集})
触发依赖函数
上一步中Observable中，已经收集到了该函数。一旦Observable被修改，会调用set方法，就是依次执行该Observable之前收集的依赖函数，当前函数就会自动执行。
mobx底层对数据的观察，是使用Object.defineProperty(Mobx4)或Proxy(Mobx5)，Mobx4中Array是用类数组对象来模拟的，原始值是装箱为一个对象。
Mobx-react大致工作原理：
1.observe组件第一次渲染的时候，会创建Reaction，组件的render处于当前这个Reaction的上下文中，并通过track建立render中用到的observable建立关系
2.当observable属性修改的时候，会触发onInvalidate方法，track中，还是先进行依赖收集，调用forceUpdate去更新组件,然后触发组件渲染，然后结束依赖收集。
四、Mbox与Redux对比？
首先它们都是状态管理库，无论是Redux还是Mobx，本质都是为了解决状态管理混乱，无法有效同步的问题，它们都支持：
统一维护管理应用状态；
操作更新状态方式统一，并且可控（通常以action方式提供更新状态的途径）；
支持将store与React组件连接，如react-redux，mobx-react；通常使用状态管理库后，我们将React组件从业务上划分为两类：
容器组件（Container Components）：负责处理具体业务和状态数据，将业务或状态处理函数传入展示型组件；
展示型组件（Presentation Components）：负责展示视图，视图交互回调内调用传入的处理函数；
区别：
1.函数式和面向对象
Redux更多的是遵循函数式编程思想，而Mobx则更多从面相对象角度考虑问题。
Redux提倡编写函数式代码，如reducer就是一个纯函数，纯函数，接受输入，然后输出结果，除此之外不会有任何影响，也包括不会影响接收的参数；对于相同的输入总是输出相同的结果。
Mobx设计更多偏向于面向对象编程和响应式编程，通常将状态包装成可观察对象，于是我们就可以使用可观察对象的所有能力，一旦状态对象变更，就能自动获得更新。
2.单一store和多store
store是应用管理数据的地方，在Redux应用中，我们总是将所有共享的应用数据集中在一个大的store中，而Mobx则通常按模块将应用状态划分，在多个独立的store中管理。
3.JavaScript对象和可观察对象
Redux默认以JavaScript原生对象形式存储数据，而Mobx使用可观察对象：
Redux需要手动追踪所有状态对象的变更；
Mobx中可以监听可观察对象，当其变更时将自动触发监听；
4.不可变和可变
Redux状态对象通常是不可变的，我们不能直接操作状态对象，而总是在原来状态对象基础上返回一个新的状态对象。
而Mobx中可以直接使用新值更新状态对象。
5.mobx-react和react-redux
使用Redux和React应用连接时，需要使用react-redux提供的Provider和connect：
Provider：负责将Store注入React应用；
connect：负责将store state注入容器组件，并选择特定状态作为容器组件props传递；
对于Mobx而言，同样需要两个步骤：
Provider：使用mobx-react提供的Provider将所有stores注入应用；
使用inject将特定store注入某组件，store可以传递状态或action；然后使用observer保证组件能响应store中的可观察对象（observable）变更，即store更新，组件视图响应式更新。
参考资料：
https://cn.mobx.js.org/Mobx中文文档
https://juejin.im/post/6886742591720423438前端状态管理框架redux和mobx解析
