Я использую плоский список для отображения списка в функциональном компоненте. Я получаю примерно такое предупреждение:
Функция 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>
);
};