React Native 大量数据影响性能

6ju8rftf  于 2023-01-02  发布在  React
关注(0)|答案(1)|浏览(124)

我有一个巨大的数据列表,我想在转换时发送到另一个屏幕,但我遇到的问题是性能问题。像我转换时,它需要大约2-3秒的响应时间传输,它不是很响应。
下面是我的代码设置:

const PopularNow = (props) => {

return (
   <FlatList
        data={props.data}
        keyExtractor={item => item.id.toString()} //id.toString()
        horizontal
        showsHorizontalScrollIndicator={false}
        style={{paddingLeft: 10}}
        ItemSeparatorComponent={() => <ItemSeparator width={20} />}
        ListHeaderComponent={() => <ItemSeparator width={20} />}
        ListFooterComponent={() => <ItemSeparator width={50} />}
        renderItem={({item}) => {

  if (item.cover.image_id) {
            
            return (
              <TouchableOpacity
                activeOpacity={0.7}
                onPress={() =>
                  props.navigation.push('GamePreview', {
                    gameName: item.name,
                    gameCover: item.cover.image_id,
                    gameReleased: item.first_release_date,
                    total_Rating: item.total_rating,
                    gamePlatforms: item.platforms,
                    gameSummary: item.summary,
                    similarGames: item.similar_games,
                    Screenshot: item.screenshots,
                    Videos: item.videos,
             ====>  involveCompanies: item.involved_companies,
                    gameGenres: item.genres,
                    artworks: item.artworks,
                    age_Rating: item.age_ratings,
                    age_Rating_Description: item.age_ratings,
                    gameModes: item.game_modes,
                    multiplayerModes: item.multiplayer_modes,
                    playerPerspectives: item.player_perspectives,
                    gameEngine: item.game_engines,
                    gameSeries: item.collection,
                    gameDLC: item.dlcs,
                  })
                }>
                <Image
                  resizeMode="cover"
                  style={styles.containerGames}
                  source={{uri: getImage(item.cover.image_id)}}
                />
              </TouchableOpacity>
            );
          }
        }}
      />
   }
)

involved_companies是什么使屏幕转换非常缓慢,因为我从API调用的公司的数量。当我注解出这个性能是非常响应。我想知道是否有一个替代方案,以提高性能与大量的数据。

c9qzyr3d

c9qzyr3d1#

我建议不要把整个数据传递到下一个屏幕。列表应该只显示它需要显示的内容 (基于您的设计)
您所需要的只是传递id,因此在GamePreview屏幕中将不得不调用另一个API来获取游戏预览细节。
通过这样做,你的GamePreview屏幕是可深入链接的,因为你可以允许用户分享游戏预览细节链接。如果使用当前的方式,你的链接必须包含所有的参数,这是不可能的,因为一些属性是对象。
它应该可以减少不必要的数据量。如果它仍然不适合你的情况,你可以试试这个可怕的库flash-list

相关问题