React 状态管理 - Mobx 入门（上）

Mobx是另一款优秀的状态管理方案

【让我们未来多一种状态管理选型】

响应式状态管理工具

扩展学习资料

Mobx核心概念

• Mobx提供了一种状态（State）可供观察的解决方案。【在Mobx内部队state进行主动监听】
• 可观察的状态（Observable state）意味着在Mobx构建的应用中，更细粒度和更高效的状态管理。
• 与Redux中状态变化取决于对比前后差异，Mobx中申明了观察对象便会依据框架本身的能力进行管理。

Redux应用流转图

reducer不能直接修改store

Reducer中不能修改Store，不能发生数据突变，这里是执行纯函数的【这样写会留下隐患】

Mobx应用流转图

actions直接修改State

Mobx接入实战

• Observable State【可观察的状态】
  • Mobx为常用的数据结构（如：对象，数组和类实例）添加了可观察的功能。
  • 使用@observable装饰器更便捷完成添加Observable State功能。
• Derivations（衍生）
  • 源自任何状态，并且不会再有任何相互作用的东西【包括具体UI和一些计算值】
  • Computed values（计算值）：使用纯函数（pure function）从当前可观察状态中衍生出的值。【state变就跟着变】
  • Reactions（反应）：当状态改时需要自动发生的副作用。【依赖了state的UI】