MobX

MobX

  • API 参考
  • English Doc
  • 赞助商
  • GitHub

›Fine-tuning

Introduction

  • 关于 MobX
  • 关于本文档
  • 安装
  • MobX 主旨

MobX core

  • Observable state
  • Actions
  • Computeds
  • Reactions {🚀}

MobX and React

  • 集成React(react-integration)
  • React 优化 {🚀}

Tips & Tricks

  • 定义数据存储
  • 理解响应性
  • 使用子类
  • 分析响应性 {🚀}
  • 含参数的计算值 {🚀}
  • MobX-utils {🚀}
  • 自定义 observables {🚀}
  • 惰性 observables {🚀}
  • 集合工具 {🚀}
  • 拦截与观察 {🚀}

Fine-tuning

  • 配置 {🚀}
  • 启用装饰器语法 {🚀}
  • 从MobX 4/5迁移 {🚀}

Others

  • 链接
Edit

从MobX 4/5迁移 {🚀}

MobX 6与MobX 5有很大的不同。这一页涵盖了从MobX 4/5到6的迁移指南和所有更改的详细列表。

为了更好地理解,请查看MobX 6.0 CHANGELOG.

⚠️ 警告: 根据你的代码库的大小和复杂性、MobX使用模式和自动化测试的质量等因素,本迁移指南可能会耗费你一小时到几天的时间。如果你对你的持续集成没有信心或者无法有足够的QA /测试应对任何意外的故障,请避免升级。意想不到的行为变化可能是由于MobX本身的变化或者Babel / TypeScript构建配置的变化引起的。 ⚠️

开始

  1. 将mobx更新到mobx 4/5的最新版本,并处理所有弃用消息。
  2. 将mobx更新到版本6。
  3. 如果你从Mobx 4升级,并且需要兼容不支持Proxy的IE / React Native,请在应用初始化时引入import { configure } from "mobx"; configure({ useProxies: "never" })以禁用Proxy实现。 查看 Proxy Support 章节以了解更多细节
  4. 对于babel用户:
    • 如果你正在使用Babel并启用了类属性,那么请禁用loose字段: ["@babel/plugin-proposal-class-properties", { "loose": false }]
    • (可选) 在MobX 6中,decorators已经变为可选项。如果你不想再使用decorators,从你的babel配置和dependencies中移除plugin-proposal-decorators。 查看 Enabling decorators {🚀} 章节以了解更多细节。
  5. 对于Typescript用户:
    • 在你的编译器配置中添加"useDefineForClassFields": true。
    • (可选) 在MobX 6中,decorators已经变为可选项。 如果你不想再使用decorators,在你的TypeScript配置中移除或者禁用experimentalDecorators。 查看 Enabling decorators {🚀} 章节以了解更多细节。
  6. MobX默认配置变得更加严格。 我们建议在完成升级后采用新的默认值,查看 Configuration {🚀} 章节。 在迁移过程中,我们建议以v4/v5开箱即用的相同方式配置MobX: import {configure} from "mobx"; configure({ enforceActions: "never" });。 在完成整个迁移过程并确认您的项目按预期工作之后,请考虑启用computedRequiresReaction、reactionRequiresObservable和observableRequiresReaction以及enforceActions: "observed"来编写更符合MobX习惯的代码。

升级类以使用makeObservable

由于标准化的JavaScript在如何构造类字段方面的限制,MobX不再可能通过装饰器或decorate工具来改变类字段的行为。作为代替,字段必须通过constructor定义为observable。有三种不同的实现方式:

  1. 移除所有的decorators,并在constructor中调用makeObservable,并显式地使用对应decorator定义哪个字段应该成为observable。比如: makeObservable(this, { count: observable, tick: action, elapsedTime: computed }) (注意,第二个参数是传递给decorate的内容)。 如果您想在代码库中去掉decorators,并且项目还不是太大,那么推荐使用这种方法。
  2. 保留所有的decorators,并在constructor中调用makeObservable(this)。 这将获取装饰器生成的元数据。如果你想要限制MobX 6迁移的影响,那么推荐使用这种方法。
  3. 移除decorators,并在类的constructor中调用makeAutoObservable(this)。

查看 makeObservable / makeAutoObservable 以了解更多细节.

需要注意的一些细节:

  1. 在每个声明MobX的基础成员的类定义中都需要使用makeObservable / makeAutoObservable。 因此,如果子类和超类都引入了observable成员,它们都必须调用makeObservable。
  2. makeAutoObservable将使用新的装饰器autoAction标记方法,只有当方法不在 derivation context 时,它才会应用action。这使得从计算属性中调用自动装饰的方法也很安全。

迁移带有许多类的大型代码库可能是令人生畏的。但是不用担心,有一个code-mod可以自动完成上述过程!!

使用mobx-undecorate codemod 升级你的代码

如果你是一个现有的MobX用户,你的代码使用了许多decorators,或者对decorate的等效调用。

mobx-undecorate 包提供了一个codemod可以自动更新你的代码,使其更加符合MobX 6。此包无需安装;你只需要下载并使用npx 工具,如果没有npx工具你必须首先安装。

如果要弃用所有MobX装饰器的使用,并将它们替换为等效的makeObservable调用,请转到包含源代码的目录并运行:

npx mobx-undecorate

MobX会继续支持装饰器语法 -- 因此若你想保留它们并只在需要的地方引入makeObservable(this),你可以使用--keepDecorators选项:

npx mobx-undecorate --keepDecorators

查看 documentation 以了解更多选项。

mobx-undecorate的局限性

mobx-undecorate命令必须在还没有构造函数的类中引入构造函数。如果构造函数的基类需要参数,则codemod不能为需要升级的子类引入这些参数,而super调用也不会传递它们。 你必须手动修复这些问题。 在这些情况下,该工具将生成// TODO: [mobx-undecorate]注释。

我们确实有一个React类组件做正确事情的特殊情况 通过props传递给超类。

← 启用装饰器语法 {🚀}链接 →
  • 开始
  • 升级类以使用makeObservable
  • 使用mobx-undecorate codemod 升级你的代码
    • mobx-undecorate的局限性
MobX
Docs
About MobXThe gist of MobX
Community
GitHub discussions (NEW)Stack Overflow
More
Star