MobX中如何让reaction监听observable对象profile的所有变更？

注意：所有监听方法返回的销毁函数，在组件卸载/Store销毁时记得调用，避免内存泄漏。

方案1：使用toJS配合reaction（最简便，适合绝大多数场景） #

MobX的toJS方法会递归遍历整个observable对象的所有属性，自动完成全量依赖收集，任何深层属性（包括数组内对象的属性、后续新增的属性）变化都会触发回调，无需手动罗列属性：

import { reaction, toJS } from "mobx";

reaction(
  () => toJS(this.profile),
  (newProfile) => {
    console.log("profile发生变更", newProfile);
  }
);

原理说明 #

你之前的写法只收集了id、name和todos数组本身的依赖，没有遍历到todos数组内部对象的done、value属性，所以修改这些属性不会触发回调。toJS会递归访问所有层级的属性，自动完成全量依赖收集。

方案2：使用observe深层监听（性能更优，适合需要感知具体变更的场景） #

如果你需要拿到具体的变更信息（比如变更的字段、变更类型），或者要避免每次序列化整个对象的性能开销，可以用MobX原生的observe方法开启深层监听：

import { observe } from "mobx";

// 第三个参数传入true开启深层监听
const cancelObserve = observe(this.profile, (changeEvent) => {
  console.log("变更类型：", changeEvent.type);
  console.log("变更字段：", changeEvent.name);
  console.log("变更后的值：", changeEvent.newValue);
}, true);

// 不需要监听时调用销毁方法避免内存泄漏
// cancelObserve()

该方案不仅能监听到已有属性的修改，还能监听到属性新增、删除、数组元素增删改等所有变更场景。

方案3：使用autorun（适合初始化就要执行一次的场景） #

如果你的副作用需要在初始化时就执行一次，后续变更也执行，可以用autorun：

import { autorun, toJS } from "mobx";

const cancelAutorun = autorun(() => {
  const snapshot = toJS(this.profile);
  // 这里写你的副作用逻辑
  console.log("profile变更：", snapshot);
});

内容的提问来源于stack exchange，提问作者Mimoid