React Redux 在单个对象属性更改时重新呈现整个列表
React Redux rerenders whole list on single object attribute change
我的商店中有一个列表 (immutable.js)，其中包含多个对象。
此列表在组件中显示为带行的 table。这些行是显示单个对象的子组件。这些对象的一个属性应该是 editable。所以 onChange() 我派发了一个应该改变那个特定对象的属性的动作。因为我们永远不应该改变状态，我 return 一个只有那个单一对象改变的全新列表。但是因为整个列表是一个新的列表对象，所以 table 组件在每次更改时都会更新。这会导致应用运行非常缓慢。
我刚刚查看了官方 todo app example 并使用 Perf 插件对其进行了检查。意识到他们还会在每次更改时重新呈现整个待办事项列表（标记为已完成，取消标记）。我该如何解决？
影响列表呈现性能的最大因素是繁重的呈现周期和昂贵的 DOM 突变。确保您的列表项在重新呈现时尽可能高效。如果处理得当，将会产生很大的不同。
您有几个直接的选择。
将您的行分解成它们自己的组件（如果尚未完成）并优化渲染和更新周期。
使用 react-virtualized 等库来帮助提高 list/table/grid 性能。
我的商店中有一个列表 (immutable.js)，其中包含多个对象。 此列表在组件中显示为带行的 table。这些行是显示单个对象的子组件。这些对象的一个属性应该是 editable。所以 onChange() 我派发了一个应该改变那个特定对象的属性的动作。因为我们永远不应该改变状态，我 return 一个只有那个单一对象改变的全新列表。但是因为整个列表是一个新的列表对象，所以 table 组件在每次更改时都会更新。这会导致应用运行非常缓慢。
我刚刚查看了官方 todo app example 并使用 Perf 插件对其进行了检查。意识到他们还会在每次更改时重新呈现整个待办事项列表（标记为已完成，取消标记）。我该如何解决？
影响列表呈现性能的最大因素是繁重的呈现周期和昂贵的 DOM 突变。确保您的列表项在重新呈现时尽可能高效。如果处理得当，将会产生很大的不同。
您有几个直接的选择。
将您的行分解成它们自己的组件（如果尚未完成）并优化渲染和更新周期。
使用 react-virtualized 等库来帮助提高 list/table/grid 性能。