Reactions

Reaction 在 MobX 中是用来执行副作用内容的。Reaction 的目标是模拟哪些需要自动发生的副作用，它们可以为 Observable 创建消费者并在相关内容发生变化时自动运行预定义的副作用内容。Reaction 有两种方式可以创建，一种是使用 autorun()，一种是使用 reaction()。

autorun(effect: (reaction) => void) ，创建一个实时监控 Observable 变化的 Reaction，只要被监控的 Observable 发生了变化，Reaction 就会被执行。
reaction(() => value, (value, previous, reaction) => { sideEffect }, options?)，监控指定 Observable 或 Computed 的变化，执行指定的副作用过程。

reaction() 可以创建更加灵活控制的 Reaction，不仅可以降低 Reaction 的执行频次，还可以对 Observable 做到更加精细的控制。

autorun() 和 reaction() 在执行以后会返回一个取消函数，这个取消函数在调用以后会取消掉之后 Reaction 的自动执行。所以需要注意的是，在不再需要 Reaction 的时候，一定要及时的使用取消函数将其释放，否则将会造成内存泄露，影响性能。

另一个用来监控 Observable 并执行一些处理过程的方法是 when()，这个函数有两种用法。

when(predicate: () => boolean, effect?: () => void, options?)，在这种用法中，when() 会一直监控第一个参数直到它返回 true 的结果，然后就会去执行第二个参数定义的副作用过程。
when(predicate: () => boolean, options?): Promise，没有指定第二个参数的 when() 会返回一个 Promise 实例。如果搭配 async/await 使用，可以让处理过程停下来，直到 when() 的条件变成 true 才会继续执行。

以下示例是 when() 的常见用法。

import { when, makeAutoObservable } from 'mobx';

class Resource {
  constructor() {
    makeAutoObservable(this, { dispose: false });
    when(
      () => !this.isVisible,
      () => this.dispose()
    );
  }

  get isVisible() {
    // 按照逻辑返回 Boolean 类型的值
  }

  async processWhenVisible() {
    await when(() => this.isVisible);
    // 继续完成当 isVisible 为真的时候需要做的处理
  }

  dispose() {
    // 这里做释放资源的动作
  }
}

Live with React

Reactions