javascript - React 16.8.5 处理大量数据集时出现性能问题

Question

我有一个表格，其单元格是可选的(使用 react-selectable-fast )。有 15000 行，每行有 30 个可选单元格。我在重新渲染时遇到了一个奇怪的问题。重新渲染组件需要更长的时间。

以下是相同的代码沙箱链接:https://codesandbox.io/s/unruffled-vaughan-vnox7

问题是，当我删除 setState 方法时，它会按预期工作，因为没有重新渲染。但是，由于需要在父组件中捕获单元格上的事件才能在页面的其他形式中进行更改(在代码沙箱中不可用)，所以我需要更新组件的状态，然后页面是显示所选单元格需要比平时更长的时间。

可以在这里看到故障:https://vnox7.csb.app/

我在这里做错了什么吗？

Answer 1

React designed to be fast but can become very slow.

为什么？

问题#1 - 在任何地方使用函数组件。

函数组件的问题是每次父渲染时它都会渲染。因此，如果您在功能组件内进行一些繁重的计算(并且确实如此)，您将会很困难。即使重新计算后 DOM 不会更新(因为影子 DOM 检查)，您仍然需要计算所有内容以进行比较。

看这里:

const getRows = number => { 
   *heavy calculation*
}

这里:

 <table border="1">
        <thead>
          <tr>{getHead()}</tr>
        </thead>
        <tbody>{getRows(1500)}</tbody>
      </table>

每个渲染都会进行相同的计算，但实际上并不需要。

如何修复: - 将功能组件更改为纯组件。 (或者在功能组件上使用react.memo)

问题 #2 - 分配垃圾(请原谅我用词如此强烈，但这是事实)

onSelectionFinish={selected => {
        console.time("EEEE");
        console.log("Selection Started");
        onSelect(selected);
      }}
      ignoreList={[".name-col", ".h-col", ".s-col", ".u-col", ".v-col"]}

在这里，在每个渲染上，您创建一个新数组和新处理程序。这将增加内存使用量和垃圾收集器的工作。通常，这不是问题，但如果您的组件经常渲染，这将成为问题。或者，如果您像在 getRows() 中那样分配大量对象。值得一提的是，收集垃圾将完全停止您的应用程序。

解决方法: - 尽可能预先计算所有内容并使用结果而不是即时计算。这将为您节省大量 CPU 时间。

希望这有帮助!

更新正如@YashJoshi 提到的，

windowing technique may help here greatly

要获取更多信息，请查看here