javascript - ReactJS 处理大量状态数据

Question

我有一个 React 应用程序需要处理大量数据。总的来说，这是一个简单的应用程序:

• 带有一些链接的标题
• 搜索栏
• 表格

问题是，根据搜索的内容...表格需要显示最多 1,000 行 x 大约 100 列。当 http 请求返回此数据并设置状态时，应用程序几乎变得不可用。在包含该数据之后更新状态的任何其他尝试要么永远持续下去，要么使浏览器崩溃。即使当我将表格限制为显示 20 行 x 100 列时，状态更新速度也会明显加快，但更新仍然很明显。

我尝试在网络上寻找一个好的解决方案，但效果不佳，因此欢迎任何想法/帮助/建议。如果 redux 有帮助，我在实现它时没有问题，我只是不想在没有返回的情况下浪费时间。

Answer 1

每当您输入内容时，您可能会重新呈现整个表格以及搜索栏。也许尝试将表放入实现 shouldComponentUpdate() 的子组件中。每当您在输入中键入字符时，表数据是否应该动态更新？这可能会很昂贵，您也可以考虑仅在用户单击输入旁边的“搜索”按钮时重新呈现表格。

不过，我建议使用React performance tools，而不是拐弯抹 Angular 地试图弄清楚这是否是渲染问题。 *。基准测试有a solid blog post它演示了 React 中的性能调试过程，但神奇之处在于 Perf.printWasted()。它将显示您花费了多少时间重新渲染渲染后相同的组件(例如，当您仅更改文本输入时的表格)。测试步骤:

1. 从控制台运行:Perf.start()
2. 输入您的输入内容，最好只需按一次键
3. 控制台:Perf.stop()
4. 控制台:Perf.printWasted()

这个方法 super 无痛，但你也可以use the Chrome profiling tools找出相同的信息。

*我刚刚发现它们在热门的 React 16 中已被弃用，但您可能仍在使用运行良好的 15.x 变体。

此外，为 react 虚拟化+1!它非常好，支持许多列和布局。