mobX 可以告诉我可观察数组或对象中的哪些元素发生了变化吗？

Question

我正在使用带有 React 和 Three.js 的 mobX。 Three.js 场景在 React 组件中呈现。我使用 mobX 存储在普通 React 组件和 3D 场景中呈现的信息（尽管这不是图形或 React 问题）。

要在 mobX 存储中发生相关更改时更新 ThreeJS 场景，我有一个自定义反应：

import { reaction } from 'mobx';
import { observer, inject } from 'mobx-react';
// ...

@inject('matchStore')
@observer
class MapViewport extends React.Component {

    // Update the scene when the map state changes
    reactToSceneUpdate = reaction(
        () => return this.props.matchStore.territories,
        () => this.updateScene()
    );

    // ...

当 matchStore.territories 发生变化时，该反应会正确更新场景。匹配商店。 matchStore.territories 是从可观察对象计算的数组：

class MatchStore {

    @observable territoriesById = {};

    @computed get territories() {
        return Object.values(this.territoriesById);
    }

    // ...

问题是 matchStore.territories 是一个非常大的数组，updateScene 函数必须遍历数组的每个成员以检查它是否需要图形更新。我注意到这需要一些时间并且有明显的延迟。

有没有一种方法可以让 mobX 获取触发更改的数组的特定成员？

或者，我能否在反应中使用可观察对象 (matchStore.territoriesById) 并以某种方式获取已更改对象的成员？

到目前为止，我最好的想法是在 updateScene 循环中检查的更新成员上设置一个标志（并且立即跳过不需要更新的成员），但我希望有一个更隐含的解决方案。

Answer 1

要获取有关单个数组元素更新的单独信息，请定义一个具有自己的 @observable 属性的 Territory class，并创建该 class 的实例以是数组的每个元素。为每个元素设置一个单独的反应。这样，如果它的数据发生变化，您将对与该元素相关的场景进行特定更新。

mobX 可以告诉我可观察数组或对象中的哪些元素发生了变化吗？

Can mobX tell me which elements in an observable array or object were changed?

mobx

mobx-react