title: 创建一个自定义 observables sidebar_label: 自定义 observables {🚀}

hide_title: true

创建一个自定义的 observables {🚀}

Atoms （原子化设计）

在某些情况下，您可能希望有更多的数据结构或其他东西(如流)，用于响应式计算。 通过使用原子的概念来实现这一点非常简单。 可以使用Atoms向MobX发出信号，表示某些可观察数据源已经被观察到或已经更改，而MobX将在atom被使用或不再使用时，向atom发出信号。

Tip: 在许多情况下，你可以避免创造自己的Atoms，我们只需要创建一个普通的observable就行了， 当MobX开始跟踪它（observable）时，onBecomeObserved工具有相关提示

下面的例子演示了如何创建一个名为‘Clock’的observable，它返回当前的日期-时间，然后可以在响应式函数中使用它。

这个时钟只有在被观察到时，才会滴答作响。 此示例演示了”Atom”类的完整 API。

  1. import { createAtom, autorun } from "mobx"
  3. class Clock {
  4.     atom
  5.     intervalHandler = null
  6.     currentDateTime
  8.     constructor() {
  9.         // 创建一个atom来与MobX进行交互
  11.         this.atom = createAtom(
  12.             // 第一个参数是:
  13.             // - Atom的名称 用于在程序debug时便于观察.
  14.             "Clock",
  15.             // 第二个参数是（可选）:
  16.             // - 在unobserved 变到 observed时的回调函数
  17.             () => this.startTicking(),
  18.             // 第三个参数是（可选）:
  19.             // -  在observed 变到 unobserved时的回调函数
  20.             () => this.stopTicking()
  21.             // 同一个atom在多个状态之间来回变化
  22.         )
  23.     }
  25.     getTime() {
  26.         // 通知MobX这个observable 数据源已经被使用。
  27.         //
  28.         // 如果atom当前状态是 正在被观察（observed），reportObserved将返回true
  29.         // 通过 reaction.在需要时，它会被切换成“startTicking”（开始计时）
  30.         // onBecomeObserved处理函数.
  31.         if (this.atom.reportObserved()) {
  32.             return this.currentDateTime
  33.         } else {
  34.             // 调用了getTime函数，但此时没有任何reaction在运行，隐藏没有人依赖此值。所以并且不会触发startTicking和onBecomeObserved处理程序。
  35.             // 在这种情况下，根据atom的性质，其行为可能会有所不同，例如引发错误，返回默认值等。
  36.             return new Date()
  37.         }
  38.     }
  40.     tick() {
  41.         this.currentDateTime = new Date()
  42.         this.atom.reportChanged() // 通知MobX这个数据源已经更改。
  43.     }
  45.     startTicking() {
  46.         this.tick() // 初始化 tick
  47.         this.intervalHandler = setInterval(() => this.tick(), 1000)
  48.     }
  50.     stopTicking() {
  51.         clearInterval(this.intervalHandler)
  52.         this.intervalHandler = null
  53.     }
  54. }
  56. const clock = new Clock()
  58. const disposer = autorun(() => console.log(clock.getTime()))
  59. // 控制台打印输出运行中的“每一秒”
  61. // 如果没有其他人使用同样的“clock”，它也会停止滴答作响。并且停止在控制的输出
  62. disposer()