VirtualizedList:您有一个更新缓慢的大列表 [英] VirtualizedList: You have a large list that is slow to update

问题描述

我使用 FlatList 处理大量项目.我从 Expo XDE 收到以下提醒.

I use FlatList with large number of items. I get following alert from Expo XDE.

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

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 的性能很好.

I used some optimization approaches to my FlatList for example PureComponent, but I still get this alert. Before I will describe my optimizations, could you tell me if this alert appears always even though FlatList is optimized? Or maybe it indicated actual issues with performance? I ask because performance of my FlatList is good.

推荐答案

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

I was previously seeing this error. After optimizing my code, I no longer see it. I figured out the problem by adding console.log() statement to the render() function of the Component that creates the FlatList, and the function that renders each item in the List. I noticed that my code was previously re-rendering the entire FlatList and all its items whenever there's a state change to any component on that page (even a component that's not related to the FlatList). I fixed this by converting various components to PureComponents. Here's what my FlatList declaration looks like:

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

请注意，我返回的是纯组件 :

Notice that I'm returning <Post /> which is a pure component:

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

  render() { ... }
}

这确保 FlatList 仅在帖子更改时重新渲染.当我之前将一个普通函数传递给 renderItem 时，即一个执行以下操作的函数:

This ensures that the FlatList re-renders a only if the post changes. When I was previously passing a normal function to renderItem i.e., a function that does something like this:

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

我注意到，每当任何项目发生变化时，FlatList 都会重新渲染所有项目.现在，通过使用 PureComponent，FlatList 仅呈现添加到列表中的新项目(如果列表已被显示).

I noticed that the FlatList was re-rendering all items whenever any item changed. Now, by using a PureComponent, the FlatList only renders the new item added to the list (if the list is already being displayed).

第一次渲染整个列表仍然需要相对较长的时间.但是，initialNumToRender 确保屏幕几乎立即被填满(而其余项目在后台渲染).更重要的是，在初始渲染之后，FlatList 一次只需要渲染一个项目(更改的项目).

It still takes relative long to render the entire list the first time. However, initialNumToRender ensures that the screen is filled up pretty much instantaneously (while the remain items get rendered in the background). And more importantly, after that initial rendering, the FlatList only ever has to render one item at a time (the item that changes).

我发现这篇文章很有帮助).

我刚刚意识到这也在这里

这篇关于VirtualizedList:您有一个更新缓慢的大列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！