ReactNative Flatlist - Оптимизация производительности элементов Flatlist

Question

Как оптимизировать производительность Flatlist, когда у нас большие данные.

В моем списке есть изображение и текстовое описание.

Я хочу найти способ повысить производительность списка и удалить дополнительные изображения, загруженные из списка кэша, и сделать список не тяжелым .

Answer 1

Существует нечто, называемое PureComponent в реагировать нативно. Если вы создадите элемент FlatList как PureComponent, вы увидите много улучшений. Он не будет повторно отображать элементы, пока данные не были изменены.

Примерно так:

class MyListItem extends React.PureComponent {

}

Вот ссылка

Даже библиотека, предложенная Nino9612 act-native-optimized-flatlist также использует ту же концепцию, поскольку вы можете видеть код их FlatListItem

Answer 2

Компонент FlatList должен быть эффективным решением для отображения больших списков данных в вашем приложении. Он отображает только некоторые элементы в списке, в зависимости от того, какие элементы отображаются в данный момент. Тем не менее, есть несколько приемов, которые помогут сделать его быстрее / легче

1. Помогает, если ваши элементы плоского списка имеют одинаковую высоту (при условии вертикальной прокрутки плоского списка). В этом случае вы можете использовать реквизит getItemLayout, чтобы установить высоту FlatList и пропустить динамические вычисления. https://facebook.github.io/react-native/docs/flatlist#getitemlayout
2. Возможно, вы захотите попробовать использовать команду removeClippedSubviews, чтобы посмотреть, поможет ли это https://facebook.github.io/react-native/docs/flatlist#removeclippedsubviews
3. Не загружайте все свои данные одновременно, но используйте некоторую форму нумерации страниц в вызове fetch (если это возможно). Затем вы можете получить больше данных, например, с помощью onEndReached.
4. Убедитесь, что ваш FlatList обновляется только тогда, когда он должен. Я обычно использую shouldComponentUpdate в компоненте, который содержит FlatList, чтобы убедиться, что он обновляется только при изменении своих данных, а не когда какая-либо другая переменная состояния / поддержки, которая меня не волнует
5. Если ваши элементы FlatList содержат изображения, вам следует рассмотреть возможность их кэширования

Я уверен, что есть еще кое-что, что вы можете сделать, но это все от меня:)

Answer 3

Существует несколько пакетов npm, обещающих улучшить производительность стандартного списка реакции по умолчанию, например https://www.npmjs.com/package/recyclerlistview#demo или https://github.com/stoffern/react-native-optimized-flatlist. Я не проверял их, но они, кажется, улучшают общую производительность. Если вы работаете не с локальными данными, а с данными, полученными из сети, возможно, вам следует изучить нумерацию страниц, чтобы повысить скорость списка, а также (мобильное) использование данных