React Native TouchableOpacity 在 FlatList 中运行非常慢答案

【问题标题】：React Native TouchableOpacity running very slow in FlatListReact Native TouchableOpacity 在 FlatList 中运行非常慢
【发布时间】：2023-01-20 22:12:12
【问题描述】：

我有一个 FlatList 可以呈现来自 Spotify API 的音乐流派列表。每个项目都是一个 Text 包裹在一个 TouchableOpacity 中。我有一个 setState，其中包含我选择的流派，并且我有一个 hasSelected 函数，用于标识我是否选择了该流派。

这是我的FlatList 组件：

  <FlatList
   w="full"
   data={genres}
   numColumns={3}
   ItemSeparatorComponent={() => <View className="p-1"></View>}
   renderItem={({ item }) => (
     <TouchableOpacity
       onPress={() => setMySelect((prev) => [...prev, item])}
       className="px-2"
     >
       <Text
         className={`rounded-full border font-kanit text-center  py-0 px-3 ${
           hasSelected(item, mySelect)
             ? "bg-tertiary text-gray-100 border-transparent"
             : "text-danube-400 border-danube"
         } `}
       >
         {item}
       </Text>
     </TouchableOpacity>
   )}
 />

如果该项目被选中，它会获得背景颜色。如果未选择该项目，它只会得到一个轮廓。它工作正常，但是选择后大约需要 2 秒才能填充. 我怎样才能提高它的性能？

编辑

我的 hasSelected 函数在另一个 utils.tsx 文件中，就是这个

export const hasSelected = (item: string, mySelect: string[]) => {
  return mySelect.includes(item);
};

【问题讨论】：

你能分享一下你在哪里初始化你的hasSelected函数吗？

标签： javascript reactjs react-native expo

【解决方案1】：

希望这能够帮到你

这是live代码

const renderitem=()=>{
      return(
              <TouchableOpacity
                  onPress={() => setMySelect((prev) => [...prev, item])}
                  className="px-2"
              >
                  <Text
                    className={`rounded-full border font-kanit text-center  py-0 px-3 ${
                    hasSelected(item, mySelect)
                    ? "bg-tertiary text-gray-100 border-transparent"
                    : "text-danube-400 border-danube"
                    } `}
                  >
                  {item}
                  </Text>
              </TouchableOpacity>
            )
}

  const App=()=>{
      return(
          <FlatList
           w="full"
           data={genres}
           numColumns={3}
           ItemSeparatorComponent={() => <View className="p-1"></View>}
           renderItem={renderitem}
         />
    )
  }

【讨论】：