React Redux 处理大数据

Question

我目前正在研究一种读取 Excel 文件并将它们显示在 webApp 中的工具。我就像在 Excel 中一样拆分不同选项卡中的每个工作表。当切换标签时，它需要 2 秒钟。那是因为 Excel -> Json 是 8000+ 行。可能是 redux 无法处理如此庞大的 Json。

我做了一些研究，但我不知道我的任何解决方案是否可行。如果是这样，哪一个是最好的？

1. 不可变的.js
2. redux-orm
3. 多个商店（但这是“不要”）

也许有人有更好的解决方案来处理大数据。

Answer 1

Redux 不是问题

Redux 可以处理大量数据，在这种情况下应该不是问题。它更有可能是重新渲染时出现的问题。即使不在视图中的选项卡也可能在您在它们之间切换时重新渲染，为了测试这个删除额外的选项卡，直到您只有 2 个并测试在它们之间单击并查看重新渲染需要多长时间。在此处阅读文档中的性能部分。

优化

在处理大量数据时，微优化真的很有帮助。如果您使用的是容器组件、展示组件模式，那么请确保您的展示组件使用PureComponent子类。这将帮助您停止消耗内存的重新渲染。

PureComponent 的替代方案是shouldComponentUpdate，您可以指定何时发生更新/重新渲染的规则。

在 react 开发工具中有一个复选框，可让您检查组件何时重新渲染，请检查并开始在您的应用程序中移动。它会向您展示所有被触发的无意义的重新渲染。

另一种帮助优化的方法是延迟加载，“为什么屏幕只能容纳 100 条记录时显示 8000 条记录？”。这有两个效果，您不会获得不会查看的数据，也不会渲染不在屏幕上的单元格。

我希望这能让你对如何前进有一些想法，祝你好运。