使用Mobx的7个技巧

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

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

1*Cz3gdvUyYpkdjM0qkwQAHw.png

MobX: Simple, scalable state management

Tip#1 正确理解概念

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

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

%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-06-27%2019.34.27.png

Tip#2 使用正确的reactions

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

1*OR_JyMQK4oTBTedxzHhJeQ.png

  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命名的好处是当程序出错时,可以快速定位出错位置。
%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202018-06-27%2019.54.50.png

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 环境,并且支持自定义域名指向,动态计算资源调整,可以完成各种应用的开发编译与部署。

如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

望沿途的风景 · 6月29日

感觉Mobx+react 等于 繁琐的vue

+1 回复

海诺 · 6月28日

Mobx 比 redux 好理解,之前用过

回复

0

恩 同感, 不过我没实际用过

一歩 作者 · 6月28日
0

@一歩 建议用一下

海诺 · 6月28日
崩崩 · 7月9日

转dva了

回复

载入中...