【Android Compose】Jetpack Compose 中的重组

Android Compose Jetpack Compose 中的重组

如何检测重组：
Rebugger：

#Recomposition 是 #JetpackCompose 中的一个关键概念。这是在状态更改时自动更新 UI 的过程。这允许您创建动态和响应式 UI，而无需在每次状态更改时手动更新 UI。

重组由对 state 对象的更改触发。状态对象是可以观察和更改的对象。当状态对象发生更改时，Compose 将自动重组界面。

重组是一个强大的工具，可以帮助您创建动态且响应迅速的 UI。但是，了解重组的工作原理以便有效地使用它非常重要。

以下是有关重组的一些注意事项：

重组的成本可能很高。如果您的 UI 较大，则重构可能需要很长时间。
重组可能是不可预测的。当状态更改时，UI 的哪些部分将被重组并不总是很清楚。
重组可能很难调试。如果您在进行重组时遇到问题，则可能很难追踪问题的原因。

尽管存在这些挑战，但重组是一个强大的工具，可以帮助您创建动态且响应式的 UI。如果您使用的是 Jetpack Compose，请务必了解重组的工作原理，以便有效地使用它。

以下是有效使用重组的一些提示：

避免使用不需要的状态对象。您拥有的 state 对象越多，重组的成本就越高。
使用该函数创建派生状态对象。派生状态对象仅在其依赖项发生更改时重组。androidx.compose.runtime.derivedStateOf()
使用该函数执行不需要重组的副作用。androidx.compose.runtime.LaunchedEffect()
使用该函数缓存不需要重构的值。androidx.compose.runtime.remember()

如何检测重组：

绝对！作为 Compose 开发人员，我们最可怕的噩梦绝对是不必要的重组，用美丽的 Quote 来解释：

• Compose Devs：与重组怪物战斗！⚔️ 保持你的 UI 精简而刻薄！

让我们看看我们如何检测它并找到重组的原因。通常，有两种方法可以检测任何可组合项中的重组。

Android Studio 布局检查器：
Rebugger：
使用 Layout Inspector 检测 Compose 中的重组：

布局检查器是 Android Studio 中一款功能强大的工具，可帮助您直观呈现和调试 Jetpack Compose 布局。它可以有效地帮助您检测和了解 UI 中不必要的重组。

以下是如何利用 Layout Inspector 来实现此目的：

启用重组计数：

在 Layout Inspector 工具栏中，选中 “Show Recomposition Counts” 旁边的复选框。这将突出显示组件在组件树中其名称旁边的重组次数。

分析层次结构：

观察 UI 不同部分的重组计数。较高的数字表示频繁更新，这可能是由不必要的重组引起的。
请特别注意具有子元素的可组合项，这些可组合项会在父元素保持稳定时不必要地更新。

利用过滤：

使用过滤工具隔离 UI 的特定部分，并专注于存在疑似重组问题的区域。
按可组合项名称、状态更改甚至重组计数范围进行筛选，以查明问题区域。

分析重组细节：

右键点击可组合项，然后选择“Show Recomposition History”以了解其重组的原因。检查触发更新的状态更改及其来源。

寻找优化机会：

使用收集到的信息来确定您可以在哪些方面优化代码以减少重组频率。
考虑使用 derived state、remember 和 LaunchedEffect 等技术，以避免根据您的发现进行不必要的更新。

其他提示：

使用 Layout Inspector 中的“Profile”模式，在与应用交互时记录实时性能数据。这可以帮助您识别触发过多重组的特定用户互动。
尝试不同的重组策略，并使用 Layout Inspector 作为反馈循环来分析它们对性能的影响。

请记住，了解和优化重组是一个持续的过程。布局检查器提供了有价值的见解，但您对代码和 Compose 原则的了解将指导您实现高效且高性能的界面。
在这里插入图片描述

Rebugger：

此 Compose 实用程序库通过跟踪参数的变化并将简洁的说明输出到 Logcat 窗口，简化了不必要的重组。它充当调试工具，帮助您了解 UI 更新的原因。

添加依赖项：

Kts

repositories {
    ...
    mavenCentral()
}

dependencies {
    implementation("io.github.theapache64:rebugger:1.0.0-rc02")
}

gradle

repositories {
    ...
    mavenCentral() 
}

dependencies {
    implementation 'io.github.theapache64:rebugger:1.0.0-rc02'
}

https://github.com/theapache64/rebugger?tab=readme-ov-file

此库是识别 Jetpack Compose 组件中的重组的宝贵工具。下面是一个演示示例。

@Composable
fun VehicleUi(
    car: Car,
    bike: Bike,
) {
    var human by remember { mutableStateOf(Human("John")) }

    // Call Rebugger and pass the states you want to track. 
    // It could be a function arg or a state
    Rebugger(
        trackMap = mapOf(
            "car" to car,
            "bike" to bike,
            "human" to human
        ),
    )
}

在这里插入图片描述
通过遵循这些提示，您可以有效地使用重组来创建动态且响应式的 UI。

以下是一些您可能会觉得有用的其他资源：

有关重组的 Jetpack Compose 文档：https://developer.android.com/jetpack/compose/mental-model
关于重组的博客文章：https://blog.logrocket.com/jetpack-compose-recomposition/
本文翻译自: https://medium.com/mobile-innovation-network/recomposition-in-jetpack-compose-44644b4ce84f