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

【问题标题】：React Virtualized - Screen going blank after scrolling a long list of itsmReact Virtualized - 滚动一长串列表后屏幕变黑
【发布时间】：2020-12-04 07:29:24
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs react-virtualized

【解决方案1】：

正如我在这个用例中检查的那样，我们不应该像在 docs 上那样在滚动时重新安装 rowRenderer 的根 div：<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>
  );
}

【讨论】：