Javascript React Native-VirtualizedList：您有一个更新缓慢的大型列表 介绍

我的VirtualizedList（无限卷轴）存在严重的性能问题。。。我一直在跟踪改进，但仍然工作得很慢

当我向下滚动时，UI线程从60fps到30fps，JS线程从60fps到10/20fps（有时到0fps）。在iOS（iPhone 6）上，它似乎比我的Android（三星Galaxy S8+）更流畅

我的VirtualizedList正在呈现具有不同高度的项目，它在到达终点时获取数据。我的项目是从React.PureComponent扩展而来的，建议：

VirtualizedList：您有一个更新缓慢的大型列表-请确保renderItem函数呈现符合React性能最佳实践（如PureComponent、shouldComponentUpdate等）的组件。对象{ “内容长度”：20720， “dt”：532， “prevDt”：2933， }

当我向下滚动大约20个项目时，就会出现这个问题

代码 以下是VirtualizedList的代码：

const keyExtractor = ({ id }) => id;
...
 
getItem = (data, index) => data[index];

getItemCount = (data) => data.length;

renderItem = ({ item, index }) => {
 const {
   images,
   dimensions,
   description,
   location,
   likes,
   comments,
   date,
 } = item;

 return (
   <Card
     images={images}
     postDimensions={dimensions}
     description={description}
     location={location}
     likes={likes}
     comments={comments}
     date={date}
   />
 );
};

<VirtualizedList
    data={data}
    getItem={this.getItem}
    getItemCount={this.getItemCount}
    keyExtractor={keyExtractor}
    listKey={listKey}
    legacyImplementation={false}
    numColumns={1}
    renderItem={this.renderItem}
    initialNumToRender={MAX_POSTS_TO_RETRIEVE_LENGTH} // 10
    windowSize={32}
    maxToRenderPerBatch={15}
    updateCellsBatchingPeriod={50}
    removeClippedSubviews={false}
    ListFooterComponent={this.renderFooter}
    ListEmptyComponent={ListEmptyComponent}
    onEndReached={onEndReached}
    onEndReachedThreshold={0.5}
/>

有什么想法吗？我已经看到这是一个常见的问题，但我还没有找到任何解决办法

更新 要解决getItemLayout带来的问题，只需执行以下操作：

getItemLayout = (data, index) => {
  const length = this.itemHeights[index] || 0; // <----- if undefined return 0
  const offset = this.itemHeights.slice(0,index).reduce((a, c) => a + c, 0)
  return {length, offset, index}
}

getItemLayout=（数据，索引）=>{
const length=this.itemHeights[index]| | 0；//a+c，0）
返回{length，offset，index}
}

如果这发生在某人身上，只需使用我的自定义getItemLayout函数并遵循以下步骤

使用这些价值观对我很有用

    initialNumToRender={10}
    windowSize={5}
    maxToRenderPerBatch={5}
    updateCellsBatchingPeriod={30}
    removeClippedSubviews={false}
    ...
    onEndReachedThreshold={0.1}

---

Pd：我的视口中有1.5个项目

请尝试对图像进行注释，看看这是否是渲染速度慢的原因。这不是你的问题，但你会知道问题的根源是什么。你评论这些图片是什么意思？用另一个替换/注释卡组件？？不是整个卡组件，而是仅使用的标签。这样，您将拥有没有图像的列表。如果性能提高了，你就会知道是图像导致了问题是的，似乎问题出在图像上。。。当我删除这个标记时，滚动时UI线程的最小值是50fps，JS线程的最小值也是50fps。我还了解到，图像会导致项目在离开视口时被删除。。。也许这是因为我从我的设备缓存中获取图像（渲染时缓存了图像）…我为你感到高兴。谢谢你的更新。

    initialNumToRender={10}
    windowSize={5}
    maxToRenderPerBatch={5}
    updateCellsBatchingPeriod={30}
    removeClippedSubviews={false}
    ...
    onEndReachedThreshold={0.1}