是否可以针对原子状态更改优化 redux 过度渲染？

Question

我正在开发一个复杂的 react/redux/@reduxjs/toolkit 应用程序，它有许多嵌套的（相互上的）反应功能组件（我正在使用钩子，我正在新的 redux)

我注意到对于最小/原子数据更新，这些嵌套组件的渲染量过多。 例如，我有一个网格，其中有许多列和行。网格模型（数据） 是其每一行的一种数组：

[
 {rowId:'001', values:{col1Id:val1, col2Id:val2, col3Id:val3}},
 {rowId:'002', values:{col1Id:val4, col2Id:val5, col3Id:val6}}
]

当我更新我的网格单元格值之一时，整个网格组件因此呈现多次！我使用的网格是第三方组件，在使用时需要更高的稳定性。由于这些多次渲染，我现在遇到了一些功能问题。

为了尝试更好地理解 redux 行为，我制作了 this codesandbox（基于 @reduxjs/toolkit's todo example）

当一个待办事项标签被编辑时，我还注意到整个 TodoList 也被渲染（参见控制台上的日志，如 this screenshot ）

在我的应用程序中，我尝试使用 react memo 钩子来减少我的网格组件的渲染次数（与 shouldComponentUpdate react 生命周期方法相同），但它不起作用似乎我的应用程序中的整个雇佣关系也被渲染（它的父级也被重新渲染）

我想知道为什么不仅仅是相关组件在渲染（如果只有网格渲染而不是它的任何祖先，memo 将工作）。如果只有一个单元格值发生变化，为什么至少只有网格组件呈现而不是其他任何东西？！有没有办法优化这些渲染？

Answer 1

是的，通过分别存储 id 数组（呈现 TodoList 所需）和实际值（ListItem 所需）。

教程章节 Performance and Normalizing Data 深入探讨了该主题。