选择并取消选择列表性能问题中的多个项目

Question

在平面列表中显示200多个图像，并让用户通过单击图像来选择或取消选择。因此，当用户点击图像时，需要在图像上显示复选框图标。类似地，当用户取消选择所选图像时，需要删除图标。我得到了两个数组images[]和selectedImagesId[]每当用户选择图像时，图像id都会被推送到selectedImagesId数组中。顺便说一句，如果渲染图像id在selectedImagesId中可用，我将显示图标。这里的问题是，显示或删除图标需要很长时间。

<FlatList
data={props.images}
extraData={selectedImagesId}
initialNumToRender={10}
refreshing={true}
removeClippedSubviews={true}
maxToRenderPerBatch={1}
windowSize={7}
showsVerticalScrollIndicator={false}
numColumns={3}
keyExtractor={(item) => item.id.toString()}
renderItem={(itemData) => <RenderData itemData={itemData} />}
>

const RenderData = ({ itemData }) => (
<View>
<TouchableOpacity
activeOpacity={0.8}
style={{
width: width / 3.5,
height: height / 7,
padding: 2,
}}
onPress={() => {
console.log('pressed');
if (props.selectedImages.includes(itemData.item.uri)) {
const index = props.selectedImages.indexOf(itemData.item.uri);
if (index > -1) {
props.removeImageandId(index, itemData.item.id);
}
} else {
props.selectImageandId(itemData.item.uri, itemData.item.id);
}
}}>
<Image
style={{ width: '100%', height: '100%' }}
source={{
uri: itemData.item.uri,
}}
/>
{selectedImagesId.includes(itemData.item.id) && (
<AntDesign
name='checkcircle'
size={24}
color='white'
style={{ position: 'absolute', bottom: 5, right: 15 }}
/>
)}
</TouchableOpacity>
<Text style={{ backgroundColor: 'red', fontSize: 25 }}>
{render.current++}
</Text>
</View>
);

Answer 1

您可以参考本文

它将指导您如何仅渲染更改的特定选定组件。而不是Whole flatList组件。

因此，基于"仅选定特定组件"可以删除图标。不是整个flatList重新渲染。