Как слушать state в Compose

Как слушать State в Jetpack Compose

В Jetpack Compose "слушать" изменения состояния (state) — это фундаментальная концепция, обеспечивающая реактивное обновление UI. В отличие от императивного подхода, где мы явно изменяем view, Compose автоматически рекомпозирует (перерисовывает) компоненты при изменении наблюдаемых состояний. Основные механизмы слушания состояния можно разделить на несколько категорий.

1. Использование mutableStateOf и рекомпозиции

Базовый способ — создание состояния через mutableStateOf(), которое Compose отслеживает автоматически. Когда значение изменяется, происходит рекомпозиция всех читающих это состояние composable функций.

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

@Composable
fun CounterExample() {
    // Создание и запоминание состояния в композиции
    val count = remember { mutableStateOf(0) }
    
    Button(onClick = { count.value++ }) {
        // Text читает значение count.value и рекомпозируется при изменении
        Text("Clicked ${count.value} times")
    }
}

Ключевые моменты:

• remember — хранит значение во время рекомпозиции, предотвращая пересоздание.
• Изменение count.value запускает рекомпозицию CounterExample и Text.
• Для нескольких значений используйте mutableStateListOf или mutableStateMapOf.

2. StateFlow и LiveData из корутин и Android Architecture

Для интеграции с бизнес-логикой или ViewModel часто используют StateFlow (из Kotlin Coroutines) или LiveData.

Слушание StateFlow:

import androidx.lifecycle.viewmodel.compose.viewModel
import kotlinx.coroutines.flow.StateFlow

@Composable
fun StateFlowListener(viewModel: MyViewModel = viewModel()) {
    // collectAsState преобразует StateFlow в Compose State
    val uiState by viewModel.uiState.collectAsState()
    
    // UI автоматически обновляется при изменениях flow
    Text(text = uiState.message)
}

Слушание LiveData:

import androidx.compose.runtime.livedata.observeAsState

@Composable
fun LiveDataListener(viewModel: MyViewModel) {
    // observeAsState конвертирует LiveData в Compose State
    val data by viewModel.liveData.observeAsState()
    
    Text(text = data ?: "Loading")
}

3. Продвинутые паттерны: производные состояния и derivedStateOf

Когда рекомпозиция должна происходить только при конкретных изменениях (например, фильтрация списка), используйте derivedStateOf. Это создает состояние, зависящее от других, но рекомпозирующееся только при изменении результата вычислений.

import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.remember

@Composable
fun DerivedStateExample(list: List<String>) {
    val searchQuery = remember { mutableStateOf("") }
    
    // filteredList будет рекомпозироваться только при изменении результата фильтрации,
    // а не при каждом изменении списка или запроса (если результат тот же)
    val filteredList = remember(list, searchQuery.value) {
        derivedStateOf {
            list.filter { it.contains(searchQuery.value) }
        }
    }
    
    LazyColumn {
        items(filteredList.value) { item ->
            Text(item)
        }
    }
}

4. Управление побочными эффектами с LaunchedEffect и snapshotFlow

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

LaunchedEffect запускает корутин при изменении ключей:

import androidx.compose.runtime.LaunchedEffect

@Composable
fun EffectExample(state: State<String>) {
    LaunchedEffect(state.value) {
        // Эта корутина запустится при каждом изменении state.value
        performNetworkRequest(state.value)
    }
}

snapshotFlow преобразует Compose State в Flow для сложной обработки:

import androidx.compose.runtime.snapshotFlow

LaunchedEffect(state) {
    snapshotFlow { state.value }
        .distinctUntilChanged()
        .collect { value ->
            // Логируем только уникальные изменения
            log(value)
        }
}

5. Ключевые принципы и лучшие практики

• Умная рекомпозиция: Compose отслеживает только те чтения состояния, которые происходят во время исполнения composable функции. Изменение состояния вне области композиции (например, в корутине) все равно запустит рекомпозицию, если состояние правильно объявлено.
• Стабильные типы: Для оптимизации используйте стабильные типы данных в состоянии (примитивы, String, классы с аннотацией @Stable), чтобы Compose лучше понимал, когда нужно рекомпозировать.
• Избегайте дублирования: Не создавайте несколько состояний для одинаковых данных; это приведет к избыточным рекомпозициям и возможным рассинхронизациям.
• Глубина чтения: Если состояние меняется часто, но нужно реагировать только на глубокие изменения, используйте remember с ключами или derivedStateOf для контроля рекомпозиций.

Заключение

Слушание состояния в Compose — это не явные listeners, а декларативная реакция на изменения данных через механизмы mutableStateOf, StateFlow, derivedStateOf и побочные эффекты. Правильное использование этих инструментов позволяет создавать эффективный, реактивный UI с минимальным ручным управлением обновлениями, что является одной из основных преимуществ декларативного подхода Jetpack Compose.