在平面列表性能问题中选择和取消选择多个项目答案

【问题标题】：Select and deselect multiple Items in flatlist performance issue在平面列表性能问题中选择和取消选择多个项目
【发布时间】：2021-11-30 07:20:05
【问题描述】：

在平面列表中显示 200 多个图像，并让用户通过单击图像来选择或取消选择。因此，当用户单击图像时，需要在图像上显示对勾图标。同样，当用户在取消选中选中的图像时，需要移除图标。我有两个数组 images[] 和 selectedImagesId[]。每当用户选择图像时，图像 id 都会被推送到 selectedImagesId 数组中。顺便说一句，如果在 selectedImagesId 中呈现的图像 id 可用，我会显示图标。这里的问题是，显示或删除图标需要很长时间。

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

【问题讨论】：

标签： react-native expo

【解决方案1】：

您可以参考This article

它将指导您如何仅渲染发生变化的特定选定组件。不是整个 flatList 组件。

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

【讨论】：