3.6. boxed values

原值类型值和引用类型值

JavaScript 中的所有原始类型值都是不可变的，因此它们都是不可观察的。 通常这是好的，因为 MobX 通常可以使包含值的属性转变成可观察的。 可参见 observable objects。 在极少数情况下，拥有一个不属于某个对象的可观察的“原始类型值”还是很方便的。 对于这种情况，可以创建一个 observable box 以便管理这样的原始类型值。

observable.box(value)

observable.box(value) 接收任何值并把值存储到箱子中。 使用 .get() 可以获取当前值，使用 .set(newValue) 可以更新值。

此外，还可以使用它的 .observe 方法注册回调，以监听对存储值的更改。 但因为 MobX 自动追踪了箱子的变化，在绝大多数情况下最好还是使用像 mobx.autorun 这样的 reaction 来替代。

observable.box(scalar) 返回的对象签名是:

  • .get() - 返回当前值。
  • .set(value) - 替换当前存储的值并通知所有观察者。
  • intercept(interceptor) - 可以用来在任何变化应用前将其拦截。参见 observe & intercept。
  • .observe(callback: (change) => void, fireImmediately = false): disposerFunction - 注册一个观察者函数，每次存储值被替换时触发。返回一个函数以取消观察者。参见 observe & intercept。change 参数是一个对象，其中包含 observable 的 newValue 和 oldValue 。

observable.box(value, { deep: false })

创建一个基于 ref 装饰器的箱子。这意味着箱子里的任何(将来)值都不会自动地转换成 observable 。

示例

  1. import {observable} from "mobx";
  3. const cityName = observable.box("Vienna");
  5. console.log(cityName.get());
  6. // 输出 'Vienna'
  8. cityName.observe(function(change) {
  9.     console.log(change.oldValue, "->", change.newValue);
  10. });
  12. cityName.set("Amsterdam");
  13. // 输出 'Vienna -> Amsterdam'

observable.box(value, { name: "my array" })

name 选项用来给数组一个友好的调试名称，用于 spy 或者 MobX 开发者工具。

results matching ""

No results matching ""