javascript - React Redux 处理大型嵌套树更新

Question

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

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

我面临三个问题:

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

Answer 1

我是 Redux 维护者。

We specifically recommend normalizing complex/nested state if appropriate 。结合像 passing item IDs to children as props and having them read their own individual values from the store 这样的技术，将帮助您提高应用程序中的渲染性能。

第二个问题有多个可能的答案，我需要查看一些具体示例来说明您正在尝试运行哪种更新逻辑。一般来说，我们推荐modeling actions as "events", not "setters" ，并最大限度地减少您分派(dispatch)的操作数量。

我特别推荐使用our official Redux Toolkit package 。这是我们推荐的编写 Redux 逻辑的方法，包括 a createEntityAdapter API这可以帮助管理商店中的标准化数据。

我们刚刚发布了一个全新的"Redux Essentials" core docs tutorial它教授“如何以正确的方式使用 Redux”，使用我们最新推荐的 API 和实践，例如 Redux Toolkit 和 React-Redux hooks API。

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