使用React进行增量渲染

时间:2017-08-27 16:04:12

标签: reactjs

我需要渲染一个非常大的表(数千行/列)。由于各种原因,我不能使用虚拟化,这是我本来不会采用的。我也不能分页。用户无需获取整个表格。

为了提高感知性能,是否可以让React以递增的方式呈现表格? E.g:

  1. 使用滚动条渲染容器。
  2. 渲染空单元格
  3. 渲染单元格内容
  4. 上述步骤当然可以更精细。关键是用户应该能够在发生时看到它们。

2 个答案:

答案 0 :(得分:0)

您可以查看SlickGrid。它的设计目的是以高效的方式处理数十万行。

答案 1 :(得分:0)

通常我会说:以块为单位服务并修复服务器,而不是客户端。但如果你的情况不可能......

也许你可以加载一个对象/数组中的所有数据并以块的形式返回它?例如,在初始页面加载请求所有数据并返回前100个项目。 React可以像往常一样在表格中呈现它。当用户点击“加载”按钮(滚动到页面末尾等等)时,加载下100个项目。渲染期间浏览器不会崩溃。

如果你想搜索数据,你肯定想使用像二叉树搜索这样的算法。只是迭代一个大数据集是非常昂贵的......

相关问题