Рекомпозиция в Jetpack Compose и View-рендеринг на основе XML: в чем разница?

Jetpack Compose произвел революцию в UI-разработке Android благодаря своему декларативному подходу. Но его базовые механизмы, такие как рекомпозиция, могут показаться необычными тем, кто привык работать с традиционной View-системой на основе XML. Чтобы понять разницу между этими двумя подходами, выясним, как они обрабатывают рендеринг и обновления пользовательского интерфейса.

View-система на основе XML: императивность и зависимость от состояния

В традиционной View-системе Android макеты определяются в XML-файлах. Когда создается Activity или Fragment, эти XML-макеты раздуваются в дерево объектов View.

Как работает рендеринг

• Раздувание: выполняется парсинг XML-файла, и соответствующие объекты View (например, TextView, Button и т. д.) создаются и добавляются в иерархию.

• Рендеринг: система обходит эту иерархию для рендеринга пользовательского интерфейса.

• Обновления: если UI-элемент изменяется (например, обновляется текст в TextView), разработчики должны явно вызвать такие методы, как setText() или invalidate(), чтобы обновить состояние и вызвать перерисовку.

Ключевые характеристики

• Императивный характер: разработчики отвечают за управление UI-состоянием и обеспечение корректного распространения изменений.

• Дорогостоящие перерисовки: даже небольшие обновления могут вызвать перерисовку больших частей иерархии представлений.

• Управление состоянием: синхронизация UI-состояния с бизнес-логикой часто приводит к появлению сложного кода, особенно в больших приложениях.

Несмотря на свою функциональность, система на основе XML имеет ограничения в плане гибкости, производительности и продуктивности разработчиков.

Jetpack Compose: декларативность и ориентация на состояние

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

Как работает рекомпозиция

• Начальная композиция: Compose-функции вызываются для создания дерева пользовательского интерфейса на основе начального состояния.

• Рекомпозиция: когда состояние изменяется, Compose «умно» повторно вызывает только затронутые функции, чтобы обновить пользовательский интерфейс.

• Эффективная перерисовка: Compose пропускает ненужные обновления пользовательского интерфейса, фокусируясь только на том, что изменилось.

Ключевые характеристики

• Декларативный характер: пользовательский интерфейс отражает текущее состояние без явных инструкций по его обновлению.

• Эффективные обновления: Compose сводит к минимуму ненужную работу при рекомпозиции, делая обновление пользовательского интерфейса более плавным и быстрым.
  
• Упрощенное управление состоянием: переменные состояния в Compose являются реактивными и автоматически запускают рекомпозицию при их изменении.

Сравнение на практике

Сценарий использования: обновление счетчика

Во View-системе на основе XML:

<TextView  
    android:id="@+id/counterText"  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"  
    android:text="0" />  
<Button  
    android:id="@+id/incrementButton"  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"  
    android:text="Increment" />

val counterTextView = findViewById<TextView>(R.id.counterText)  
val incrementButton = findViewById<Button>(R.id.incrementButton)  
var counter = 0  
incrementButton.setOnClickListener {  
    counter++  
    counterTextView.text = counter.toString()  
}

Здесь вы будете отвечать за:

• Отслеживание и обновление счетчика.
  
• Проверку того, что в TextView отображается правильное значение.
  
• Ручное управление связью между состоянием и пользовательским интерфейсом.

В Jetpack Compose:

@Composable  
fun CounterApp() {  
    var counter by remember { mutableStateOf(0) }  
Column {  
        Text(text = "$counter")  
        Button(onClick = { counter++ }) {  
            Text("Increment")  
        }  
    }  
}

В этом примере:

• Состояние counter управляет пользовательским интерфейсом.

• Когда counter меняется, Compose автоматически перекомпонует затронутые части пользовательского интерфейса (Text-composable).

• Нет необходимости вручную обновлять Text или вызывать инвалидацию.

Почему рекомпозиция меняет правила игры

Эффективность

Compose позволяет избежать тяжелой работы по раздуванию и перерисовке представлений, пересчитывая только то, что необходимо при рекомпозиции.

Простота

С Compose управление состояниями и обновлениями пользовательского интерфейса становится гораздо более интуитивным. Это снижает когнитивную нагрузку на разработчиков.

Гибкость

Динамические обновления пользовательского интерфейса, анимацию и управляемое состоянием поведение легче реализовать в Compose, чем во View-системе на основе XML.

Когда использовать каждый из подходов

Хотя Jetpack Compose — это будущее Android-разработки, понимание View-системы на основе XML по-прежнему важно, особенно для поддержки старых кодовых баз. Однако для новых проектов или разработчиков, желающих упростить свои рабочие процессы, Compose предлагает значительные преимущества.

Переход на Compose может потребовать некоторого обучения, но преимущества с точки зрения опыта разработчиков, производительности и удобства обслуживания вполне оправдывают затраченные усилия.

Читайте также:

• Как создать анимацию кругового вытеснения в Jetpack Compose
• Компонентный подход: организация навигации с помощью библиотеки Decompose. Часть 3
• Интеграция Google Maps в приложение Jetpack Compose

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи Varun Chandran: Understanding the Difference: Jetpack Compose Recomposition vs. XML-Based View Rendering