Mobx 的 observable 失去了子对象的平等性

Mobx's observable loses child objects equality

当我从包含实际上是相同对象的字段的普通对象创建一个可观察对象时,这个 属性 不再是相等的对象。所以如果我改变一个 属性,第二个保持不变。

有没有合适的方法来处理这个问题?

import { observable } from "mobx";

const status = { id: "some-obj" };

const obj = {
  status,
  status2: status
};

const observableObj = observable(obj);

const isEqual = observableObj.status2 === observableObj.status;

document.body.innerHTML = `Is equal = ${isEqual}`;
console.log(observableObj);

https://codesandbox.io/s/mobx-equality-demo-5eowk

当您在常规对象上调用 observable 时,它不会改变它,而是创建新的可观察对象。 MobX 在每个内部对象或值上递归地执行它,所以这就是 observableObj.status2observableObj.status 不相等的原因。它们是从同一个“蓝图”对象创建的,但每个都是独立的副本,如果我可以这样说的话。

原来status还是regular object,status2observableObj里面变成了observable object。希望它有意义。

你可以做的就是让 status 可以被它自己观察到,然后再将它传递到 obj,就像这样:

const status = observable({ id: "some-obj" });

const obj = {
  status,
  status2: status
};

const observableObj = observable(obj);

observableObj.status2 === observableObj.status // => true

这样 Mobx 就不会对它做任何事情,因为它已经是 observable

Codesandbox:https://codesandbox.io/s/httpsWhosebugcomquestions64032286-rxj5m?file=/index.js