第四章 避免不必要的重组：remember 与 derivedStateOf 使用、key 参数优化、lambda 稳定化、不可变数据

4.1 重组开销的本质

Compose 重组（Recomposition）是指当状态发生变化时，框架重新执行可组合函数以更新 UI 的过程。不必要的重组会浪费 CPU 周期、增加帧耗时、造成掉帧。本章的技术手段核心目标是：只重组真正需要更新的组件。

4.2 原理图：重组决策流程与优化切入点

下图展示了 Compose 重组决策流程，以及 remember / derivedStateOf / key / lambda 稳定化 / 不可变数据 如何拦截不必要的重组：

4.3 五种核心优化手段

4.4 实现流程

1. 识别重组热点：使用 Layout Inspector + Show Recomposition 或运行时日志，标记重组次数 > 3 的子组件。
2. 评估参数稳定性：检查传入可组合函数的每个参数类型是否标记为 @Stable、@Immutable。
3. 插入 remember：对昂贵计算表达式包裹 remember(keys)，将 key 设为实际依赖项。
4. 使用 derivedStateOf：当 UI 状态由多个上游状态合并而成时，在 remember 内部使用 derivedStateOf。
5. 为列表组件添加 key：在 items() 或 key() 中指定唯一标识。
6. 稳定化 lambda：将回调提取为顶层函数或 remember 存储的 lambda 引用。
7. 数据对象不可变化：使用 data class、@Immutable、Bolt 或 sealed class 确保 equals/hashCode 稳定。
8. 验证重组减少：重新测量重组次数，确保每帧重组子节点数下降。

4.5 代码实现与 API 示例

4.5.1 remember 缓存

@Composable
fun ExpenseChart(transactions: List<Transaction>, month: Int) {
    // 避免每次重组都重新计算汇总
    val totalAmount = remember(transactions, month) {
        transactions
            .filter { it.month == month }
            .sumOf { it.amount }
    }

    // 昂贵对象只创建一次
    val formatter = remember {
        java.text.NumberFormat.getCurrencyInstance()
    }
    Text(text = "本月支出: ${formatter.format(totalAmount)}")
}

4.5.2 derivedStateOf 减少派生状态

@Composable
fun SearchableList(
    allItems: List<String>,
    query: String
) {
    // derivedStateOf 只在 query 或 allItems 实际变化时重新计算
    val filteredItems = remember(allItems) {
        derivedStateOf {
            if (query.isBlank()) allItems
            else allItems.filter { it.contains(query, ignoreCase = true) }
        }
    }
    LazyColumn {
        items(filteredItems.value) { item ->
            Text(text = item)
        }
    }
}

4.5.3 key 参数优化列表重组

@Composable
fun TaskList(tasks: List<Task>) {
    LazyColumn {
        // 使用 task.id 作为 key，防止插入/删除时整组重组
        items(
            items = tasks,
            key = { task -> task.id }
        ) { task ->
            TaskItem(task = task)
        }
    }
}

@Composable
fun AnimationCard(images: List<ImageData>) {
    // 在 AnimatedContent 中使用 key
    AnimatedContent(
        targetState = images,
        transitionSpec = { fadeIn() + slideInHorizontally() },
        // 关键：提供 key 让 Compose 区分新旧实例
        contentKey = { dataList -> dataList.map { it.id } }
    ) { dataList ->
        ImageGrid(dataList)
    }
}

4.5.4 lambda 稳定化 —— 使用 remember & 函数引用

// ❌ 错误：每次重组创建新 lambda → 触发子组件重组
@Composable
fun BadButton() {
    Button(onClick = { handleClick() }) { Text("点击") }
}

// ✅ 正确：remember 稳定 lambda 实例
@Composable
fun GoodButton() {
    val onClick = remember { { handleClick() } }
    Button(onClick = onClick) { Text("点击") }
}

// ✅ 更优：函数引用（如果 handleClick 是顶层函数）
@Composable
fun BestButton() {
    Button(onClick = ::handleClick) { Text("点击") }
}

private fun handleClick() {
    println("按钮被点击")
}

4.5.5 不可变数据声明

// @Immutable 告诉 Compose 此类型永远不变
@Immutable
data class UserProfile(
    val id: Long,
    val name: String,
    val avatarUrl: String,
    val tags: List<String>  // 使用不可变 List
)

// 使用时传入稳定对象
@Composable
fun ProfileCard(profile: UserProfile) {
    // 由于 UserProfile 是 @Immutable，Compose 知道引用相同则内容相同
    Text(text = profile.name)
}

// 对于可变集合，使用 BOLT 或 StateFlow
@Immutable
data class MutableListWrapper<T>(val items: List<T>) // 包装不可变副本

4.6 调试与验证

4.6.1 启用重组计数

// 在 AndroidManifest.xml 中启用重组日志
<application
    android:name=".App"
    android:debuggable="true" >
    <meta-data
        android:name="compose_recomposition_count"
        android:value="true" />
</application>

// 运行时过滤 Logcat:
// adb logcat -s "Compose:Recomposition"

4.6.2 Layout Inspector 可视化

步骤:
1. 运行 App → 点击 "Layout Inspector" 图标
2. 在工具栏勾选 "Show Recomposition Counts"
3. 选择目标组件 → 查看 "Recompositions" 数值
4. 若数值 > 3 且预期应稳定 → 标记为优化候选

预期结果:
- 优化前: 列表 item 重组次数 = 每次刷新整组 × 20
- 优化后: 重组次数 = 仅新增/删除项 × 1

4.6.3 使用 Compose Compiler Metrics

# 在 build.gradle.kts 中启用
android {
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.10"
    }
}

# 添加编译器参数
kotlin {
    sourceSets.all {
        kotlinOptions {
            freeCompilerArgs += listOf(
                "-P",
                "plugin:androidx.compose.compiler.plugins.kotlin:metricsDestination=" +
                project.buildDir.absolutePath + "/compose_metrics"
            )
        }
    }
}

# 查看生成的 *-restartable.txt 文件:
# - restartable: 可重组函数
# - skippable:  可跳过重组函数 (优化目标)

4.7 常见错误与避坑

4.8 性能数据对比

4.9 部署检查清单

• 所有列表组件均已添加 key 参数，且 key 值稳定、唯一
• 所有内部回调/onClick 均已使用 remember 或函数引用稳定化
• 所有数据模型标记为 @Immutable 或 @Stable（认真测试后使用）
• 凡涉及派生状态计算，derivedStateOf 已嵌套在 remember 内
• 使用 Compose Compiler Metrics 验证 skippable 标记比率 > 90%
• 发布前关闭 compose_recomposition_count 日志以避免性能开销

4.10 稳定性优化进阶

在复杂项目中，可组合函数参数类型众多。可使用 @Stable 注解手动标记类中某些属性为稳定，即使类整体可变：

@Stable
class MutableStateWrapper<T>(initial: T) {
    var value: T by mutableStateOf(initial)
        private set

    fun update(newValue: T) {
        value = newValue
    }
    // equals 基于 value 比较
    override fun equals(other: Any?): Boolean {
        if (this === other) return true
        if (other !is MutableStateWrapper<*>) return false
        return value == other.value
    }
    override fun hashCode() = value?.hashCode() ?: 0
}