Как оптимизировать производительность списка JetPack Compose?

У меня есть простая компонуемая функция, которая содержит LazyColumn:

@Composable
fun MyScreen(itemList: List<Item>) {
    LazyColumn {
        intems(itemList) {
            ...
        }
    }
}

Все отлично работает, но мой ViewState(itemList) должен измениться, когда прокрутка достигает некоторого индекса позиции. Вот почему я добавляю следующие строки в свою компонуемую функцию:

@Composable
fun MyScreen(itemList: List<Item>) {
    val lazyListState = rememberLazyListState()
    viewModel.onPositionChanged(lazyListState.firstVisibleItemIndex)
    LazyColumn(state = lazyListState) {
        intems(itemList) {
            ...
        }
    }
}

Все работает, как я и ожидал, но производительность заметно ухудшилась. Как я могу это исправить?

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
1
0
26
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Здесь у вас две проблемы:

  1. Вы читаете состояние непосредственно в Composable с помощью lazyListState.firstVisibleItemIndex, это вызывает продолжение рекомпозиции - каждый раз, когда какая-либо часть lazyListState изменяется, например. на каждый прокручиваемый пиксель.
  2. Вы делаете viewModel.onPositionChanged звонок прямо из составного. Рекомендуется делать такие вызовы из специальных функций побочных эффектов, подробнее об этом читайте в разделе мышление в сочинении и побочных эффектах документация.

В этом случае LaunchedEffect с snapshotFlow можно использовать так:

LaunchedEffect(Unit) {
    snapshotFlow { lazyListState.firstVisibleItemIndex }
        .collect(viewModel::onPositionChanged)
}

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

val firstVisibleItemIndex by remember {
    derivedStateOf {
        lazyListState.firstVisibleItemIndex
    }
}

Другие вопросы по теме