reactjs - 虚拟化列表 : You have a large list that is slow to update

Question

我使用 FlatList 来处理大量项目。我从 Expo XDE 收到以下警报。

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {"dt":13861,"prevDt":1498372326027,"contentLength":6624}

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

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 一次只需渲染一项(发生更改的项)。

我找到了this post很有帮助)。

我刚刚意识到这也得到了解释here