15-Compose开发-重组机制

Jetpack Compose 重组机制深度解析

Jetpack Compose 是声明式 UI 框架，其核心是 UI = f(state) 。当状态发生变化时，Compose 会重新执行相关的可组合函数，生成新的 UI 描述，这个过程就是 重组（Recomposition）。理解重组机制是写出高效、可预测的 Compose 代码的关键。

本文将从原理到实践，系统讲解：

• 什么是重组，何时触发
• 重组的三大特性：智能、乐观、最小作用域
• 如何写出高性能的重组代码
• 常见陷阱与最佳实践

---

一、什么是重组？何时触发？

1.1 重组的定义

重组 = Compose 自动根据最新状态，重新执行 @Composable 函数以更新 UI 的过程。

• 初始渲染：首次执行 @Composable 函数生成 UI
• 重组 ：状态变化 → 框架自动重新执行受影响的可组合函数
• 重组的目标：用最新状态刷新 UI，保持数据与视图同步

1.2 何时触发重组？

满足两个条件就会触发重组：

1. 状态（State）发生变化
   如 mutableStateOf、ViewModel、Flow、StateFlow 数据更新
2. 有可组合函数读取了这个状态

口诀：状态变 → 读状态的组件重组 → UI 自动更新

注意 ：普通变量、var 等不会触发重组，只有 Compose 能跟踪的状态才会触发。

---

二、重组特性 1：智能重组（只更新读取状态的组件）

2.1 核心规则

Compose 编译器会分析每个可组合函数中读取了哪些状态对象，并建立依赖关系。当某个状态变化时，只有直接读取该状态的可组合函数会被标记为"需要重组"，其他未读取的组件不会被重新执行。

这是 Compose 高性能的核心保障。

2.2 示例代码：智能重组验证

@Composable
fun SmartRecompositionDemo() {
    var count1 by remember { mutableStateOf(0) }
    var count2 by remember { mutableStateOf(0) }

    Column(
        modifier = Modifier.fillMaxWidth().padding(20.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        // 组件1：只读取 count1
        CounterText("计数器A", count1) { count1++ }

        // 组件2：只读取 count2
        CounterText("计数器B", count2) { count2++ }
    }
}

@Composable
fun CounterText(title: String, count: Int, onClick: () -> Unit) {
    // 打印日志，观察是否重组
    println("🔄 重组 -> $title")

    Button(onClick = onClick, modifier = Modifier.fillMaxWidth()) {
        Text("$title：$count", fontSize = 18.sp)
    }
}

运行结果：

• 点击计数器A → 只重组 CounterText(A)
• 点击计数器B → 只重组 CounterText(B)
• 互不干扰，智能精准刷新

2.3 如何避免不必要的重组：将状态下沉

为了减少重组范围，最佳实践是将状态尽可能地限制在需要它的最小组件中。

// ❌ 不良示例：状态提升过高，导致整个父组件重组
@Composable
fun BadExample() {
    var text by remember { mutableStateOf("") }
    Column {
        Text("Header")          // 不依赖 text，但因为状态在父组件中，整个 Column 都会重组
        OutlinedTextField(
            value = text,
            onValueChange = { text = it }
        )
    }
}

// ✅ 改进：将状态移动到子组件
@Composable
fun GoodExample() {
    Column {
        Text("Header")          // 这个 Text 不会再因为输入框状态变化而重组
        MyTextField()
    }
}

@Composable
fun MyTextField() {
    var text by remember { mutableStateOf("") }
    OutlinedTextField(
        value = text,
        onValueChange = { text = it }
    )
}

---

三、重组特性 2：重组是乐观的（可取消、可重试）

3.1 核心规则

Compose 的重组采用 乐观策略（optimistic）：

• 重组过程可以被取消
• 重组过程可以被中断、重试
• 状态再次变化时，旧重组直接丢弃

3.2 为什么要这样设计？

• 快速连续点击、状态频繁变化时，只保留最后一次有效状态
• 避免无效 UI 计算，提升流畅度
• 协程调度，不阻塞主线程

例如，用户快速点击按钮，状态连续变化多次，Compose 可能会取消前几次的重组，只执行最后一次，从而避免中间过渡状态的 UI 闪烁。

3.3 对开发者的影响

乐观重组的特性意味着：你编写的可组合函数应该具有幂等性（idempotent） ，即无论被调用多少次，只要状态相同，结果都应相同。避免在可组合函数内部执行副作用（如网络请求、数据库操作），这些操作应该放在 LaunchedEffect 或回调中。

// ❌ 错误：在重组中执行副作用
@Composable
fun BadSideEffect() {
    var count by remember { mutableStateOf(0) }
    // 每次重组都会调用，可能被取消后重复调用
    api.fetchData()  // 网络请求
    Button(onClick = { count++ }) {
        Text("$count")
    }
}

// ✅ 正确：副作用放在协程作用域
@Composable
fun GoodSideEffect() {
    var count by remember { mutableStateOf(0) }
    LaunchedEffect(Unit) {
        api.fetchData()  // 只在首次组合时调用一次
    }
    Button(onClick = { count++ }) {
        Text("$count")
    }
}

3.4 特点总结

• 重组不保证一定执行完成
• 重组不保证执行次数
• 最终 UI 一定与最新状态一致

开发注意：不要在可组合函数中执行耗时操作、不可取消任务、副作用逻辑。

---

四、重组特性 3：重组范围（最小作用域原则）

4.1 核心规则

Compose 遵循 最小作用域原则：

• 只重组读取了变化状态的最小代码单元
• 父组件不一定重组
• 不读状态的代码绝对不会重组

4.2 Compose 最小重组单元

最小重组单元是可组合函数体内读取状态的代码块 。Compose 编译器会尝试将重组范围尽可能缩小。

4.3 示例代码：最小作用域验证

@Composable
fun MinScopeDemo() {
    var count by remember { mutableStateOf(0) }

    Column(
        modifier = Modifier.fillMaxWidth().padding(20.dp)
    ) {
        // 👇 这段不读取 count，永远不会重组
        Text("固定标题：不会重组")

        // 👇 只读取 count 的 lambda 会被独立重组
        Button(onClick = { count++ }) {
            // 最小重组范围：这里！
            Text("点击计数：$count")
        }
    }
}

结论：

• Column 不重组
• 顶部 Text 不重组
• 只有 Button 内部的 Text 重组

4.4 提取可组合函数以缩小范围

如果某个组件内部的某部分不依赖某个状态，可以将其提取为独立的可组合函数，避免不必要的重组。

@Composable
fun Parent() {
    var count by remember { mutableStateOf(0) }
    Column {
        Header()                // 提取出来，不依赖 count
        CounterDisplay(count)   // 依赖 count
        Button(onClick = { count++ }) { Text("+") }
    }
}

@Composable
fun Header() {
    Text("Title")               // 这个不会因为 count 变化而重组
}

---

五、重组的其他重要规则

5.1 重组是有序的

按声明顺序执行，与传统 View 刷新机制不同。

5.2 重组是并行的

Compose 可以并行执行多个重组，提高性能。

5.3 可组合函数应该是幂等的

• 相同状态 → 相同 UI
• 无副作用
• 无异步操作
• 无不可预测行为

5.4 不要依赖重组执行次数

• 可能 0 次
• 可能 N 次
• 可能取消

---

六、如何写出高性能的重组代码

1. 只读需要的状态

   避免在可组合函数中读取不必要的大状态对象。

2. 状态下沉

   让最小组件读取状态，避免父组件不必要的重组。

3. 使用 remember 缓存计算

   缓存不变的对象（如 Modifier、Color），避免重复创建。

4. 使用 derivedStateOf 合并状态

   当多个状态组合时，用 derivedStateOf 减少重组次数。

5. 列表使用 LazyColumn 避免全量重组
   LazyColumn 只渲染可见项，大幅提升性能。

6. 使用 @Stable 和 @Immutable 注解

   标注自定义数据类，帮助 Compose 优化重组范围。

---

七、常见陷阱与解决方案

常见问题	原因	解决方案
组件不刷新	状态不是可观察的	使用 mutableStateOf 或 remember
整个页面都重组	状态提升过高	将状态下沉到最小组件
动画卡顿	在重组中执行耗时操作	将耗时操作移到 LaunchedEffect
列表滚动卡顿	列表项状态未优化	使用 key 和 LazyColumn
重组次数过多	创建了非稳定对象	用 remember 缓存对象

---

八、总结

概念	解释
重组	状态变化时重新执行可组合函数，生成新 UI
触发时机	状态变化、CompositionLocal 变化、参数变化等
智能重组	只更新读取了变化状态的组件，其他组件保持不变
乐观重组	重组过程中新状态到来时，可能取消当前重组并重新开始，确保最终状态一致
最小作用域	重组范围被限制在最小代码块，提取组件可减少不必要重组
性能优化	状态下沉、缓存对象、使用 @Stable 等

理解重组 = 掌握 Compose 灵魂

---

九、线上资料链接

官方文档

1. Compose 核心原理（官方） ：https://developer.android.com/jetpack/compose/mental-model
2. 重组机制官方文档 ：https://developer.android.com/jetpack/compose/recomposition
3. Compose 状态与重组 ：https://developer.android.com/jetpack/compose/state
4. Compose 性能优化指南 ：https://developer.android.com/jetpack/compose/performance
5. 重组作用域详解 ：https://developer.android.com/jetpack/compose/scopes

通过深入学习重组机制，你将能够自信地构建高效、健壮的 Compose 应用。