React Redux在单个对象属性更改时重新呈现整个列表

Question

我的商店中有一个包含多个对象的列表（immutable.js）。 此列表在组件中显示为包含行的表。这些行是显示单个对象的子组件。这些对象的一个​​属性应该是可编辑的。所以onChange（）我调度一个动作，该动作应该改变那个特定对象的属性。因为我们永远不应该改变状态，所以我返回一个全新的列表，只更改了单个对象。但是因为整个列表是一个新的列表对象，所以表组件每次更改都会更新。这导致了一个非常慢的应用程序。

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

Answer 1

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

你有几个直接的选择。

1. 将您的行分成他们自己的组件（如果尚未完成）并优化渲染和更新周期。

2. 使用react-virtualized等库来帮助列表/表/网格性能。