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

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

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

    ...
]

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

这些更改将发送到远程服务器，并在请求返回时更新“updateTs”。

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

从UI进行初始编辑。

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

我不在 View 中使用updateTs，仅使用其同级键
(key1)。

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

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

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

最佳答案

为了避免“麻烦”，请使您的Mobx组件尽可能小。例如，使用“键”子组件和“ts”子组件创建“item”组件(并将这两个子组件都设置为observer)。 Mobx然后仅应导致子组件更新，并且由于每个子组件仅关心一个属性，因此编辑一个子组件不应影响另一个子组件。

但是，您将必须将整个“item” observable传递给组件(作为 Prop )，以便Mobx可以正确跟踪它。另外，请确保已更新项目集合和值，并且不要重新创建对象。

您正确地理解，读取属性会使Mobx跟踪该属性的更改。因此，如果您不希望重新渲染组件，则不得更改在该组件中读取的任何内容。但是，observer的子组件在单独的上下文中跟踪Mobx属性。因此，如果您在子观察者组件中读取了某些内容，但在父组件中却没有读取，那么Mobx将不会更新父组件。

另请参阅:Optimizing Mobx for React

关于javascript - MobX:当 View 中未使用对象键时，避免触发重新渲染，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56443650/