6.3. createAtom

创建 observable 数据结构和 reactions(反应)

Atoms

在某些时候，你可能想要有更多的数据结构或其他可以在响应式计算中使用的东西(如流)。 要实现这个其实非常容易，使用 Atoms 的概念即可。 Atom 可以用来通知 Mobx 某些 observable 数据源被观察或发生了改变。 当数据源被使用或不再使用时，MobX 会通知 atom 。

提示: 在多数场景下，你可以避免去创建自己的 atoms，创建普通的 observavles 并使用工具 onBecomeObserved 或 onBecomeUnobserved 在 MobX 开始追踪 observable 时接收通知

下面的示例演示了如何创建一个 observable Clock，它可以用在响应式函数中，并且返回当前时间。 这个 clock 只有当它被观察了才会运行。

此示例演示了 Atom 类的完整API。

  1. import {createAtom, autorun} from "mobx";
  3. class Clock {
  4.     atom;
  5.     intervalHandler = null;
  6.     currentDateTime;
  8.     constructor() {
  9.         // 创建一个 atom 用来和 MobX 核心算法交互
  10.         this.atom =    createAtom(
  11.             // 第一个参数: atom 的名字，用于调试
  12.             "Clock",
  13.             // 第二个参数(可选的): 当 atom 从未被观察到被观察时的回调函数
  14.             () => this.startTicking(),
  15.             // 第三个参数(可选的): 当 atom 从被观察到不再被观察时的回调函数
  16.             // 注意同一个 atom 在这两个状态之间转换多次
  17.             () => this.stopTicking()
  18.         );
  19.     }
  21.     getTime() {
  22.         // 让 MobX 知道这个 observable 数据源已经使用了
  23.         // 如果 atom 当前是被某些 reaction 观察的，那么 reportObserved 方法会返回 true
  24.         // 如果需要的话，reportObserved 还会触发 onBecomeObserved 事件处理方法(startTicking)
  25.         if (this.atom.reportObserved()) {
  26.       return this.currentDateTime;
  27.     } else {
  28.             // 显然 getTime 被调用的同时并没有 reaction 正在运行
  29.             // 所以，没有人依赖这个值，因此 onBecomeObserved 处理方法(startTicking)不会被触发
  30.             // 根据 atom 的性质，在这种情况下它可能会有不同的表现(像抛出错误、返回默认值等等)
  31.         return new Date();
  32.     }
  33.     }
  35.     tick() {
  36.         this.currentDateTime = new Date();
  37.         // 让 MobX 知道这个数据源发生了改变
  38.         this.atom.reportChanged();
  39.     }
  41.     startTicking() {
  42.         this.tick(); // 最初的运行
  43.         this.intervalHandler = setInterval(
  44.             () => this.tick(),
  45.             1000
  46.         );
  47.     }
  49.     stopTicking() {
  50.         clearInterval(this.intervalHandler);
  51.         this.intervalHandler = null;
  52.     }
  53. }
  55. const clock = new Clock();
  57. const disposer = autorun(() => console.log(clock.getTime()));
  59. // ... 输出每一秒的时间
  61. disposer();
  63. // 停止输出。如果没有人使用同一个 `clock` 的话，clock 也将停止运行。

results matching ""

No results matching ""