通过 Vue 类比理解 Mobx

因为之前一直用的 Vue 全家桶，所以转 React 的时候我就采用类比的方式来理解 Mobx 了。
建议熟悉 Vue 全家桶并且简单看了 Mobx 文档的同学入手，便于快速理解。

Mobx 是什么？

一个函数响应式编程的 React 库。

作用呢？

使用函数响应式编程的方式来进行状态管理。

划重点：

React 使用虚拟 DOM 提供了优化 UI 的渲染机制。
Mobx 提供了优化应用状态与 React 组件同步机制。

所以作用是：

• 存储和更新状态。
• 根据状态同步渲染行为。

Mobx 做的几个行为

• state 用于保存状态，如果加上 @observable 修饰器可以监听状态，更新 UI。
• computed 监听状态 state，返回一个新的值，加上 @computed 可以根据 computed 值的变化更新 UI。
• reaction 监听状态，作出响应行为。
• action 用于定义行为和修改状态。

用 Vue 的思路理解 Mbox？

• state 类似于 Vue 的 data，不同点在于 data 是双向绑定，而 state 只会更新 UI，UI 无法修改 state。而且 state 可以选择不进行观察。
• actions 类似于 Vue 的 method 可以进行一些函数行为，也可以改变状态值。不同点在于 Mobx 中 actions 是唯一可以改变 state 的值。
• computed 类似于 Vue 中的 Computed，都是根据已有 state 返回一个新的值。
• reaction 类似于 Vue 中的 watch 方法，不同点在于 reaction 创建的观察行为是全局行为，当组件销毁时需要将 reaction 观察行为销毁，否则这个行为会一直存在。

理解成 Vuex 更好

但我突然想到，作为状态管理器，其实 Mobx 应该和 Vuex 类比。

Mobx	Vuex
state	state
computed	getters
action	mutations + actions
reaction	-

其中 reaction 在 Vue 项目中可以使用 Vue 的 watch 属性监听 Vuex 的 state 和 getters 来实现。

其他

• 在 React 组件库上使用 @observer 修饰器可以让 React 组件变为响应式组件，当数据状态变化时进行组件渲染刷新。
• 对数据变化作出响应除了 reaction 函数，还有 autorun 和 when 函数分别代表监听时立即执行和只监听一次。
• 使用 @observable 修饰器监听 state 变化并渲染 UI。
• 使用 @action 修饰器定义 action。
• 使用 @computed 修饰器来监听使用 @observable 监听的 state。记得 computed 前面函数前面要加上 get 或 set 关键字标明 getter 或 setter。
• action 可以定义同步或异步行为。除此之外，可以使用 runInAction 函数来定义同步或异步行为并立即执行。
• action 中还有个 flow 函数，是利用生成器（ES6 的 generator 函数）来更好的控制异步行为。

最后

通过 Mobx 的文档目录分类中我意识到 Mobx 其实一共有三种行为：

1. 保存和监听状态 —— state
2. 对状态变化做出响应 —— computed 和 reaction。
3. 改变状态 —— action

当然 Mobx 也提供了一些工具函数，可以了解下。

关于我对于 Mobx 框架的理解就到这里啦，更多内容请查阅 Mobx 官方文档。