编辑

安装

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

有两种类型的 React 绑定，mobx-react-lite 仅支持函数组件，而 mobx-react 也支持基于类的组件。将适合您的用例的相应绑定添加到下面的 Yarn 或 NPM 命令中

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

转译设置

MobX 和装饰器

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

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

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

  • TypeScript：设置编译器选项 "useDefineForClassFields": true。
  • Babel：确保使用至少 7.12 版本，并使用以下配置
    {
    // Babel < 7.13.0
    "plugins": [["@babel/plugin-proposal-class-properties", { "loose": false }]],

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

为了验证，请在您的源代码（例如 index.js）的开头插入这部分代码

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

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

在较旧的 JavaScript 环境中使用 MobX

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

在这种情况下，MobX 可以回退到一个 ES5 兼容的实现，该实现几乎完全相同，尽管存在一些 没有 Proxy 支持的限制。您需要通过配置 useProxies 来显式启用回退实现

import { configure } from "mobx"

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

此选项将在 MobX 7 中移除。

MobX 在其他框架/平台上

← 关于这份文档MobX 的精髓 →