ReactJS处理状态很多的数据

Question

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

• 头有几个环节
• 搜索栏
• 表

美中不足的是，具体取决于正在搜索什么......表需要显示多达1,000行约100列。当http请求返回这个数据并设置状态时，应用程序几乎变得不可用。在包含该数据之后，任何其他更新状态的尝试都会导致永久性或崩溃浏览器。即使当我将表格限制为显示20行x 100列时，状态更新速度也显着加快，但仍然可以更新。

我试图在网上找到一个很好的解决方案，并提出了很短的任何想法/帮助/建议，欢迎。如果REDX有帮助，我没有什么问题可以实现，如果没有回报，我只是不想浪费时间。

Answer 1

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

虽然我不推荐使用React performance tools *，但是不想在布什试图弄清楚它是否是渲染问题。 Benchling有a solid blog post，这篇文章介绍了React中的性能调试过程，但是神奇的是Perf.printWasted()。它会告诉你在渲染之后花费了多少时间重新渲染组件（例如，当你只是改变文本输入时的表格）。测试步骤：

1. 从控制台运行：Perf.start()
2. 输入您的输入，最好只有一个按键
3. 控制台：Perf.stop()
4. 控制台：Perf.printWasted()

这种方法是超无痛，但你也可以use the Chrome profiling tools找出相同的信息。 *我刚刚发现他们已经在热门的React 16中被弃用了，但是你仍然可能仍然使用15.x版本，这很好地工作。

此外，+1为反应虚拟化！它非常出色，支持许多列和布局。

Answer 2

如果我正确地理解了你，你的问题不是数据量 - 在DOM渲染中的问题。

我认为最适合您的解决方案是渲染表格的可见部分。例如尝试使用this library或类似的。