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

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

---

我刚刚查看了官方版本，并使用Perf插件对其进行了检查。意识到他们还会在每次更改时重新提交整个待办事项列表（标记为已完成，取消标记）。我该如何解决这个问题？

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

你有几个直截了当的选择

将行拆分为它们自己的组件（如果尚未完成），并优化渲染和更新周期

使用库（如）帮助提高列表/表格/网格性能

---

你的意思是“重建所有DOM”还是调用“render”方法？第二种情况是正常的，但是virtualDOM知道他将重新发布什么元素DOM请显示您的代码。如果我们能看到您是如何做到这一点的，我们将更容易提供帮助。我的行是自己的组件，并且连接到商店。但是Perf告诉我，connect（rowComponent）“component”被重新渲染x次，因此需要优化这些组件的渲染周期以缩短更新周期。我知道，但我应该如何比较它们？由于列表现在是另一个对象，因此父组件（表）会重新渲染自身。如果表本身重新渲染，则connect（rowComponent）也会重新渲染自身。rowComponent不会重新渲染，但是connect（rowComponent）和应用程序实际上是laggy@Marc你的第一条评论是说每一行都有一个智能组件，它有自己的@connect吗？如果是这样的话，这本身就会导致一些严重的性能问题。因为行是重复的，所以它们应该是哑组件。@Marc是的，如果你重复一个组件，它将是哑的，只需呈现你给它的道具/射击动作（如果它们需要调度，请传递它们所需的动作）。如果有100行，则不应连接100个项目，这会影响性能。您只需要智能组件和顶级连接。