VirtualizedList：您有一个更新缓慢的大型列表

Question

我使用带有大量项目的 FlatList。我收到来自 Expo XDE 的以下警报。

VirtualizedList：您有一个更新缓慢的大型列表 - 确保您的 renderItem 函数呈现遵循 React 性能最佳实践的组件，如 PureComponent、shouldComponentUpdate 等。 {“dt”:13861,“prevDt”:1498372326027,“contentLength”:第6624章

我对我的 FlatList 使用了一些优化方法，例如 PureComponent，但我仍然收到此警报。在我描述我的优化之前，你能告诉我即使 FlatList 已经优化，这个警报是否总是出现？或者它可能表明性能存在实际问题？我问是因为我的 FlatList 的性能很好。

原文由 Przemek Piechota 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我以前看到过这个错误。优化我的代码后，我不再看到它了。我通过将 console.log() 语句添加到创建 FlatList 的组件的 render() 函数以及呈现列表中每个项目的函数来解决问题。我注意到我的代码之前会在该页面上的任何组件（即使是与 FlatList 无关的组件）发生状态更改时重新呈现整个 FlatList 及其所有项目。我通过将各种组件转换为 PureComponents 来解决这个问题。这是我的 FlatList 声明的样子：

 <FlatList
    ref={(ref) => { this.flatListRef = ref; }}
    data={allPosts}
    initialNumToRender={7}
    renderItem={({ item }) =>
      <Post postJson={item} isGroupAdmin={isGroupAdmin} user={user} />
    }
  />

请注意，我正在返回 <Post /> 这是一个纯组件：

 import React, { PureComponent } from 'react';
class Post extends PureComponent {

  render() { ... }
}

这确保了 FlatList 仅在帖子更改时才重新呈现。当我之前将一个普通函数传递给 renderItem 时，即一个执行如下操作的函数：

 return (
  <View>
  ...
  </View>
);

我注意到 FlatList 会在任何项目更改时重新呈现所有项目。现在，通过使用 PureComponent，FlatList 仅呈现添加到列表中的新项目（如果列表已经显示）。

第一次渲染整个列表仍然需要相对较长的时间。但是， initialNumToRender 确保屏幕几乎立即填满（而其余项目在后台呈现）。更重要的是，在初始渲染之后，FlatList 一次只需要渲染一个项目（发生变化的项目）。

我发现 这篇文章 很有帮助）。

我刚刚意识到这也在 这里 解释

原文由 Kes115 发布，翻译遵循 CC BY-SA 4.0 许可协议