tabulator setData（）和setColumn（）性能

Question

我有实例化制表器表的React组件。一切正常，但存在性能问题。

我的React组件用于显示不同大小的数据集。首次创建React组件时，将通过初始table.setData（）调用来加载初始数据集。为了响应组件属性的更改，可以通过后续的table.setData（）调用来加载不同的数据集。

第一个setData（）调用很快，但是随后的setData（）调用非常慢。

这里是加载SAME数据集时性能差异的一些示例。

• [第一次通话：200ms，后续通话：1751ms
• [第一次通话：991ms，后续通话：3908ms

[请注意，在更改数据集时，我同时调用setColumns（）和setData（）。setColumns（）也有类似的性能问题。

有什么我可以“重置”表，使性能类似于初始setData（）和setColumns（）的调用吗？

我无法提供实际的源代码，但这是要点：

componentDidMount() {
  this.tableInst = new Tabulator(this.tableRef, {
    layout: "fitData",
    columns: [],
    data: [],
  });
  this.updateTableData();
}

componentDidUpdate() {
  this.updateTableData();
}

updateTableData = () => {
  // Calculate new content in tableColumns & tableData vars
  this.tableInst.setColumns(tableColumns);
  this.tableInst.setDatas(tableData);
}

非常感谢！

Answer 1

打开Chrome调试器后，我只会看到我原来的性能问题。当我关闭调试器时，表将按预期执行。这对我来说毫无意义，因为控制台中几乎没有生成任何输出。我以为我提到过，以防其他人遇到类似问题。