reactjs - 如何在 MobX 中使用 @observable 装饰器定义的更改对象上添加侦听器以在 React 中使用

Question

我有一个通过“mobx-react”注入连接到 MobX 状态的 React 组件，一切正常。现在我需要知道我的对象已更改为呈现另一个界面。我认为 MobX 必须有能力在没有比较对象的情况下做到这一点，在文档中我看到 observable 和 observable 函数，但它对我不起作用。我写了一个我想要的非常简化的例子：

class Example {
  @observable
  myObject = {
    prop: 'some string',
    ...there are many properties
  }
  @observable
  myObjectWasChanged = false;
}

问题：当 myObject 更改时，我可以做些什么来将 myObjectWasChanged 设置为 true？

现在，当任何@observable 更改时，React 重新渲染组件，我没有任何问题，但是如何知道 myObject 没有比较就被更改了，（例如在 componentDidUpdate 中）

标签： reactjsobservablemobx

Answer 1

您可能可以使用observeorintercept方法。

import { observable, observe } from "mobx"

const person = observable({
    firstName: "Maarten",
    lastName: "Luther",
})

observe(person, (change) => {
    console.log(change.type, change.name, "from", change.oldValue, "to", change.object[change.name])
})

更多信息在这里：https ://mobx.js.org/refguide/observe.html