问题描述
我正在处理一长串物品。为此,我使用了反应虚拟化(https://github.com/bvaughn/react-virtualized)。但我面临以下问题。
当我尝试滚动到底部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>
);
}