React Redux 处理大型嵌套树更新

Question

首先，我绝对是 redux 的新手。在我们的项目中，我们有一个非常大的可编辑树表，它是从一个大的、深度嵌套的树创建的。该表包含大约 (x, y) 15x250 = 3700 个单元格（其中大多数单元格在用户展开整个树形表之前不可见）。我想知道哪种方式最适合在 React Redux 中实现。

\n

附加信息：如果编辑 [0, n] 处的值（最坏情况），则所有值 \xe2\x80\x8b\xe2\x80\x8b 都会更改，并且必须重新渲染。平均而言，每次用户输入，n 个值 \xe2\x80\x8b\xe2\x80\x8b 会发生变化。

\n

我为三个问题而苦苦挣扎：

\n

\n
1. 状态结构 - 是否值得对树进行标准化（和/或扁平化）？
\n
2. 状态更新 - 应该立即更新整个树，还是更新每个值（可能使用 redux 批处理）更明智？
\n
3. 这是否有意义，或者我们应该在服务器端进行所有计算，然后用新树渲染整个表？
\n

\n

Answer 1

我是 Redux 维护者。

我们特别建议在适当的情况下标准化复杂/嵌套状态。结合将项目 ID 作为 props 传递给子级以及让他们从 store 中读取自己的单独值等技术，将帮助您提高应用程序中的渲染性能。

第二个问题有多个可能的答案，我需要查看一些具体示例来说明您正在尝试运行哪种更新逻辑。一般来说，我们建议将操作建模为“事件”，而不是“设置器”，并最大限度地减少您分派的操作数量。

我特别推荐使用我们的官方 Redux Toolkit 包。这是我们推荐的编写 Redux 逻辑的方法，并且包含一个createEntityAdapter可以帮助管理存储中规范化数据的API 。

我们刚刚发布了全新的“Redux Essentials”核心文档教程，教授“如何以正确的方式使用 Redux”，使用我们最新推荐的 API 和实践，例如 Redux Toolkit 和 React-Redux hooks API。

最后，您可能想通读几年前编写的幻灯片High Performance Redux ，但其中的基本原则仍然适用。