Recomposition — bu nima, holat o'zgarganda UI-ni qayta qurish

Jetpack Compose-da Recomposition nima

Recomposition — bu Composition-da allaqachon ishtirok etgan Composable funksiyalarining parametrlar yoki holatning yangi qiymatlari bilan qayta bajarilishi. Rekompozitsiyaning asosiy maqsadi UI daraxtini dolzarb ma'lumotlar bilan sinxronlashtirishdir, butun interfeysni noldan qurmasdan. Bir martalik Composition-dan farqli o'laroq, Recomposition ekranning ishlash muddati davomida yuzlab marta ishga tushishi mumkin.

Recomposition smart invalidation printsipi bilan ishlaydi: Compose har bir Composable funksiyasi qaysi State obyektlarini o'qishini kuzatib boradi va faqat bog'liqliklari o'zgarganlarini qayta ishga tushirish uchun belgilaydi. Bunga snapshot tizimi orqali erishiladi, u bajarish vaqtida barcha State o'qish operatsiyalarini qayd etadi va Composer bu bog'liqliklarni aniq funksiyalar bilan bog'laydi.

Tushunish muhim: rekompozitsiya ekranning darhol qayta chizilishini anglatmaydi. Compose uch fazada ishlaydi: Composition (UI tavsifini qurish), Layout (o'lchamlar va joylashuvlarni hisoblash) va Drawing (kanvasda chizish). Agar rekompozitsiyadan keyin elementlarning o'lchamlari va joylashuvi o'zgarmagan bo'lsa, Layout fazasini o'tkazib yuborish mumkin. Agar tashqi ko'rinish o'zgarmagan bo'lsa — Drawing o'tkazib yuboriladi. Uch fazali arxitektura har bir UI yangilanishining minimal narxini ta'minlaydi.

Rekompozitsiya triggerlari: funksiyalarni qayta ishga tushirishga sabab bo'ladiganlar

Rekompozitsiyaning uchta asosiy triggeri mavjud. Birinchisi — Composable funksiyasi tanasida o'qilgan State obyektining o'zgarishi. mutableStateOf yoki derivedStateOf o'z qiymatini o'zgartirganda, oldingi kompozitsiyada ushbu State-ni o'qishni ro'yxatdan o'tkazgan barcha funksiyalar qayta ishga tushirish uchun belgilanadi.

Ikkinchi trigger — parametrlarning o'zgarishi Composable funksiyasining ota funksiyasidan chaqirilishida. Agar ota funksiya yangi qiymat uzatgan bo'lsa (masalan, matn yoki raqam o'zgargan bo'lsa), bola funksiya o'z ichida State o'qimasa ham qayta ishga tushiriladi. Compose parametrlarning yangi va eski qiymatlarini equals orqali taqqoslaydi, agar ular teng bo'lsa — funksiya o'tkazib yuborilishi mumkin.

Uchinchi trigger — CompositionLocal ning o'zgarishi CompositionLocalProvider orqali. .current orqali CompositionLocal o'qiyotgan barcha funksiyalar provider o'zgarganda qayta ishga tushiriladi. Bu mexanizm MaterialTheme tomonidan ishlatiladi: mavzuning o'zgarishi (yorug'/qorong'i) MaterialTheme.colorScheme o'qiyotgan barcha komponentlarning rekompozitsiyasiga sabab bo'ladi.

@Composable
fun RecompositionDemo() {
    var counter by remember { mutableStateOf(0) }
    var text by remember { mutableStateOf("Hello") }

    Column {
        Text("Hisoblagich: $counter")  // hisoblagich o'zgarganda rekompozitsiya
        Text("Xabar: $text")    // matn o'zgarganda rekompozitsiya

        Button(onClick = { counter++ }) {
            Text("+1")
        }
        Button(onClick = { text = "Dunyo" }) {
            Text("Matnni o'zgartirish")
        }
    }
}

+1 tugmasini bosish counter-ni o'zgartiradi, bu faqat birinchi Text qatori va Column-ning o'zining rekompozitsiyasiga sabab bo'ladi. text-ni ko'rsatayotgan ikkinchi Text qatori qayta ishga tushirilmaydi. Bunday izolyatsiya — snapshot tizimining natijasidir: har bir Composable funksiyasi faqat o'zi o'qigan State obyektlari haqida biladi.

Rekompozitsiyani optimallashtirish: amaliy usullar

Rekompozitsiyani optimallashtirish to'g'ri ma'lumot tuzilmalarini tanlash bilan boshlanadi. O'zgaruvchan (mutableListOf) o'rniga o'zgarmas kolleksiyalardan (listOf, mapOf) foydalaning. Compose parametrlarni equals bilan taqqoslaydi, agar kolleksiya o'zgargan bo'lsa lekin equals true qaytargan bo'lsa — funksiya qayta ishga tushirilmaydi. O'zgaruvchan kolleksiyalar uchun elementlar darajasida o'zgarishlarni to'g'ri kuzatib boruvchi SnapshotStateList-dan foydalaning.

Ikkinchi usul — barqaror qismlarni ajratish UI-ni alohida Composable funksiyalariga. Agar ekranning bir qismi tez-tez o'zgaruvchi holatga bog'liq bo'lmasa, uni parametrlar bilan alohida funksiyaga ajratib oling. Rekompozitsiya kelganda, barqaror funksiya bir xil parametrlarni oladi, Compose ularni taqqoslaydi va bajarishni o'tkazib yuboradi. Bu, parametrlarning bir qismi o'zgargan katta funksiya tarkibida ushbu qismni qayta ishga tushirishdan ko'ra foydaliroqdir.

Uchinchi usul — LazyColumn-dagi kalitlar. LazyColumn, LazyGrid va boshqa len' konteynerlarda item uchun har doim key ko'rsating. Kalit Compose-ga ro'yxat o'zgarganda elementlarni identifikatsiya qilish imkonini beradi: qo'shish, o'chirish yoki joyini almashtirish. Kalitsiz, Compose har bir o'zgarishda ro'yxatning barcha elementlarini qayta ishga tushiradi, bu katta ro'yxatlarda sezilarli unumdorlik yo'qotilishiga olib keladi.

// Optimallashtirilgan struktura: barqaror qismlar alohida ajratilgan
@Composable
fun OptimizedScreen(items: List<Item>) {
    Column {
        Header()                         // elementlarga bog'liq emas — rekompozitsiya yo'q
        Spacer(modifier = Modifier.height(8.dp))
        LazyColumn {
            items(items, key = { it.id }) { item ->
                ItemRow(item = item)   // faqat o'zgargan elementlar uchun rekompozitsiya
            }
        }
    }
}

@Composable
fun Header() {
    Text("Elementlar ro'yxati", style = MaterialTheme.typography.headlineMedium)
}

@Composable
fun ItemRow(item: Item) {
    Text(item.title)
}

Compose-da Skipping va Stability

Skipping — Compose Composable funksiyasining bajarilishini o'tkazib yuboradigan mexanizm, agar uning barcha parametrlari o'zgarmagan bo'lsa. Skipping to'g'ri ishlashi uchun parametr turlari barqaror (stable) bo'lishi kerak. Kotlin kompilyatori quyidagilarni barqaror deb belgilaydi: primitiv turlar (Int, Float, Boolean), String, lambda funksiyalari, shuningdek barcha maydonlari barqaror va val bo'lgan sinflar.

Stability — foydalanuvchi ma'lumot sinflariga qo'shilishi mumkin bo'lgan @Stable yoki @Immutable annotatsiyasi. Agar sinf o'zgaruvchan maydon (var) o'z ichiga olsa, kompilyator uni beqaror deb hisoblaydi va Compose bunday parametrlarga ega funksiyalarni o'tkazib yubora olmaydi. Var bo'lgan sinflar uchun @Stable dan foydalaning, agar o'zgarish haqida xabarnoma snapshot tizimi orqali yuborilishiga kafolat bersangiz.

Stability ni kompilyator flagi orqali tekshirish mumkin: -P "plugin:androidx.compose.compiler.plugins.kotlin:reportsDestination=. /reports". U barcha Composable funksiyalar va ularning parametrlarining stability ko'rsatkichi bilan ro'yxatini aks ettiruvchi hisobotni generatsiya qiladi. Agar parametr beqaror bo'lsa — skipping mumkin emas va funksiya har bir ota rekompozitsiyasida qayta ishga tushiriladi.

E'tibor bering: List<String> beqaror deb hisoblanadi, chunki bu interfeys, aniq implementatsiya emas. Kotlin Collections Immutable kutubxonasidan immutableListOf() dan foydalaning yoki ro'yxatni @Stable sinfiga o'rang. Lambda har doim barqaror, chunki uning equals faqat referensiyalarni taqqoslaydi va chaqiruv joyida yangi lambda yaratilganda ota funksiya ham qayta ishga tushiriladi.

Android Studio-da rekompozitsiyalarni monitoring qilish

Rekompozitsiyalarni monitoring qilish uchun Android Studio Compose Recomposition Counts rejimi bilan Layout Inspector-ni taqdim etadi. Bu rejimda har bir Composable funksiyasi rekompozitsiyalar sonini va qayta ishga tushirish sabablarini ko'rsatadi. Bu juda tez-tez rekompozitsiya qilinadigan funksiyalarni topish va asosiy sababni aniqlash imkonini beradi — beqaror parametrlar yoki keraksiz State bog'liqliklari.

Qo'shimcha vositalar: Compose Metrics (instrumentation testlari orqali statistika yig'ish) va Recomposition Timer (har bir funksiyaning bajarilish vaqtini o'lchash). Google bu vositalarni profillash bosqichida yoqish va release versiyalarida o'chirishni tavsiya qiladi, chunki ular har bir rekompozitsiyaga 20% gacha overhead qo'shadi.

Rekompozitsiyalarni tahlil qilganda unnecessary recomposition naqshlarini qidiring: funksiya qayta ishga tushiriladi, holbuki uning chiqish UI-si o'zgarmasligi kerak. Tez-tez sabab remember siz lambdalardan foydalanish, har safar yangi lambda obyekti yaratiladi va Compose parametrni o'zgargan deb hisoblaydi. Yechim: lambdalarni barqaror tutishlar bilan remember { } ichiga o'rash.

// Yomon: har bir ota rekompozitsiyasida yangi lambda
@Composable
fun Parent() {
    Child(onClick = { doSomething() })  // har safar yangi lambda
}

// Yaxshi: remember lambdani barqarorlashtiradi
@Composable
fun Parent() {
    val onClick = remember { { doSomething() } }
    Child(onClick = onClick)  // bir xil referensiya
}