Использование памяти становится все выше и выше во время прокрутки Flatlist, и память не освобождается при остановке прокрутки (React Native)

Question

Я использую Flatlist и SectionList в своем собственном проекте и у меня более 300 строк данных.Тем не менее, я обнаружил серьезную проблему, которая заключается в том, что при прокрутке вниз и вверх использование памяти становится все выше и выше.Как я могу решить эту проблему?Или как я могу освободить память?

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

Например,

1.Я использовал Pure.component или shouldcomponentUpdate

2.Я использовал некоторые реквизиты Flatlist и SectionList

initialNumToRender={9}
windowSize={10}
maxToRenderPerBatch={2}
removeClippedSubviews={true}
disableVirtualization={true}
getItemLayout={this.getItemLayout}
keyExtractor={(item, index) => item[0]}
extraData={this.state}

Есть ли другие решения, которые могут помочь мне решить проблемы?Большое спасибо!

Answer 1

disableVirtualization={true} в основном отключает функции виртуализации, которые предлагает FlatList, поэтому я не рекомендую его использовать, если проблема с памятью.Итак, я бы начал с удаления этого реквизита.

Затем я бы выяснил, заключается ли проблема в том, что слишком много элементов (поэтому требуется слишком много ОЗУ, чтобы сохранить их в пользовательском интерфейсе), или еслив ваших элементах есть утечка памяти (поэтому даже после того, как они удалены из пользовательского интерфейса, они по-прежнему потребляют память)

Параметр windowSize FlatList контролирует, сколько «невидимых» элементов будет сохранено.Если вы установите для windowSize значение «1», будут отображаться только видимые элементы (попробуйте это и посмотрите, что произойдет при прокрутке FlatList).Параметр windowSize со значением «21» (значение по умолчанию) будет отображать видимые элементы, а также 10 «окон» слева и справа (или сверху и снизу) видимой области.Итак, если окно измеряет, скажем, 1000px, любые элементы, которые невидимы в данный момент, но находятся на расстоянии менее 10000px от видимой области, будут визуализированы FlatList раньше времени.

Вот как я бы подошел кПроблема:

• Во-первых, я установил бы для windowSize очень большое значение (например, 100), чтобы все 300+ строк были сохранены в памяти.Вы можете открыть приложение и подождать некоторое время, пока все элементы не будут отрисованы (если у вас более 300 элементов и maxToRenderPerBatch установлен на 2, это означает, что FlatList потребуется 150+ «циклов», чтобы закончить рендеринг всего, поэтому может потребоваться некоторое времяТакже вы можете, только ради этого эксперимента, установить initialNumToRender на очень большое число (например, 1000), чтобы при отображении списка вы знали, что он уже полностью представлен. Но, скорее всего, приложение остановится на несколько секунд, прежде чем это произойдет).Как только список будет в наличии, посмотрите, сколько памяти использует ваше приложение.В этом сценарии прокрутка вверх и вниз не должна увеличивать использование памяти, потому что, ну, все уже в пользовательском интерфейсе :-).Запомните это количество памяти, поскольку оно будет вашей базовой линией.
• Во-вторых, я установил бы для windowSize наименьшее возможное число (например, 1).Теперь, когда вы откроете экран с таким огромным количеством данных, React будет отображать только то, что видно на экране.Использование памяти должно быть намного меньше, чем в предыдущем случае.Однако при прокрутке React будет непрерывно уничтожать и создавать новые элементы пользовательского интерфейса из-за ограниченного размера окна.Если чем больше вы прокручиваете, тем больше памяти используется (и она никогда не возвращается назад, даже если вы на некоторое время прекращаете прокрутку), то, вероятно, в ваших визуальных компонентах есть утечка памяти, которую необходимо исправить.Если это так, медленная прокрутка до самого конца списка и медленная прокрутка до самого верха может даже привести к увеличению объема используемой оперативной памяти, чем в первом случае.

Памятьутечки может быть трудно найти, поэтому я надеюсь, что простая настройка размера окна и нескольких других параметров даст нужные вам результаты.Если есть утечки памяти, это интересная статья, которую я недавно прочитал: https://blog.swmansion.com/hunting-js-memory-leaks-in-react-native-apps-bd73807d0fde

Кроме того, избегайте проверки использования оперативной памяти с помощью отладочных сборок: они не только используют больше памяти, но и средства отладки (такие как console.log и тому подобное) могут создавать утечки, которых на самом деле не существует в сборках релиза.