Question

我将mobX与React和Three.js一起使用。 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。 matchStore.territories是根据可观察对象计算得出的数组：

class MatchStore {

    @observable territoriesById = {};

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

    // ...

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

mobX是否可以让我获取触发更改的数组的特定成员？

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

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

Answer 1

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

mobX可以告诉我可观察数组或对象中的哪些元素已更改吗？

1 个答案: