javascript - MobX:避免在 View 中未使用对象键时触发重新渲染

Question

我有一个可观察对象列表:

[
    {
        key1: "x",
        updateTs: "y"
    },

    ...
]

用户可以通过 UI 改变这些对象。

这些更改会发送到远程服务器，一旦请求返回，“updateTs”就会更新。

问题是在线时，这会导致双重渲染:

1. 从 UI 进行初始编辑。

2. 当远程请求返回并编辑updateTs时。

在我看来，我没有使用 updateTs，只有它的同级键(key1).

MobX @observer 跟踪对对象的读取，因此它会触发重新渲染。

这会导致 UI 卡顿，因为它会消耗 JS CPU 时间来重新计算虚拟 dom 并对其进行比较(列表非常大)。

是否可以避免第二次重新渲染？

Answer 1

为了避免“卡顿”，让你的 Mobx 组件尽可能小。例如，创建带有“key”子组件和“ts”子组件的“item”组件(并使两个子组件都成为observer)。然后 Mobx 应该只会导致子组件更新，并且因为每个子组件只关心一个属性，所以编辑一个不应该影响另一个。

不过，您必须将整个“项目”observable 传递给组件(作为 prop)，这样 Mobx 才能正确跟踪它。此外，请确保项目集合和值的更新到位，并且不要重新创建对象。

您是正确的，读取属性会导致 Mobx 跟踪该属性的更改。因此，如果您不希望组件重新呈现，则不得更改您从该组件中读取的任何内容。但是，作为 observer 的子组件会在单独的上下文中跟踪 Mobx 属性。因此，如果您在子观察者组件中读取某些内容但在父组件中未读取，则 Mobx 不会更新父组件。

另请参阅:Optimizing Mobx for React