使用 computeds 派生信息

用法：

• computed注解 (es规范中称之为装饰器)
• computed(options)
• computed(fn, options?)

Computed值可用于从其他可观测值(observables)中派生信息。它们惰性求值，缓存输出，并且仅在基础可观察项之一发生更改时才重新计算。如果他们没有被使用，则不会计算。

从概念上讲，它们与电子表格中的公式非常相似，因此很重要。它们有助于减少必须存储的状态数量，并进行了高度优化。因此请尽可能使用它们。

示例

Computed值可以通过在JavaScript getters 上添加computed来创建，使用makeObservable来声明一个getter为computed。如果你希望将所有getter自动声明为compute，可以使用makeAutoObservable，observable或extendObservable。

为了帮助说明计算值的重点，下面的示例依赖于Reactions{🚀}高级部分的autorun。

import { makeObservable, observable, computed } from "mobx"

class OrderLine {
    price = 0
    amount = 1

    constructor(price) {
        makeObservable(this, {
            price: observable,
            amount: observable,
            total: computed
        })
        this.price = price
    }

    get total() {
        console.log("Computing...")
        return this.price * this.amount
    }
}

const order = new OrderLine(0)

const stop = autorun(() => {
    console.log("Total: " + order.total)
})
// Computing...
// Total: 0

console.log(order.total)
// (No recomputing!)
// 0

order.amount = 5
// Computing...
// (No autorun)

order.price = 2
// Computing...
// Total: 10

stop()

order.price = 3
// Neither the computation nor autorun will be recomputed.

上面的示例很好地演示了computed值的好处，它充当缓存点。尽管我们改变了amount，它会触发total的重新计算，但是它不会触发autorun，因为total检测到输出没有改变，因此不需要更新autorun。

相比之下，如果不对total进行computed，则autorun将运行3次，因为它直接取决于total和amount。自己尝试一下.

规则

使用computed值时，有以下几个最佳实践：
1.它们不应有副作用或更新其他observables变量
2.避免创建和返回新的observables变量

提示

• 如果没有被 observed，computed值将终止
  有时，它会使MobX新手感到困惑，这些人可能曾经使用过Reselect之类的库，如果您创建了一个计算属性，但没有在任何reaction中使用，则该属性不会被记住，并且似乎比必要时要重新计算的次数更多。例如，如果我们通过调用console.log(order.total)两次来扩展上述示例，则在调用stop()之后，该值将被重新计算两次。

这使MobX可以自动挂起那些未在使用的计算，以避免不必要地更新未访问的计算值。但是，如果某个computed属性没有在reaction中使用，则每次请求其值时都会对计算表达式求值，因此它们的行为就像普通属性一样。

如果仅观察计算的属性似乎无效，但是将其应用于使用observer，autorun等的项目时，将会非常有效。

以下代码演示了该问题：

// OrderLine has a computed property `total`.
const line = new OrderLine(2.0)

// If you access `line.total` outside of a reaction, it is recomputed every time.
setInterval(() => {
    console.log(line.total)
}, 60)

可以通过使用keepAlive选项设置注释（try it out yourself）或通过创建无操作的autorun(()=> {someObject.someComputed})来覆盖它，并且以后可以根据需要进行清理。请注意，这两种解决方案都有造成内存泄漏的风险。在此处更改默认行为是一种反模式。

MobX也可以配置computeRequiresReaction选项，以在从reactive context之外访问计算对象时报告错误。

• computed值可以有setter
  也可以为计算值定义setter。请注意，这些setter不能用于直接更改计算属性的值，但是可以被用作逆运算。Setters会被自动标记为actions。例如：

class Dimension {
    length = 2

    constructor() {
        makeAutoObservable(this)
    }

    get squared() {
        return this.length * this.length
    }
    set squared(value) {
        this.length = Math.sqrt(value)
    }
}

• computed.struct用于比较输出结构的不同
  如果在结构上等同于先前值的计算值的输出不需要通知observer，则可以使用calculated.struct。在通知观察者之前，它将首先进行结构比较，而不是进行相等性检查。例如：

class Box {
    width = 0
    height = 0

    constructor() {
        makeObsevable(this, {
            x: observable,
            y: observable,
            topRight: computed.struct
        })
    }

    get topRight() {
        return {
            x: this.width,
            y: this.height
        }
    }
}

默认情况下，一个computed输出将通过引用进行比较。由于上述示例中的topRight始终会返回一个新的结果对象，因此永远不会将其视为等于先前的输出。除非使用了calculated.struct。

但是，在上面的示例中，我们实际上不需要calculated.struct！计算值通常仅在值发生更改时才重新计算。这就是topRight只对width或height的变化做出反应的原因。由于任何更改都会得到一个不同的topRight坐标，compute.struct将永远不会有缓存命中，并且会浪费精力，因此我们不需要它。

在实践中，compute.struct的作用远不如听起来有用。只有当基础observables的更改仍然会导致相同的输出时才使用它。例如，如果我们首先对坐标进行四舍五入，则即使基础值不是，四舍五入的坐标也可能等于先前的四舍五入的坐标。

请检查equals选项来自定义输出是否改变。

• 带参数的计算值
  尽管getters不接受参数，但这里讨论了几种与需要参数的派生值一起使用的策略。

• 使用compute(expression)创建独立的计算值
  computed也可以直接作为函数来引用，就像使用observable.box 创建一个独立的计算值。在返回的对象上使用.get()以获取计算的当前值。这种形式的computed并不经常使用。但是在某些情况下，当您需要在其中传递 boxed的计算值时，可能很有用， 这里讨论一种这样的情况。

Options {🚀}

通常，computed的行为表现为您希望的方式，但是可以通过传入options参数来自定义其行为。

name

该字符串在Spy event listeners和MobX developer tools中用作调试名称。

equals

默认为comparer.default。它用作前后两个值的比较。如果此函数认为值相等，那么将不会重新评估observers。

这在处理其他库中的结构数据和类型时很有用。例如，一个 moment 实例可以用(a, b) => a.isSame(b)来判断是否相等。如果要使用structural/shallow比较来确定新值是否与先前值不同，comparer.structural和comparer.shallow会派上用场，并因此将其通知observers。

检查上面的computed.struct 部分。

内置comparers

MobX提供了四种内置的comparer比较器方法，这些方法可以满足大多数computed的equals需求：

• comparer.identity 使用===来判断两个值是否相等。
• comparer.default和comparer.identity相同，但是NaN等于NaN。
• comparer.structural执行深入的结构比较，以确定两个值是否相同。
• comparer.shallow执行浅层结构比较，以确定两个值是否相同。
  您可以从mobx导入comparer以访问这些方法。也可以在reaction中使用。

requiresReaction

建议在需要大量计算时将此值设置为true。如果您尝试reactive context在之外读取其值（在这种情况下可能不会被缓存），它可能导致页面无更新。

keepAlive

该设置可以避免未被观察的计算值挂起（请参见上面的说明）。该设置有可能导致内存泄漏，就像在 reactions中讨论的一些情况。