renderItem函数应呈现遵循React性能最佳实践的组件（例如PureComponent），

Question

我正在使用平面列表在功能组件中呈现列表。我收到类似这样的警告

renderItem函数呈现遵循React性能最佳实践的组件，例如PureComponent，shouldComponentUpdate等。{“ contentLength”：12880，“ dt”：971，“ prevDt”：884}

我在Google上搜索了此问题，但确实找到了一些解决方案，但该解决方案是说要使用纯类组件here is the link of this。但是我在想是否可以在功能组件中修复此问题。

这就是我使用固定列表的方式

  const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);


const handleLoadMore = () => {
    if (!loading) {
      setPageNumber((c) => c + 1);
    }
  };
  const onRefresh = () => {
    setRefreshing(true);
    setPageNumber(1);
    setRefreshing(false);
  };

  if (loading) {
    return <Loading />;
  } else {
    const y: Animated.Value = new Animated.Value(0);
    const onScroll = Animated.event([{nativeEvent: {contentOffset: {y}}}], {
      useNativeDriver: true,
    });

    return (
      <AnimatedFlatList
        scrollEventThrottle={16}
        bounces={false}
        {...{onScroll}}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }
        onEndReached={handleLoadMore}
        onEndReachedThreshold={0.4}
        keyExtractor={(item, _index: number) => item.id.toString()}
        data={photos}
        renderItem={({index, item}) => (
          <AnimatedCard {...{item, index, y, navigation}} />
        )}
      />
    );

AnimatedCard.tsx

const AnimatedCard = ({item, index, y, navigation}: AnimatedCardProps) => {
 
  const translateY = Animated.add(
    Animated.add(
      y,
      y.interpolate({
        inputRange: [0, 0.0001 + index * CARD_HEIGHT],
        outputRange: [0, -index * CARD_HEIGHT],
        extrapolateRight: 'clamp',
      }),
    ),
    position.interpolate({
      inputRange: [isBottom, isAppearing],
      outputRange: [0, -CARD_HEIGHT / 4],
      extrapolate: 'clamp',
    }),
  );

  return (
    <TouchableWithoutFeedback
      onPress={() => {
        navigation.push('Detail', {
          id: item.id,
        });
      }}>
      <Animated.View
        style={[styles.card, {opacity, transform: [{translateY}, {scale}]}]}>
        <Card
          borderRadius="xl"
          variant="elevated"
          style={{width: width - 50, height: height - 250}}>
          <Image style={styles.imageSize} source={{uri: item.src.large}} />
        </Card>
      </Animated.View>
    </TouchableWithoutFeedback>
  );
};