mobx与Redux的区别

1. 状态容器

1. redux ：
   dispatch(action) - > 在store中调用reducer,将当前state和收到的action做对比，计算出新的state -> state发生变化，store监听到变化 -> 出发重新渲染
2. mobx
   action -> 修改state -> 触发变化

2. 设计思想

1. redux遵循的是函数式编程思想，而mobx则更多的从面向对象角度考虑问题
2. redux提倡编写函数式的代码，例如reducer就是一个纯函数，接受输入，输出结果，对于相同的输入总是输出相同的结果，mobx设计更多的式偏向面向对象编程和响应式编程，通常将状态包装成可观察的对象，于是我们就可以使用可观察对象的所有能力，一旦状态变化，就能自动获取更新

3. store

store式应用管理数据的地方，在redux中，会将所有数据集中在一个大的store中，而mobx则是按模块应用划分，在多个独立的store中

4. mobx-react , react-redux

－　react和redux应用连接时，需要使用react-redux提供的provider和connect

1. provider：将store注入应用
2. connect：负责将store state 注入容器组件，并选择特定状态作为容器组件props传递
   －　对于Mobx而言，同样需要两个步骤：
   1、Provider:使用mobx-react提供的Provider将所有stores注入应用
   2、使用inject将特定store注入某组件，store可以传递状态或action；然后使用observer保证组件能响应store中的可观察对象（observable）变更，即store更新，组件试图响应式更新

• mobx补充：
  MobX 提供了优化应用状态与 React 组件同步的机制，这种机制就是使用响应式虚拟依赖状态图表，它只有在真正需要的时候才更新并且永远保持是最新的。
  MobX 会对在追踪函数执行过程中读取现存的可观察属性做出反应。
  MobX5 使用proxy来追踪属性
  mobx概念

1. 状态（state）：state是驱动应用的数据
2. 衍生（Derivations）：两种类型 computed values / reactions(反应)
3. actions
   mobx支持单项数据流
   MobX 中实现数据绑定的原理主要是通过 Object.defineProperty ，在对状态进行读写操作的时候会触发其 getter 和 setter 函数以进行响应，而这一点和 Vue 的原理其实是非常类似的。

在初始化或者添加状态时会给目标对象添加一个代理对象，并且重写目标对象中需要观察的属性的 getter 和 setter 函数，讲其读写操作代理到代理对象之上；

当初始化 autorun 函数时，会首次运行一遍监听函数，以触发状态的 getter 函数，然后收集依赖，将依赖与监听函数进行双向绑定；

在之后修改状态时会触发其 setter 函数，获取 Reactions 并运行其监听函数，同时更新其监听函数的依赖；

因此，MobX 的依赖绑定是实时性的，并且实现了依赖的最小颗粒度。