Функция renderItem визуализирует компоненты, соответствующие лучшим практикам производительности React, например PureComponent, должны - PullRequest
Новая
       75

Функция renderItem визуализирует компоненты, соответствующие лучшим практикам производительности React, например PureComponent, должны

0 голосов
/ 07 августа 2020

Я использую плоский список для отображения списка в функциональном компоненте. Я получаю примерно такое предупреждение:

Функция renderItem отображает компоненты, соответствующие лучшим практикам производительности React, например PureComponent, shouldComponentUpdate и др. c. {"contentLength": 12880, "dt": 971, "prevDt": 884}

Я искал эту проблему в Google, я нашел решение, но в решении говорится использовать чистый компонент класса вот ссылка на этот . Но я думаю, можно ли исправить это в функциональном компоненте.

Вот как я использую плоский список 

  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>
  );
};
...