compose 状态提升 笔记

状态提升 是 Compose 中一个核心的架构模式，它指的是将状态 从一个可组合函数中"提升"到其调用者 中，使得该组件变为无状态的。这是实现可复用、可测试且关注点分离的UI组件的关键。

简单说，其原则是："状态上升，事件下降"。

• 状态上升 ：状态变量被移到组件的调用方（通常是更高层级的父组件），并通过函数参数传递给子组件。
• 事件下降 ：子组件不直接修改状态，而是通过回调函数 （通常是 onEvent 命名的 lambda）将事件通知给父组件，由父组件来更新状态。

---

📝 一个简单示例：计数器

提升前（状态内嵌，难以复用和测试）：

@Composable
fun CounterBadExample() {
    var count by remember { mutableStateOf(0) } // 状态内部管理
    Button(onClick = { count++ }) { // 事件内部处理
        Text("Clicked $count times")
    }
}

这个按钮组件自己管理计数状态，外部无法控制其初始值或重置它，也难以对其进行独立的单元测试。

提升后（状态由外部控制）：

@Composable
fun Counter(
    count: Int, // 状态通过参数传入
    onIncrement: () -> Unit // 事件通过回调上报
) {
    Button(onClick = onIncrement) {
        Text("Clicked $count times")
    }
}

// 父组件（状态持有者）
@Composable
fun MyScreen() {
    var count by remember { mutableStateOf(0) } // 状态提升到这里
    Column {
        Counter(count = count, onIncrement = { count++ })
        Button(onClick = { count = 0 }) {
            Text("Reset") // 父组件可以轻松实现重置功能
        }
    }
}

现在 Counter 是一个无状态 组件，其行为完全由父组件 MyScreen 控制，变得高度可复用和可测试。

🎯 状态提升的优势

方面	提升后的好处
可复用性	组件不绑定特定数据源，可在不同场景使用不同状态。
可测试性	可以单独测试组件UI（给定状态，断言UI），也可以单独测试状态逻辑。
单一可信源	状态在唯一的地方管理，避免数据不一致。
关注点分离	组件只负责显示和发射事件，逻辑在父组件或ViewModel中处理。
逻辑共享	多个子组件可以轻松共享和响应同一个提升后的状态。

---

🚀 更复杂的实战：登录表单

在一个更真实的场景中，状态提升能清晰地分离UI和逻辑。

// 1. 无状态的、可复用的表单输入组件
@Composable
fun LoginInputField(
    value: String,
    label: String,
    isPassword: Boolean = false,
    onValueChange: (String) -> Unit // 事件回调
) {
    OutlinedTextField(
        value = value,
        onValueChange = onValueChange,
        label = { Text(label) },
        visualTransformation = if (isPassword) PasswordVisualTransformation() else VisualTransformation.None,
        modifier = Modifier.fillMaxWidth()
    )
}

// 2. 使用状态提升的登录屏幕
@Composable
fun LoginScreen(viewModel: LoginViewModel = viewModel()) {
    // UI状态提升到ViewModel中
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()

    Column(
        modifier = Modifier.padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        LoginInputField(
            value = uiState.username,
            label = "用户名",
            onValueChange = { viewModel.onUsernameChange(it) }
        )
        LoginInputField(
            value = uiState.password,
            label = "密码",
            isPassword = true,
            onValueChange = { viewModel.onPasswordChange(it) }
        )
        Button(
            onClick = { viewModel.onLoginClick() },
            enabled = uiState.isLoginEnabled, // 启用状态也由父状态控制
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("登录")
        }
    }
}

// 3. ViewModel (状态和逻辑的容器)
class LoginViewModel : ViewModel() {
    private val _uiState = MutableStateFlow(LoginUiState())
    val uiState: StateFlow<LoginUiState> = _uiState.asStateFlow()

    fun onUsernameChange(newName: String) {
        _uiState.update { it.copy(username = newName, isLoginEnabled = isFormValid(newName, it.password)) }
    }
    fun onPasswordChange(newPass: String) {
        _uiState.update { it.copy(password = newPass, isLoginEnabled = isFormValid(it.username, newPass)) }
    }
    fun onLoginClick() { /* 执行登录逻辑 */ }
    private fun isFormValid(user: String, pass: String): Boolean = user.isNotBlank() && pass.length >= 6
}

data class LoginUiState(
    val username: String = "",
    val password: String = "",
    val isLoginEnabled: Boolean = false
)

💡 最佳实践与原则

1. 提升到"刚好"的层级 将状态提升到所有需要读取该状态的组件的最低共同父级。不必过度提升到根节点。
2. 使用命名约定 状态参数通常直接命名（如 value），回调函数以 on 开头（如 onValueChange）。这是Compose社区的通用约定。
3. 为复杂状态使用数据类 当有多个相关联的状态时（如上面的表单），将它们封装在一个 data class 中，一次性提升，可以避免参数列表过长和状态不一致。
4. 与 ViewModel 结合 对于屏幕级状态或涉及业务逻辑的状态，应将其提升到 ViewModel 中，而不是可组合函数内。这符合架构分层原则。

⚠️ 注意避免的陷阱

• 过度提升 ：将不需要共享的内部UI状态（如按钮的按压动画状态）也提升出去，会增加不必要的复杂性。这类状态应使用 remember 保留在组件内部。
• 回调地狱 ：如果嵌套层级过深，传递回调会显得繁琐。此时可考虑使用 CompositionLocal（适用于真正的横切关注点，如主题）或将多个回调封装成一个事件 sealed class。

总结 ：状态提升是驱动Compose应用数据流的核心模式。它强制你思考状态的归属 和数据的流向，最终构建出更清晰、更健壮的UI架构。当你发现一个组件难以测试、或状态逻辑与UI纠缠不清时，就是进行状态提升的最佳时机。