使用Mobx的7个技巧

one more time one more chance. 一歩重头学前端, MobX。

Mobx 是个简单且实用的 JS 库，可以用于 React 项目管理组件间的状态。下面7个技巧是实战中总结出来的。

MobX: Simple, scalable state management

Tip#1 正确理解概念

MobX 大部分概念非常好理解，在深入理解每一个之前，大概在脑子里画个蓝图有助于掌握MobX。下面四个概念是 Mobx 的基石：

1. observable： 可被追踪变化的数据
2. observer： 响应observable 数据更新的组件
3. computed values: 可根据observable 数据计算返回值（此处的值也可理解为是observable）的函数
4. reactions: 监听observable 数据变化被触发执行的不同类型的函数

Tip#2 使用正确的reactions

MobX提供了多种reactions供我们 响应数据变化，不同的方式具有不同的特点，根据业务场景，我们应该选出最优的方式。

1. autorun: 提供的函数总是立即被触发一次, 依赖关系改变时会再次被触发。依赖关系指的是在autorun函数中出现过的observable数据。
2. autorunAsync: same as autorun but you can specify how much time after it should run after the data changes in observables没看到 API 中有该函数
3. when: 你可以设置断言，当断言生效时响应函数会执行，响应仅会被触发一次
4. reaction: 与 autorun 类似，函数不会立即执行

Tip#3 为reactions命名

为reactions命名的好处是当程序出错时，可以快速定位出错位置。

Tip#4 使用严格模式

默认情况下，MobX允许你随便的更新observable数据。在大型应用中，若随意的变更数据会使程序状态无法追踪，不可预测。

为此，MobX 提供了严格模式，强迫我们只可以在 action 中更新observable数据。

Tip#5 使用装饰器

在使用 MobX 的使用我们不必须使用ES2015的写法，但是如果可以，请使用修饰器写法。使用修饰器我们的代码会变得更加的简洁，并且很容易区分哪些数据是observable的、哪些不是。

原文还推荐大家使用TypeScript，但是我不会就不瞎说了。

Tip#6 使用多个 store

使用多个 store对观测数据进行逻辑分组。

1. 一个用于 UI 状态
2. 一个或多个用于领域状态

Tip#7 Don’t use it

原文太长，我不想翻译了。MobX 不是必须的，React 本身就可以完成某些数据管理的任务，如果为了用而用会导致程序的混乱。同时 MobX 和 Redux 各有利弊，也可以适当的考虑使用 Redux。

引用

原作者 ppt
7 tips for using MobX

翻译中，掺杂了个人愚见，请大家参考原文。
前端学习QQ群: 538631558

【开发环境推荐】Cloud Studio 是基于浏览器的集成式开发环境，支持绝大部分编程语言，包括 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，无需下载安装程序，一键切换开发环境。 Cloud Studio提供了完整的 Linux 环境，并且支持自定义域名指向，动态计算资源调整，可以完成各种应用的开发编译与部署。