我有一个可观察对象列表:
[
{
key1: "x",
updateTs: "y"
},
...
]
用户可以通过 UI 改变这些对象。
这些更改会发送到远程服务器,一旦请求返回,“updateTs”就会更新。
问题是在线时,这会导致双重渲染:
从 UI 进行初始编辑。
当远程请求返回并编辑
updateTs
时。
在我看来,我没有使用 updateTs
,只有它的同级键
(key1
).
MobX @observer
跟踪对对象的读取,因此它会触发重新渲染。
这会导致 UI 卡顿,因为它会消耗 JS CPU 时间来重新计算虚拟 dom 并对其进行比较(列表非常大)。
是否可以避免第二次重新渲染?
最佳答案
为了避免“卡顿”,让你的 Mobx 组件尽可能小。例如,创建带有“key”子组件和“ts”子组件的“item”组件(并使两个子组件都成为observer
)。然后 Mobx 应该只会导致子组件更新,并且因为每个子组件只关心一个属性,所以编辑一个不应该影响另一个。
不过,您必须将整个“项目”observable
传递给组件(作为 prop),这样 Mobx 才能正确跟踪它。此外,请确保项目集合和值的更新到位,并且不要重新创建对象。
您是正确的,读取属性会导致 Mobx 跟踪该属性的更改。因此,如果您不希望组件重新呈现,则不得更改您从该组件中读取的任何内容。但是,作为 observer
的子组件会在单独的上下文中跟踪 Mobx 属性。因此,如果您在子观察者组件中读取某些内容但在父组件中未读取,则 Mobx 不会更新父组件。
关于javascript - MobX:避免在 View 中未使用对象键时触发重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56443650/