使用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 是基于浏览器的集成式开发环境，支持绝大部分编程语言，包括 HTML五、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，无需下载安装程序，一键切换开发环境。 Cloud Studio提供了完整的 Linux 环境，而且支持自定义域名指向，动态计算资源调整，能够完成各类应用的开发编译与部署。