安装

¥Installation

MobX 可在任何 ES5 环境中工作，包括浏览器和 NodeJS。

¥MobX works in any ES5 environment, which includes browsers and NodeJS.

React 绑定有两种类型，mobx-react-lite 仅支持功能组件，而 mobx-react 还支持基于类的组件。将适合你的用例的绑定附加到下面的 Yarn 或 NPM 命令：

¥There are two types of React bindings, mobx-react-lite supports only functional components, whereas mobx-react also supports class based components. Append the appropriate bindings for your use case to the Yarn or NPM command below:

Yarn：yarn add mobx

NPM：npm install --save mobx

CDN：https://cdnjs.com/libraries/mobx/https://unpkg.com/mobx/dist/mobx.umd.production.min.js

转译设置

¥Transpilation settings

MobX 和装饰器

¥MobX and Decorators

根据你的喜好，MobX 可以使用或不使用装饰器。当前支持装饰器的旧版实现和标准化 TC-39 版本。有关如何启用它们的更多详细信息，请参阅 enabling-decorators。MobX 7 中将删除传统装饰器支持，以支持标准。

¥Based on your preference, MobX can be used with or without decorators. Both the legacy implementation and the standardised TC-39 version of decorators are currently supported. See enabling-decorators for more details on how to enable them. Legacy decorator support will be removed in MobX 7, in favor of the standard.

对类属性使用符合规范的转译

¥Use spec compliant transpilation for class properties

当将 MobX 与 TypeScript 或 Babel 一起使用时，并且你计划使用类；确保更新你的配置以对类字段使用符合 TC-39 规范的转译，因为这并不总是默认的。如果没有这个，类字段在初始化之前就无法被观察到。

¥When using MobX with TypeScript or Babel, and you plan to use classes; make sure to update your configuration to use a TC-39 spec compliant transpilation for class fields, since this is not always the default. Without this, class fields cannot be made observable before they are initialized.

  • TypeScript：设置编译器选项 "useDefineForClassFields": true。

    ¥TypeScript: Set the compiler option "useDefineForClassFields": true.

  • Babel：确保至少使用 7.12 版本，并具有以下配置：

    ¥Babel: Make sure to use at least version 7.12, with the following configuration:

    {
    // Babel < 7.13.0
    "plugins": [["@babel/plugin-proposal-class-properties", { "loose": false }]],

    // Babel >= 7.13.0 (https://babel.nodejs.cn/docs/assumptions)
    "plugins": [["@babel/plugin-proposal-class-properties"]],
    "assumptions": {
        "setPublicClassFields": false
    }
}

为了进行验证，请在源代码的开头插入这段代码（例如 index.js）

¥For verification insert this piece of code at the beginning of your sources (eg. index.js)

if (!new class { x }().hasOwnProperty('x')) throw new Error('Transpiler is not configured correctly');

请注意，对于 Next.js，你必须使用 定制 Babel 而不是 TypeScript，即使你的项目设置为使用 TypeScript。

¥Note that for Next.js you must customize Babel instead of TypeScript, even if your project is set up to use TypeScript.

旧版 JavaScript 环境中的 MobX

¥MobX on older JavaScript environments

默认情况下，MobX 使用代理来实现最佳性能和兼容性。然而，在较旧的 JavaScript 引擎上，Proxy 不可用（查看 代理支持）。此类示例包括 Internet Explorer（Edge 之前）、Node.js < 6、iOS < 10、RN 0.59 之前的 Android 或 iOS 上的 Android。

¥By default, MobX uses proxies for optimal performance and compatibility. However, on older JavaScript engines Proxy is not available (check out Proxy support). Examples of such are Internet Explorer (before Edge), Node.js < 6, iOS < 10, Android before RN 0.59, or Android on iOS.

在这种情况下，MobX 可以回退到 ES5 兼容的实现，其工作原理几乎相同，尽管有一些 没有代理支持的限制。你必须通过配置 useProxies 显式启用回退实现：

¥In such cases, MobX can fallback to an ES5 compatible implementation which works almost identically, although there are a few limitations without Proxy support. You will have to explicitly enable the fallback implementation by configuring useProxies:

import { configure } from "mobx"

configure({ useProxies: "never" }) // Or "ifavailable".

该选项将在 MobX 7 中删除。

¥This option will be removed in MobX 7.

其他框架/平台上的 MobX

¥MobX on other frameworks / platforms

← 关于本文档MobX 的要点 →