副作用

reactions 是 mobx 中相当重要的概念。和 computed 一样都会在 state 依赖变更时触发，但不同的是

reactions 不处理数据，而是基于数据更改而产生的副作用。

类似于 useEffect 勾子。

autorun

依赖变更时执行，创建时也会执行一次。

示例

import { makeAutoObservable, autorun } from "mobx"

class Animal {
    name
    energyLevel

    constructor(name) {
        this.name = name
        this.energyLevel = 100
        makeAutoObservable(this)
    }

    reduceEnergy() {
        this.energyLevel -= 10
    }

    get isHungry() {
        return this.energyLevel < 50
    }
}

const giraffe = new Animal("Gary")

autorun(() => {
    console.log("Energy level:", giraffe.energyLevel)
})

autorun(() => {
    if (giraffe.isHungry) {
        console.log("Now I'm hungry!")
    } else {
        console.log("I'm not hungry!")
    }
})

console.log("Now let's change state!")
for (let i = 0; i < 10; i++) {
    giraffe.reduceEnergy()
}
// Energy level: 100
// I'm not hungry!
// Now let's change state!
// Energy level: 90
// Energy level: 80
// Energy level: 70
// Energy level: 60
// Energy level: 50
// Energy level: 40
// Now I'm hungry!
// Energy level: 30
// Energy level: 20
// Energy level: 10
// Energy level: 0

reaction

类似于 autorun，但可以指定追踪的依赖。

• reaction(() => value, (value, previousValue, reaction) => { sideEffect }, options?)

1. 第一个值：监听的依赖；
2. 第二个值：一个函数；参数分别为当前依赖值，依赖变更前的值，reaction；
3. 第三个值：options 选项。

when

判断依赖，在指定依赖达到条件时执行。

• when(predicate: () => boolean, effect?: () => void, options?)
• when(predicate: () => boolean, options?): Promise

示例

import { when, makeAutoObservable } from "mobx"

class MyResource {
    constructor() {
        makeAutoObservable(this, { dispose: false })
        when(
            // Once...
            () => !this.isVisible,
            // ... then.
            () => this.dispose()
        )
    }

    get isVisible() {
        // 表示此项目是否可见.
    }

    dispose() {
        // 清理一些资源.
    }
}

异步

如果你没有提供 effect 函数，when 将会返回一个 Promise。这样会跟 async / await 很好地结合在一起，让你可以等待可观察对象中的变化。

async function() {
    await when(() => that.isVisible)
    // etc...
}

如果要提前取消 when，可以对它返回的 Promise 调用 .cancel() 函数。

规则

1. 默认情况下，如果可观察对象发生了改变，受其影响的 reactions 会立即（同步）运行。然而，它们直到当前最外层的 (trans)action 执行结束后才会运行。
2. autorun 只会跟踪给定函数在同步执行过程中所读取的可观察对象，不会跟踪异步发生的变化。
3. autorun 不会跟踪被其调用的 action 所读取的可观察对象，因为 action 始终不会被追踪。

优化

由于 reactive 会一直监听并等待依赖变更，所以强烈推荐在不需要执行副作用时将它们注销掉。

reactive 会返回一个函数，执行它，销毁 reactive 。

防止内存泄露

class Vat {
    value = 1.2

    constructor() {
        makeAutoObservable(this)
    }
}

const vat = new Vat()

class OrderLine {
    price = 10
    amount = 1
    constructor() {
        makeAutoObservable(this)

        // 这个 autorun 将会和本 OrderLine 实例一起进行 GC,
        // 因为它只使用了来自 `this` 的可观察对象.
        // 所以不一定非要在删除 OrderLine 实例后立刻把它清理掉。
        this.disposer1 = autorun(() => {
            doSomethingWith(this.price * this.amount)
        })

        // 这个 autorun 将不会和本 OrderLine 实例一起进行 GC,
        // 因为 vat 保存了对这个 autorun 的引用用于通知改变,
        // 这样反过来又会把 'this' 保存在作用域中。
        this.disposer2 = autorun(() => {
            doSomethingWith(this.price * this.amount * vat.value)
        })
    }

    dispose() {
        // 所以, 为了避免内存问题, 当不再需要 reactions 之后
        // 务必要调用 disposers.
        this.disposer1()
        this.disposer2()
    }
}

options

• name

​ 该字符串在 Spy event listeners (opens new window) 和 MobX developer tools (opens new window) 中用作此 reaction 的调试名称。

• fireImmediately

​ 布尔值，指示在第一次运行 data 函数后立即触发 effect 函数。默认为 false

• delay

​ 对 effect 函数进行节流的毫秒数。如果是 0（默认值），将不进行节流操作。

• timeout

​ 设置一段有限的 when 将要等待的时间。如果过了时限，when 将会 reject 或抛出错误。

• onError

​ 异常行为处理

• scheduler(autorun, reaction)

​ 设置一个自定义调度程序，用来决定应该如何调度 autorun 函数的重新运行。它接受一个函数作为参数，这个函数应该在将来 某个时刻被调用，例如：{ scheduler: run => { setTimeout(run, 1000) }}。

• equals

​ 默认情况下设置为 comparer.default。如果指定，则此比较函数用于比较 data 函数产生的上一个值和下一个值。当且仅当 此函数返回 false 时，effect 函数才会被执行。