如何通过虚拟化提高React tanstack表的滚动性能？

Question

我们的应用程序遇到了一个大问题，表中的每一行渲染都会增加很高的开销，并会阻塞 JS 主线程的长任务，使应用程序感觉过于缓慢和迟缓。我们使用带有 Tanstack virtual 的虚拟化表，大约有 10 列。

我们的单元格在逻辑上无论如何都不复杂，但每个单元格确实有一些自定义组件，其中可能包括下拉列表和工具提示，并且可能会产生一些嵌套节点。我创建了一个示例，模拟我们快速向下和向上滚动时所得到的行为https://codesandbox.io/p/devbox/zen-smoke-r4vtgj.

关于如何提高性能有什么想法吗？

删除“复杂”单元确实可以解决问题，但这不是我正在寻找的解决方案。有没有办法优化这些行渲染，以便它们不占用太多的处理能力？

Answer 1

我找到了一个简单的解决方案（复杂的组件渲染问题），至少在我的情况下，我的页面出现了过多的空白，因为我在滚动时加载了缓慢的组件等。

通过在超时时将行渲染为非复杂的加载状态（即骨架）解决了主要的消隐问题。可能有一个更优雅的解决方案，但这可能对您有帮助。

例如你会做这样的事情

const MyLaggyComponent = () => {
  const [isLoading, setIsLoading] = useState(true);
  setTimeout(() => setIsLoading(false), 500);
  return isLoading ? (<SomeSpinner/>) : (<> My laggy component stuff here</>
}