Пики использования памяти при прокрутке (React Native FlatList) - PullRequest
Новая
       46

Пики использования памяти при прокрутке (React Native FlatList)

1 голос
/ 16 мая 2019

По какой-то причине, при использовании FlatList в React Native, мой симулятор iOS начинает пыхтеть при прокрутке списка, показывая увеличение использования процессора примерно на 20% при прокрутке. Это вызывает проблемы на более медленных устройствах, как на Android, так и на iOS (но особенно на Android).

Я попробовал несколько приемов оптимизации без особых изменений. Я добавил функцию shouldComponentUpdate, которая возвращает false для каждого компонента в списке. Я удалил все вызовы функций, которые передаются в качестве реквизитов в render (), и я вначале переключаюсь на использование FlatList (ранее это был просто .map массива, который визуализировал компоненты).

render () моего компонента, который использует FlatList 

    <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, поэтому я не пытаюсь отобразить здесь весь магазин.

Любой совет будет оценен.

Ответы [ 2 ]

0 голосов
/ 17 мая 2019

Попробуйте проверить размеры ваших изображений, изображение размером 500 КБ с размерами 3000x3000 может сильно замедлить процесс изменения размера

0 голосов
/ 16 мая 2019

У меня тоже были проблемы с производительностью FlatList. Я перепробовал все исправления, которые смог найти, но в конце концов сдался и переключился на использование recyclerlistview. Его сложнее использовать и для каждого элемента требуется статическая высота, но оно того стоит для увеличения производительности.

Если вы не используете Expo, вы также можете попробовать react-native-largelist.

...