React Virtualized -滚动一长串itsm后屏幕变为空白

Question

我正在写一长串的东西。为此，我使用了react-virtualized (https://github.com/bvaughn/react-virtualized)。但是我面临着下面的问题。

​

​

当我试着滚动到底部2秒，它是空白的，然后数据正在加载。它不是很平滑。此https://2v9j5.csb.app/是CodeSandBox链接。

Answer 1

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

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