Question

由于某种原因，当在React Native中使用FlatList时，我的iOS模拟器在滚动列表时开始出现波动，滚动时显示CPU使用率增加了约20％。这会在速度较慢的设备（包括Android和iOS（尤其是Android））上引起问题。

我尝试了一些没有太大变化的优化技巧。我添加了一个shouldComponentUpdate函数，该函数为列表中的每个组件返回false。我已经删除了对在render（）中作为prop传递的函数的任何调用，并且我首先切换为使用FlatList（以前，这只是呈现组件的数组的.map）。

使用FlatList的组件的render（）

    <View style={{ flexDirection: 'row', flexWrap: 'wrap', backgroundColor: 'white' }}>
        <FlatList
          style={{ flexDirection: 'row', flexWrap: 'wrap', backgroundColor: 'white' }}
          data={this.props.items}
          numColumns={2}
          windowSize={3}
          renderItem={({ item }) => (<ItemListRow
            goToItemOverride={this.goToItemOverride}
            item={item}
            navigator={this.props.navigator}
            category={this.props.category}
          />)}
        />
      </View>

renderItem组件的render（）

    <Card
        style={this.styles.itemCard}
      >
        <View style={{ paddingTop: 0, paddingBottom: 0 }}>
          <View style={{ alignItems: 'center' }}>
            <TouchableOpacity style={{ height: 275 }} onPress={() => this.goToItemDetails(this.props.item)}>
              {this.state.loading ? <View style={{ position: 'absolute', left: 0, top: 0 }} >{this.defaultImage()}</View> : null }
              {this.image(this.styles.categoryimg, this.props.item.image.src)}
            </TouchableOpacity>
          </View>
        </View>
        <View>
          <View style={{ textAlign: 'center' }}>
            <Text style={{ textAlign: 'center', fontSize: 18 }} numberOfLines={3}>{this.props.item.title}</Text>
            {
              (this.props.item.compare_at_price) ?
                <View style={{ height: 20, alignItems: 'flex-end', flexDirection: 'row' }}>
                  <Text style={this.styles.itemPrice}>
                    ${this.props.item.price}
                  </Text>
                  <Text style={this.styles.strikethrough}>
                    ${this.props.item.compare_at_price}
                  </Text>
                </View>
                :
                <Text style={this.styles.itemPrice}>${this.props.item.price}</Text>
            }
          </View>
        </View>
      </Card>

我觉得这是所有考虑因素都非常简单的列表，所以我不确定减速可能发生在哪里。我尝试从列表元素中删除图像（认为图像可能太大），但是没有明显的区别。此列表中的最大商品数约为30，所以这与我要在此处呈现整个商店的商品价值不一样。

任何建议将不胜感激。

Answer 1

我对FlatList的性能也有疑问。我尝试了所有可能找到的修复程序，但最终我放弃了，转而使用recyclerlistview。使用起来比较复杂，并且每个项目都需要一个固定的高度，但是这样做对于提高性能是值得的。

如果您不使用Expo，也可以尝试react-native-largelist。

Answer 2

尝试检查图像的尺寸，尺寸为3000x3000的500kb尺寸的图像会因调整大小而导致速度变慢

滚动时的内存使用量激增（React Native FlatList）

2 个答案: