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

Question

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

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

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

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

为了尝试理解更好的 redux 行为，我制作了这个代码和框（基于@reduxjs/toolkit 的 todo 示例）

当一个待办事项标签被编辑时，我还注意到整个TodoList被渲染（请参阅控制台上的日志，如此屏幕截图所示）

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

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

Answer 1

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

教程章节性能和规范化数据深入探讨了该主题。