React Virtualized - 滚动一长串 itsm 后屏幕变黑

Question

我正在处理一长串项目。为此，我正在使用 react-virtualized (https://github.com/bvaughn/react-virtualized)。但我面临以下问题。

当我尝试滚动到底部 2 秒时，它是空白的，然后正在加载数据。这不是很顺利。这个 https://2v9j5.csb.app/ 是 CodeSandBox link.

Answer 1

正如我在这个用例中检查的那样，我们不应该为 rowRenderer 重新挂载根 div ：<div key={key} style={style}> 在 docs 上使用的滚动，所以这应该可以解决性能问题：

function rowRenderer({ key, index, isScrolling, style }) {
  const content = isScrolling ? (
    <div>Scrolling...</div>
  ) : (
    <ListItem idx={index} item={airports[index]} />
  );
  return (
    <div key={key} style={style}>
      {content}
    </div>
  );
}