React Virtualized-滚动其长长的列表后屏幕变为空白

编程问答 2022-12-29

问题描述

我正在处理一长串物品。为此，我使用了反应虚拟化（https://github.com/bvaughn/react-virtualized）。但我面临以下问题。

enter image description here

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

解决方法

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

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>
  );
}
javascriptreact-virtualizedreactjsreactjs