MobX：当视图中未使用对象键时，避免触发重新渲染

Question

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

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

    ...
]

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

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

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

1. 从用户界面进行初始编辑。

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

我在视图中没有使用updateTs，仅使用了其同级键 （key1。

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

这会导致UI混乱，因为它消耗了JS CPU时间来重新计算虚拟dom并对其进行区分（列表很大）。

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

Answer 1

为了避免出现“麻烦”，请使您的Mobx组件尽可能小。例如，使用“键”子组件和“ ts”子组件创建“项目”组件（并使两个子组件均为observer）。然后Mobx应该只导致子组件更新，并且由于每个子组件只关心一个属性，因此编辑一个子组件不会影响另一个。

不过，您将必须将整个“项目” observable传递给组件（作为道具），以便Mobx可以正确地跟踪它。另外，请确保已对项目集合和值进行了更新，并且不要重新创建对象。

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

另请参阅：Optimizing Mobx for React

Answer 2

我想您可以在这里component lifecycle

找到答案

选择适合您的一种变体： 1.使用shouldcomponentupdate 2.使用PureComponent