title: 从MobX 4/5迁移 sidebar_label: 从MobX 4/5迁移 {🚀}

hide_title: true

从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" });。 在完成整个迁移过程并确认您的项目按预期工作之后,请考虑启用computedRequiresReactionreactionRequiresObservableobservableRequiresReaction以及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调用,请转到包含源代码的目录并运行:

  1. npx mobx-undecorate

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

  1. npx mobx-undecorate --keepDecorators

查看 documentation 以了解更多选项。

mobx-undecorate的局限性

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

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