创建自定义可观察量 {🚀}

¥Creating custom observables {🚀}

在某些时候，你可能希望拥有更多可用于反应式计算的数据结构或其他事物（例如流）。通过使用原子来实现这一点非常简单，这是 MobX 在内部用于所有可观察数据类型的类。原子可用于向 MobX 发出信号，表明某些可观察数据源已被观察或更改，并且 MobX 会让原子知道它何时被使用以及何时未被使用。

¥At some point you might want to have more data structures or other things (like streams) that can be used in reactive computations. Achieving this is pretty simple by using atoms, which is the class that MobX uses internally for all observable data types. Atoms can be used to signal to MobX that some observable data source has been observed or changed, and MobX will let the atom know when it's being used and when it's not.

提示：在许多情况下，你只需创建一个普通的可观察对象，并使用 onBecomeObserved 实用程序在 MobX 开始跟踪它时收到通知，就可以避免创建自己的原子。

¥Tip: In many cases you can avoid the need to create your own atoms just by creating a normal observable, and using the onBecomeObserved utility to be notified when MobX starts tracking it.

以下示例演示了如何创建一个返回当前日期时间的可观察 Clock，然后可以在反应函数中使用它。这个时钟只有在有人观察的情况下才会真正滴答作响。

¥The following example demonstrates how you can create an observable Clock that returns the current date-time, which can then be used in reactive functions. This clock will only actually tick if it is being observed by someone.

本示例演示了 Atom 类的完整 API。欲了解更多信息，请参阅 createAtom。

¥The complete API of the Atom class is demonstrated by this example. For further information, see createAtom.

import { createAtom, autorun } from "mobx"

class Clock {
    atom
    intervalHandler = null
    currentDateTime

    constructor() {
        // Creates an atom to interact with the MobX core algorithm.
        this.atom = createAtom(
            // 1st parameter:
            // - Atom's name, for debugging purposes.
            "Clock",
            // 2nd (optional) parameter:
            // - Callback for when this atom transitions from unobserved to observed.
            () => this.startTicking(),
            // 3rd (optional) parameter:
            // - Callback for when this atom transitions from observed to unobserved.
            () => this.stopTicking()
            // The same atom transitions between these two states multiple times.
        )
    }

    getTime() {
        // Let MobX know this observable data source has been used.
        //
        // reportObserved will return true if the atom is currently being observed
        // by some reaction. If needed, it will also trigger the startTicking
        // onBecomeObserved event handler.
        if (this.atom.reportObserved()) {
            return this.currentDateTime
        } else {
            // getTime was called, but not while a reaction was running, hence
            // nobody depends on this value, and the startTicking onBecomeObserved
            // handler won't be fired.
            //
            // Depending on the nature of your atom it might behave differently
            // in such circumstances, like throwing an error, returning a default
            // value, etc.
            return new Date()
        }
    }

    tick() {
        this.currentDateTime = new Date()
        this.atom.reportChanged() // Let MobX know that this data source has changed.
    }

    startTicking() {
        this.tick() // Initial tick.
        this.intervalHandler = setInterval(() => this.tick(), 1000)
    }

    stopTicking() {
        clearInterval(this.intervalHandler)
        this.intervalHandler = null
    }
}

const clock = new Clock()

const disposer = autorun(() => console.log(clock.getTime()))
// Prints the time every second.

// Stop printing. If nobody else uses the same `clock`, it will stop ticking as well.
disposer()