【发布时间】：2019-07-22 13:34:56
【问题描述】：
不久前，我开始使用 react，但遇到了性能问题。
我使用 react + redux + reselect + immutable.js。我有很多数据（比如数据约为 10mb 的大表）。
我的问题是：当我有大约 10 000 行时，react 会创建 10 000 个组件，其中包含：个人 connect、memoize selector。
1 行包含约 50 个键（来自不同的商店，例如：col 高度、焦点索引）、数组等。例如键 title。
当我修改 store 时，例如在第 123 行更改 title，redux 将执行 10 000 memoize selectors，比较结果，10k 行大约需要 1-2 秒！
当我知道必须准确地重新渲染哪个组件时，如何防止connect 调用？像信号“id 为row-123 的组件必须运行memoize selector 并检查更改”或任何想法？
我计划尝试 mobx，但我不确定 mobx 是否会阻止对 10k 组件中的每一个进行不必要的数据比较。
附：已经想过分页，虚拟滚动，但是我需要将所有数据同时显示到DOM中
【问题讨论】：
-
您真的要绘制 10k 组件吗？也许使用分页？
-
@FrançoisRichard 我不会，但我必须:) 我已经考虑过分页、虚拟滚动，但我需要在 DOM 中同时显示所有数据:(
-
你为什么需要这个？谁可以同时读取 10k 行？ ://
-
@FrançoisRichard 有很多原因。例如：1）用于计算摘要滚动高度（任何行都可以包含自定义高度，带有高度的图像。2）按 F3 搜索 3）从表格按钮拖放到表格头部。 4) 多选功能，通过移动光标进行选择... x) 等... p.s.浏览器可以做到这一点，并与 DOM 一起快速工作。意思是我只受限于redux
-
@MixerOID 您可以使用分页实现所有这些功能。会好很多。对于搜索，您可以添加自定义搜索组件并将其焦点分配给 F3 或保持原样 - 它不会造成伤害
标签： reactjs redux react-redux reselect