MobX:避免在视图中不使用对象键时触发重呈现。
MobX:避免在视图中不使用对象键时触发重呈现。
提问于 2019-06-04 12:12:30
我有一张可以观察到的物体清单：
[
{
key1: "x",
updateTs: "y"
},
...
]用户可以通过UI修改这些对象。
这些更改被发送到远程服务器，一旦请求返回，"updateTs“就会被更新。
问题是，当联机时，这会导致双重呈现：
- 用户界面中的初始编辑。
- 当远程请求返回并编辑
updateTs时。
在我看来，我不是在使用updateTs，而是使用它的同级密钥(key1)。
MobX @observer跟踪对对象的读取，因此触发重呈现。
这会导致UI jank，因为它会消耗JS CPU时间来重新计算虚拟dom并对其进行区分(列表非常大)。
有可能避免第二次重放吗？
回答 2
Stack Overflow用户
发布于 2019-07-11 17:33:47
为了避免"jank"，使您的Mobx组件尽可能小。例如，使用"key“子组件和"ts”子组件创建"item“组件(并使两个子组件都为observer)。然后，Mobx应该只导致子组件更新，而且因为每个子组件只关心一个属性，所以编辑一个不应该影响另一个属性。
但是，您必须将整个"item“observable传递给组件(作为支柱)，以便Mobx能够正确地跟踪它。另外，确保对项集合和值的更新已经到位，并且不要重新创建对象。
正确的是，读取属性会导致Mobx跟踪该属性的更改。因此，如果不希望组件重新呈现，则不能更改在该组件中读取的任何内容。但是，作为observer的子组件在不同的上下文中跟踪Mobx属性。因此，如果在子观察者组件中读取某些内容，而在父组件中没有读取，则Mobx将不会更新父组件。
另见：优化Mobx的反应
Stack Overflow用户
发布于 2019-06-04 13:07:18
我想你可以在这里找到答案，组件生命周期
选择一个适合您的变体: 1.使用应该组件更新2.使用PureComponent
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56443650
复制相关文章
相似问题
腾讯云开发者
