FlashList首次渲染耗时远超FlatList 求助优化方案

当前表现 #

FlashList首次渲染耗时远高于FlatList：

• FlashList耗时约3秒
• FlatList仅耗时300毫秒

预期表现 #

FlashList首次渲染耗时应与FlatList相近。切换为FlatList时仅需将FlashList替换为FlatList，并移除estimatedItemSize和estimatedListSize属性。

复现步骤 #

以下为复现代码：

import React from 'react';
import { Dimensions, FlatList } from 'react-native';
import { NewCarCard } from 'features/cars/new-cars/new-car-card';
import { Line } from 'ui/dividers/line';
import { useNewCars } from 'features/cars/new-cars/hooks/use-new-cars';
import { NewCarsVerticalListShimmer } from 'features/cars/new-cars/shimmers/new-cars-vertical-list.shimmer';

const deviceWidth = Dimensions.get('window').width;
const deviceHeight = Dimensions.get('window').height;

interface Props {
  onPress: () => void;
  scrollEnabled: boolean;
}

export function NewCarsVerticalList(props: Props) {
  const { data, hasNextPage, fetchNextPage, isFetchingNextPage } = useNewCars();
  const newCarsFlatted = data?.pages.map(page => page.data.data.items).flat();
  const loadNext = React.useCallback(() => {
    if (hasNextPage && !isFetchingNextPage) {
      fetchNextPage();
    }
  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);

  const renderItem = ({ item }) => {
    return (
      <React.Fragment>
        <NewCarCard newCar={item} onPress={props.onPress} />
        <Line />
      </React.Fragment>
    );
  };
  const renderListFooter = () => {
    if (isFetchingNextPage) {
      return (
        // Show shimmer when isFetchingNextPage is true
        <>
          <NewCarsVerticalListShimmer />
          <NewCarsVerticalListShimmer />
        </>
      );
    }
    return null;
  };

  return (
    <FlashList
      scrollEnabled={props.scrollEnabled || false}
      data={newCarsFlatted}
      showsVerticalScrollIndicator={false}
      estimatedItemSize={deviceHeight * 0.45}
      estimatedListSize={{
        height: deviceHeight * 0.45 * newCarsFlatted.length,
        width: Dimensions.get('screen').width,
      }}
      renderItem={({ item }) => renderItem({ item })}
      keyExtractor={item => item?.id} // Make sure to use a string for the key
      onEndReached={loadNext}
      onEndReachedThreshold={0.7}
      ListFooterComponent={renderListFooter}
    />
  );
}

export default React.memo(NewCarsVerticalList);

平台 #

• iOS
• Android

环境 #

• "react-native": "0.72.3"
• "@shopify/flash-list": "^1.6.1"

内容的提问来源于stack exchange，提问作者Zero0