• 1. MobX 介绍
  • 1.1. MobX 要点
  • 1.2. 概念与原则
• 2. API概览
• 1. observable 相关
  • 3.1. observable
  • 3.2. @observable
  • 3.3. objects
  • 3.4. arrays
  • 3.5. maps
  • 3.6. boxed values
  • 3.7 decorators
• 1. 对 observables 作出响应
  • 4.1. (@)computed
  • 4.2. autorun
  • 4.3. when
  • 4.4. reaction
  • 4.5. (@)observer
  • 4.6. 理解 MobX 对何作出响应
• 1. 改变 observables
  • 5.1. action
  • 5.2. async actions & flows
  • 5.3. Object api
• 1. 工具函数
  • 6.1. toJS
  • 6.2. extendObservable
  • 6.3. createAtom
  • 6.4. intercept & observe
  • 6.5. mobxUtils.fromPromise
  • 6.6. mobxUtils.fromResource
  • 6.7. mobxUtils.toStream
  • 6.8. mobxUtils.fromStream
  • 6.9. mobxUtils.now
  • 6.10. mobxUtils.createTransformer
  • 6.11. mobxUtils.expr
  • 6.12. complete api overview
• 7. 博客、 视频及相关项目
• 1. 贴士与技巧
  • 8.1. 常见问题解答
  • 8.2. 常见陷阱与最佳实践
  • 8.3. 如何(不)使用装饰器
  • 8.4. 使用 trace 进行调试
  • 8.5. 定义数据存储
  • 8.6. 优化 React 组件
  • 8.7. 开发工具
  • 8.8. spy
• 9. 捐赠
• Published with GitBook

6.4. intercept & observe

Intercept & Observe

observe 和 intercept 可以用来监测单个 observable(它们不追踪嵌套的 observable) 的变化。 intercept 可以在变化作用于 observable 之前监测和修改变化。 observe 允许你在 observable 变化之后拦截改变。

Intercept

用法: intercept(target, propertyName?, interceptor)

• target: 监测的 observable
• propertyName: 可选参数，用来指定某个属性进行拦截。注意，intercept(user.name, interceptor) 和 intercept(user, "name", interceptor) 根本是完全不同的。前者尝试给 user.name(或许根本不是一个 observable) 里面的当前值添加一个拦截器，而后者拦截 user 的 name 属性的变化。
• interceptor: 在每次变化作用于 observable 后调用的回调函数。接收一个用来描述变化的对象。

intercept 应该告诉 MobX 对于当前变化需要做些什么。 因此，它应该做下列事情中的某个:

• 把从函数中接收到的 change 对象原样返回，这样变化会被应用。
• 修改 change 对象并将其返回，例如数据标准化。但不是所有字段都是可以修改的，参见下面。
• 返回 null，这表示此次变化可以被忽略而且不会应用。这是一个强大的概念，例如可以使你的对象临时性的不可改变。
• 抛出异常，例如如果一些不变量未被满足。

该函数返回一个 disposer 函数，当调用时可以取消拦截器。 可以为同一个 observable 注册多个拦截器。 它们会按照注册的顺序串联起来。 如果一个拦截器返回 null 或抛出异常，其它的拦截器不会再执行。 还可以注册一个拦截器同时作用于父对象和某个属性。 在这种情况下，父对象的拦截器在属性拦截器之前运行。

const theme = observable({
  backgroundColor: "#ffffff"
})
const disposer = intercept(theme, "backgroundColor", change => {
  if (!change.newValue) {
    // 忽略取消设置背景颜色
    return null;
  }
  if (change.newValue.length === 6) {
    // 补全缺少的 '#' 前缀
    change.newValue = '#' + change.newValue;
    return change;
  }
  if (change.newValue.length === 7) {
      // 这一定是格式正确的颜色代码！
      return change;
  }
  if (change.newValue.length > 10) disposer(); // 不再拦截今后的任何变化
  throw new Error("This doesn't like a color at all: " + change.newValue);
})

Observe

用法: observe(target, propertyName?, listener, invokeImmediately?)

• target: 观察的 observable
• propertyName: 可选参数，用来指定某个属性进行观察。注意，observe(user.name, listener) 和 observe(user, "name", listener) 根本是完全不同的。前者观察 user.name(或许根本不是一个 observable) 里面的当前值，而后者观察 user 的 name 属性。
• listener: 在每次变化作用于 observable 后调用的回调函数。接收一个用来描述变化的对象，除了装箱的 observable，它调用 listener 有两个参数: newValue、oldValue。
• invokeImmediately: 默认是 false。如果你想 observe 直接使用 observable 的状态(而不是等待第一次变化)调用 listener 的话，把它设置为 true。不是所有类型的 observable 都支持。

该函数返回一个 disposer 函数，当调用时可以取消观察者。 注意，transaction 不影响 observe 方法工作。 意味着即使在一个 transaction 中，observe 也会触发每个变化的监听器。 因此，autorun 通常是一个更强大的和更具声明性的 observe 替代品。

observe 会响应对应的变动，而像是 autorun 或 reaction 则会对新值做出响应。大多数情况下，后者足够用了。

示例:

import {observable, observe} from 'mobx';
const person = observable({
    firstName: "Maarten",
    lastName: "Luther"
});
const disposer = observe(person, (change) => {
    console.log(change.type, change.name, "from", change.oldValue, "to", change.object[change.name]);
});
person.firstName =  "Martin";
// 输出: 'update firstName from Maarten to Martin'
disposer();
// 忽略任何未来的变化
// 观察单个字段
const disposer2 = observe(person, "lastName", (change) => {
    console.log("LastName changed to ", change.newValue);
});

相关博客: Object.observe 已死。mobx.observe 永生

事件概览

intercept 和 observe 的回调函数接收一个事件对象，它至少有如下属性:

• object: 触发事件的 observable
• type: 当前事件类型(字符串)

对于每种类型可用的附加字段:

* 注意，对象的 update 事件不会为更新的计算值(因为它们没有变化)触发。但是可以通过使用 observe(object, 'computedPropertyName', listener) 明确地订阅特定属性来观察它们。

results matching ""

No results matching ""