📚 课程目录第2章 Compose中状态与事件分离

2. Compose中状态与事件分离

状态与事件分离是 Compose 状态提升的核心思想：状态由父组件持有并向下传递，事件通过回调函数由子组件向上触发。这一模式保证了单向数据流，使 UI 可预测、可测试、可维护。

原理：单向数据流与提升回调

在 Compose 中，UI 是状态的纯函数：UI = f(state)。当状态变化时，框架自动重组受影响的部分。但状态如果混在子组件内部，父组件便无法感知与控制。状态与事件分离的架构如下：

状态持有者（通常是父 Composable）使用 remember { mutableStateOf(...) } 创建并持有状态。
子组件接收状态作为参数（只读），并通过回调函数（如 onValueChange）将用户操作通知父组件。
父组件在回调中更新状态，触发重组，新状态再次流向子组件。

核心 API 说明

API	用途	关键特性
`remember`	在重组间保留值的引用，避免被重新计算。	依赖键变化时重新计算；无依赖时只计算一次。
`mutableStateOf`	创建可观察的 `MutableState<T>` 对象。	读取时触发重组，写入时通知框架。
`by` 委托	简化状态读写：`var count by remember { mutableStateOf(0) }`	避免显式调用 `.value`。
回调函数（如 `()->Unit`）	子组件暴露事件，父组件实现逻辑。	类型安全，可传递参数。

实现流程：计数器案例

以下代码完整演示了状态提升与事件分离的实现：

@Composable
fun CounterScreen() {
    // 父组件持有状态
    var count by remember { mutableStateOf(0) }

    Column {
        // 显示状态（只读）
        Text("Count: $count")

        // 子组件通过回调触发事件
        CounterButton(
            text = "Increment",
            onClick = { count++ }   // 事件处理：更新状态
        )
    }
}

@Composable
fun CounterButton(text: String, onClick: () -> Unit) {
    Button(onClick = onClick) {
        Text(text)
    }
}

关键点：CounterButton 不知道状态的存在，它只调用传入的 onClick 回调。状态更新完全由父组件的 count++ 控制。

调试要点

Layout Inspector：在 Android Studio 中可查看当前 Composable 树及每个 UI 绑定的状态值。
Logcat 日志：在回调和状态更改处添加 Log.d，验证调用顺序。
重组计数：使用 println("Recomposing $count") 观察重组频率，判断是否过度。

常见错误与避坑

错误 1：忘记使用 remember

// ❌ 每次重组都会创建新状态，导致 UI 重置
var count by mutableStateOf(0)

错误 2：直接修改状态对象内部

// ❌ 直接修改列表不会触发重组
val list = remember { mutableStateListOf(1,2,3) }
list.add(4)   // 正确写法：list.add(4) ✅

错误 3：回调在子组件内被直接修改状态

// ❌ 子组件自己持有状态，违背提升原则
@Composable
fun BadCounter() {
    var count by remember { mutableStateOf(0) }
    // ...
}

性能与稳定性优化

避免不必要的状态分裂：将紧密相关的状态合并为数据类，减少重组粒度。
使用 derivedStateOf：当新状态依赖其他状态时，可避免重复计算与额外重组。
lambda 稳定化：将回调函数提取为顶级或稳定的 lambda，防止子组件因回调引用变化而重组。
使用 rememberSaveable：进程重建时保留状态（与 Bundle 机制配合）。

状态与事件分离的架构图

总结

状态与事件分离是 Compose 状态提升的基石。通过 remember + mutableStateOf 在父级管理状态，并通过回调函数将事件上抛，你可以在任何复杂度的 UI 中维持单向数据流，从而获得高效的更新与清晰的逻辑边界。