VirtualizedList: у вас есть большой список, который медленно обновляется

Я использую FlatList с большим количеством элементов. Я получаю следующее предупреждение от Expo XDE.

VirtualizedList: у вас есть большой список, который медленно обновляется - make убедитесь, что ваша функция renderItem отображает компоненты, которые следуют. такие как PureComponent, shouldComponentUpdate, и т.д. { "dt": 13861, "prevDt": 1498372326027, "contentLength": 6624}

Я использовал некоторые подходы оптимизации к моему FlatList, например, PureComponent, но я все еще получаю это предупреждение. Прежде чем я опишу свои оптимизации, не могли бы вы сказать мне, будет ли это предупреждение появляться всегда, хотя FlatList оптимизирован? Или, возможно, это указывает на фактические проблемы с производительностью? Я прошу, потому что производительность моего FlatList хороша.

Ответ 1

Ранее я видел эту ошибку. После оптимизации моего кода я больше не вижу его. Я выяснил проблему, добавив оператор console.log() в функцию render() компонента, который создает FlatList, и функцию, которая отображает каждый элемент в списке. Я заметил, что мой код ранее повторно рендерил весь FlatList и все его элементы всякий раз, когда состояние изменяется на любой компонент на этой странице (даже компонент, который не связан с FlatList). Я исправил это путем преобразования различных компонентов в PureComponents. Вот как выглядит мое объявление FlatList:

<FlatList
    ref={(ref) => { this.flatListRef = ref; }}
    data={allPosts}
    initialNumToRender={7}
    renderItem={({ item }) =>
      <Post postJson={item} isGroupAdmin={isGroupAdmin} user={user} />
    }
  />

Обратите внимание, что я возвращаю <Post/> который является чистым компонентом:

import React, { PureComponent } from 'react';
class Post extends PureComponent {

  render() { ... }
}

Это обеспечивает повторную визуализацию FlatList только в случае изменения публикации. Когда я ранее передавал обычную функцию для renderItem то есть функцию, которая делает что-то вроде этого:

return (
  <View>
  ...
  </View>
);

Я заметил, что FlatList перерисовывает все элементы всякий раз, когда любой элемент изменяется. Теперь, используя PureComponent, FlatList отображает только новый элемент, добавленный в список (если список уже отображается).

Визуализация всего списка все еще занимает относительно много времени. Однако initialNumToRender гарантирует, что экран заполняется практически мгновенно (в то время как оставшиеся элементы отображаются в фоновом режиме). И что еще более важно, после этого начального рендеринга FlatList должен отображать только один элемент за раз (элемент, который изменяется).

Я нашел этот пост очень полезным).

Я только что понял, что это также объясняется здесь

Ответ 2

Также убедитесь, что вы не инкапсулируете FlatList с SourceList. Для меня это случайно оказалось, потому что я использовал native-base и не заметил, что их Component <Content> заменяет ScrollList.

Для получения дополнительной информации см. Здесь: fooobar.com/info/6776312/...