Edit

安装

MobX 可在任何 ES 5 环境中工作，包括浏览器和 Node.js。

MobX 有两种 React 绑定方式，mobx-react-lite 仅支持函数组件，而 mobx-react 还支持基于类的组件。可以使用 Yarn、NPM、CDN 将 MobX 集成到您的项目中：

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.html 中的更多细节。旧版装饰器支持将在 MobX 7 中被移除，以支持标准。

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

当 MobX 与 TypeScript 或者 Babel 一起使用时，并且你计划使用类，一定要更新你的配置，才能为类字段启用一个符合 TC-39 规范的转译，因为这不总是默认值。否则，无法在初始化类字段之前使其可观察。

  • Babel：一定要用至少 7.12 版，并有以下配置: 
    {
    // Babel < 7.13.0
    "plugins": [
        ["@babel/plugin-proposal-class-properties", { "loose": false }]
    ],

    // Babel >= 7.13.0 (https://babeljs.io/docs/en/assumptions)
    "plugins": [["@babel/plugin-proposal-class-properties"]],
    "assumptions": {
        "setPublicClassFields": false
    }
}
  • TypeScript：设置编译器选项为 "useDefineForClassFields": true。

将以下代码插入你源码的开头（如 index.js）以便校验：

if (!new (class { x; })().hasOwnProperty("x"))
    throw new Error("转译器配置错误");

在较旧的 JavaScript 环境中使用 MobX

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

在这些情况下，MobX 可以回退到 ES 5 兼容实现，其工作原理几乎相同， 尽管它有一些缺少 Proxy 支持的限制。你必须配置 useProxies 来显示启用后备实现：

import { configure } from "mobx";

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

这个选项将在 MobX 7 中被移除。

其他框架/平台上的MobX

← 关于本文档MobX 主旨 →