3. mutableStateOf 与 remember：创建可变状态、保持状态跨重组、常见陷阱

3.1 核心概念

在 Jetpack Compose 中，mutableStateOf 创建可观测的状态容器，remember 确保状态在重组（Recomposition）期间不会被重新初始化。两者配合是 Compose 单向数据流的基石。

  • mutableStateOf：返回一个 MutableState<T> 对象，Compose 编译器会自动追踪其读/写操作，触发重组。
  • remember：将计算结果缓存到 Composition 的槽位（Slot Table）中，只在首次组合或键（Key）变化时重新计算。
规则：mutableStateOf 必须与 remember 嵌套使用，否则每次重组都会重新创建状态实例，导致 UI 无法持久化用户数据。

3.2 工作原理

组合阶段：

  1. Composable 函数首次执行 → remember 检查槽位，无缓存 → 执行 lambda 创建 mutableStateOf 对象并存入槽位。
  2. 用户交互改变状态值 → MutableState.value setter 通知依赖该状态的 Composable 重组。
  3. 重组时，remember 从槽位读取已缓存状态对象，不重新创建，保证数据连续性。
remember + mutableStateOf 生命周期 首次组合 缓存? 创建 mutableStateOf 槽位缓存 返回 State 对象 用户交互改变值 触发重组 remember 读取槽位缓存 状态保持，不重新创建 状态跨重组存活 直到离开 Composition

3.3 标准用法

计数器示例：

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    
    Text("Count: $count")
    Button(onClick = { count++ }) {
        Text("Increment")
    }
}

文本输入框示例：

@Composable
fun TextInput() {
    var text by remember { mutableStateOf("") }
    
    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Enter name") }
    )
}

3.4 API 签名说明

API签名说明
mutableStateOffun <T> mutableStateOf(value: T, policy: SnapshotMutationPolicy<T> = structuralEqualityPolicy())创建可观测状态，默认使用结构相等比较
rememberfun <T> remember(key1: Any?, calculation: () -> T): T缓存计算值，键变化时重新计算
remember(keys)支持多个键：remember(key1, key2) { ... }任一键变化触发重新计算
推荐语法：使用 by 委托访问 MutableState 的 value，避免显式调用 .value。但需注意 by 需要 import androidx.compose.runtime.getValue 和 setValue。

3.5 常见陷阱

陷阱 1：忘记 remember 导致状态“丢失”

// 错误：每次重组都创建新状态，count 始终为 0
var count = mutableStateOf(0)
// 正确：使用 remember 保持实例
var count = remember { mutableStateOf(0) }

陷阱 2：闭包捕获旧值

@Composable
fun ProblematicCounter() {
    var count by remember { mutableStateOf(0) }
    
    // Lambda 在首次组合时捕获 count（0），后续点击不会更新
    Button(onClick = {
        // count 是委托属性，这里每次读取都从 State 取值，所以正确
        println("count = $count")
    }) {
        Text("Check")
    }
}

实际上 by 委托的 lambda 中每次读取都会解引用，所以无问题。但若使用普通变量（如 val c = count）捕获，则产生旧值。

陷阱 3：过度使用 remember（无意义缓存）

// 不推荐：不依赖任何状态的常量也使用 remember，浪费槽位
val constant = remember { "Hello" }

// 直接写顶层级即可
val constant = "Hello"
常见性能问题：remember 的 lambda 中不要执行副作用或高开销计算（应使用 LaunchedEffect 或 SideEffect）。仅创建 mutableStateOf 是轻量操作，无需担忧。

陷阱 4：key 使用不当导致状态意外重置

@Composable
fun CounterWithLabel(label: String) {
    // 每次 label 变化，状态会重新初始化（因为 key 改变）
    var count by remember(label) { mutableStateOf(0) }
    Text("$label: $count")
    Button(onClick = { count++ }) { Text("+") }
}

若期望保持计数独立于 label，应去掉 key 或使用内部稳定的键。

陷阱 5：多个状态交错引用导致无限重组

var a by remember { mutableStateOf(0) }
var b by remember { mutableStateOf(0) }
// 在同一个组合中互相更新 → 导致递归重组，应避免
if (a > 5) { b = a }

重组期间不应修改同级状态，否则触发第二次重组引起死循环。

3.6 调试建议

  • 使用 Android Studio Layout Inspector 查看 Composition 槽位内容。
  • 在 remember 计算中加日志：println("remember key=$key") 观察是否按预期缓存。
  • 使用 derivedStateOf 代替 mutableStateOf 缓存派生值，避免冗余重组。

3.7 性能优化要点

优化点说明
最小化 remember 作用域只包裹必要部分，避免将整个 Composable 内容放入 remember lambda。
使用 by 委托代码更简洁，避免反复 .value 调用。
恰当选择键使用稳定的键（如 Unit 或不变标识）防止非必要重建。
避免状态提升过深保持状态在所需的最小层级，减少重组范围。
最佳实践：把可变状态声明在 Composable 函数的参数中（状态提升），内部只放 mutableStateOf + remember 管理局部 UI 状态。将逻辑状态提升到 ViewModel，通过 collectAsState 观察。

3.8 本章小结

  • mutableStateOf 提供可观测容器，remember 保证跨重组存活。
  • 两者必须配合使用，否则状态会随重组丢失。
  • 注意闭包陷阱、key 变化导致重置、无限重组等常见错误。
  • 合理使用 remember 的关键参数可以控制缓存的失效时机。
← 上一章 📖 返回目录 下一章 →