📚 课程目录第2章为什么需要提升状态

为什么需要提升状态：组件复用性、状态共享、可测试性提升

在 Compose 中，如果每个组件都“私有”地持有自己的状态，会遇到三个棘手问题：组件难以复用（状态与 UI 强耦合）、跨组件状态无法共享（只能通过回调传递）、单元测试变复杂（必须模拟状态变化）。状态提升正是为了解决这些痛点——将状态上移到父组件，让子组件成为“纯展示”的无状态组件。

1. 组件复用性

当组件内部持有状态时，它的行为与 UI 绑定死。例如一个带计数的按钮组件：

// 未提升：状态内聚，无法在其他场景复用
@Composable
fun MyCounterButton() {
    var count by remember { mutableStateOf(0) }
    Button(onClick = { count++ }) { Text("Clicked $count") }
}

如果另一个页面需要同样的按钮但起始值不同，或者需要不同行为，必须复制修改代码。提升后：

// 提升后：只关心点击事件，状态由父组件传入
@Composable
fun MyCounterButton(count: Int, onIncrement: () -> Unit) {
    Button(onClick = onIncrement) { Text("Clicked $count") }
}

现在该按钮可在任何界面复用，父组件决定状态逻辑。

2. 状态共享

非层级紧密的组件需要同时显示或修改同一数据。例如搜索框和结果列表需要共享查询文本：

// 未提升：各自持有独立状态，无法同步
@Composable
fun SearchBox() { var query by remember { mutableStateOf("") } /* … */ }
@Composable
fun ResultList() { /* 无法访问 SearchBox 的 query */ }

通过状态提升，将 query 与 onQueryChange 上移至父组件，两个子组件通过参数共享同一状态源。

3. 可测试性提升

无状态组件接受数据 + 回调，测试时可以精准控制输入并断言输出。例如：

// 未提升状态：测试必须启动 Composable 并模拟用户点击，间接验证
// 提升后：直接提供 count 和 onIncrement，断言语义明确
@Test
fun counter_click_increases_count() {
    var count = 0
    composeTestRule.setContent { MyCounterButton(count) { count++ } }
    composeTestRule.onNodeWithText("Clicked 0").performClick()
    // 断言 count == 1 或 UI 显示 "Clicked 1"
}

核心原理：状态提升将“数据流”和“事件流”解耦。数据从父组件单向向下传递（Props Down），事件通过回调向上传递（Events Up）。任何想复用、共享或测试该组件的场景，只需更换父状态逻辑即可。

类比：共享单车 vs 私人自行车

私人自行车（私有状态）只能自己骑，别人无法使用；共享单车（提升状态）被统一调度，任何一个用户扫码即可骑走。如果公司需要统计每辆车的使用次数，共享单车更容易集中记录（可测试性）。状态提升就好比将“谁控制单车”从个人手中转移到运营平台。

常见误区

“所有状态都必须提升” —— 纯内部动画开关、临时输入焦点等 UI 细节不必提升，否则增加父组件复杂度。
“提升后组件变成纯函数，失去可封装性” —— 实际上组件仍可封装样式和布局，只是剥离了可变状态。
“状态提升会增加参数数量，降低可读性” —— 合理分组（data class 包裹）或使用默认参数可以缓解。

应用边界

场景	是否推荐提升	原因
跨兄弟组件共享同一状态（如搜索词）	是	提升到最近公共父级
组件内部动画/滚动位置	否	仅当前组件需要，提升后冗余
需要单元测试的复杂交互逻辑	是	纯组件测试更简单，mock/验证更直接
全局主题/用户头像等全局数据	否（应使用 CompositionLocal）	提升会导致逐层透传，适用上下文机制

练习题

请分析以下代码。如果不提升状态，会存在哪些问题？请写出提升后的组件签名。

@Composable
fun TemperatureEditor() {
    var celsius by remember { mutableStateOf(20) }
    Column {
        Text("当前温度: $celsius°C")
        Slider(value = celsius, onValueChange = { celsius = it })
        Button(onClick = { celsius = 0 }) { Text("重置") }
    }
}

提示：将 celsius 与 onCelsiusChange 提升，同时分离“重置”逻辑为单独回调，让组件既可独立使用，也可被其他编辑器复用。

注意：提升时避免状态被多个地方同时修改导致数据不一致。使用单一可靠数据源（Single Source of Truth）原则。

小结

状态提升的三个核心收益紧扣 Compose 的声明式设计哲学：

复用性：无状态组件就像乐高积木，可自由拼装。
状态共享：将状态视为可观察流，多个观察者订阅同一源。
可测试性：输入输出明确的纯函数式 UI 单元。

记住：提升不是目的，而是手段。下次看到组件内有 mutableStateOf 时，先问“这个状态真的属于这里吗？”