Jetpack Compose Academy · Lekcja

derivedStateOf i snapshotFlow

Wydajnie obliczaj i obserwuj stan pochodny

Lekcja 4 z 413 kroki

derivedStateOf i snapshotFlow to bezpłatna lekcja Jetpack Compose Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Jetpack Compose Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.

Obliczanie wartości na podstawie stanu

Czasami wartość zależy od innego stanu, na przykład przycisk jest aktywny tylko wtedy, gdy formularz jest poprawny. Odpowiedni sposób obliczania pozwala uniknąć niepotrzebnej recomposition.

Poznaj derivedStateOf

derivedStateOf tworzy stan na podstawie obliczenia. Powiadamia jego odbiorców tylko wtedy, gdy obliczony wynik rzeczywiście się zmieni, a nie przy każdej zmianie danych wejściowych.

val isValid by remember {
    derivedStateOf { name.isNotBlank() && age > 0 }
}

Odfiltrowuje nieistotne zmiany

Jeśli wiele odczytów stanu wpływa na jedną wartość logiczną, derivedStateOf często wykonuje ponowne obliczenia, ale emituje wartość tylko wtedy, gdy zmieni się z false na true lub odwrotnie. Interfejs jest odświeżany znacznie rzadziej.

Przykład przewijania

Pokazywanie przycisku przewijającego na początek dopiero po przewinięciu za element 5 to idealne zastosowanie derivedStateOf, ponieważ indeks zmienia się nieustannie.

val showButton by remember {
    derivedStateOf { listState.firstVisibleItemIndex > 5 }
}

Zawsze używaj remember

Umieść derivedStateOf wewnątrz remember, aby stan pochodny przetrwał rekompozycję. Bez remember byłby tworzony od nowa przy każdym odświeżeniu.

Poznaj snapshotFlow

snapshotFlow zamienia stan Compose na Kotlin Flow. Należy zbierać go wewnątrz efektu, aby reagować na zmiany stanu poza kompozycją.

snapshotFlow { listState.firstVisibleItemIndex }
    .collect { index -> log(index) }

Uruchamiaj go w LaunchedEffect

Ponieważ zbieranie danych jest operacją zawieszającą, snapshotFlow należy umieścić wewnątrz LaunchedEffect. Łączy on stan Compose z pracą opartą na korutynach.

LaunchedEffect(listState) {
    snapshotFlow { listState.firstVisibleItemIndex }
        .collect { save(it) }
}

Łącz z operatorami Flow

Ponieważ jest to pełnoprawny Flow, można łączyć go z operatorami takimi jak distinctUntilChanged lub debounce, aby kontrolować częstotliwość reakcji.

snapshotFlow { query }
    .debounce(300)
    .collect { search(it) }

derivedStateOf a snapshotFlow

Użyj derivedStateOf, aby dostarczyć interfejsowi obliczoną wartość, a snapshotFlow, aby przekazywać zmiany stanu do efektów ubocznych, takich jak rejestrowanie lub zapisywanie.

Unikaj naiwnych ponownych obliczeń

Bezpośredni odczyt stanu przewijania w treści powoduje rekompozycję przy każdej klatce. derivedStateOf ogranicza odświeżenia do momentów, w których zmienia się istotny wynik.

Oba narzędzia zwiększają wydajność interfejsu

Razem te narzędzia utrzymują wysoką wydajność Compose: derivedStateOf ogranicza rekompozycje, a snapshotFlow przenosi reakcje poza ścieżkę kompozycji.

Szybkie sprawdzenie

Przypomnij sobie, do czego zoptymalizowane jest każde z tych narzędzi.

Odpowiedz w interaktywnej lekcji

Podsumowanie: derivedStateOf i snapshotFlow

Świetnie! derivedStateOf wydajnie oblicza wartości interfejsu i emituje je tylko przy rzeczywistej zmianie, a snapshotFlow przesyła stan Compose do korutyn. ⚡

Bezpłatny start

Ucz się Kotlin dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 30
Lekcje: 120

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „derivedStateOf i snapshotFlow” jest bezpłatna?

Tak — pełny tekst „derivedStateOf i snapshotFlow” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Jetpack Compose Academy, przejdź na CoddyKit PRO. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „derivedStateOf i snapshotFlow”?

Wydajnie obliczaj i obserwuj stan pochodny Ćwiczysz Jetpack Compose Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Jetpack Compose Academy?

Nie wymagamy żadnego doświadczenia. Jetpack Compose Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „derivedStateOf i snapshotFlow”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Jetpack Compose Academy?

Tak. Każda lekcja Jetpack Compose Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Jetpack Compose Academy