React Redux重新整理单个对象属性更改列表

我在包含多个对象的存储中创建了一个列表（immutable.js）。该列表以包含行的表的形式显示在组件中。这些行是显示单个对象的子组件。这些对象的一个属性应该是可编辑的。所以onChange（）我派遣一个动作，它应该改变那个特定对象的属性。因为我们永远不会改变状态，所以我只返回一个全新的列表，只改变单个对象。但是因为整个列表是一个新的列表对象，所以表格组件每更改一次都会更新一次。这导致了一个非常缓慢的工作应用程序。React Redux重新整理单个对象属性更改列表

我刚刚看了官方todo app example，并用Perf插件检查了它。意识到他们也会在每次变更时重新列出整个待办事项列表（标记为已完成，未标记）。我该如何解决这个问题？

来源

2016-08-04 Marc

你的意思是“重建所有的DOM”或调用“渲染”方法？第二种情况是正常的，但virtualDOM知道他将退回的DOM元素 –

请显示您的代码。如果我们能看到你是如何做到这一点的话，帮助会容易得多。 – ajmajmajma

影响列表呈现性能的最大因素是繁重的渲染周期和昂贵的DOM变化。确保您的列表项在重新呈现时尽可能高效。如果做得好，这将会产生很大的变化。

你有几个简单的选项。

将你的行分成他们自己的组件（如果尚未完成的话）并优化渲染和更新周期。
使用类库如react-virtualized来帮助列表/表/网格性能。

来源

2016-08-04 12:42:29 nsmarks

我的行是自己的组件，并且'@ connect'ed给商店。但Perf告诉我，connect（rowComponent）“组件”被重新渲染了x次，因此被浪费了。 – Marc

@Marc您需要优化这些组件的渲染周期以缩短更新周期。看看https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate – nsmarks

我知道，但我应该如何比较它们？父组件（表）由于列表现在是另一个对象而重新显示。而且，如果表格会自行重新显示，那么connect（rowComponent）也会重新显示。 rowComponent不会重新渲染，但connect（rowcomponent）和应用程序真的很滞后 – Marc

React Redux重新整理单个对象属性更改列表

回答

相关问题