Ответ 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 должен отображать только один элемент за раз (элемент, который изменяется).
Я нашел этот пост очень полезным).
Я только что понял, что это также объясняется здесь