ComposeUI中的remember与mutableStateOf

remember基础

remember用于在组件重组时保持状态。

Name
基本概念
Type
concept
Description
- 用于记住可变/不可变的值
- Compose管理的存储
- 值改变会触发重组
- 仅在当前组件内使用
Name
使用场景
Type
usage
Description
- 表单输入
- 开关状态
- 临时状态
- 动画状态

remember示例

@Composable
fun ContentView() {
    var text by remember { mutableStateOf("") }
    var isOn by remember { mutableStateOf(false) }
    
    Column {
        TextField(
            value = text,
            onValueChange = { text = it },
            label = { Text("输入文本") }
        )
        
        Switch(
            checked = isOn,
            onCheckedChange = { isOn = it }
        )
        
        Text("当前输入: $text")
        Text("开关状态: ${if (isOn) "开" else "关"}")
    }
}

mutableStateOf

mutableStateOf用于创建可观察的状态对象。

Name
关键特性
Type
features
Description
- 创建可变状态
- 支持状态委托
- 触发重组更新
- 实现状态管理
Name
常见用法
Type
common
Description
- 自定义组件
- 状态提升
- 状态共享
- 双向数据流

mutableStateOf示例

@Composable
fun CustomToggle(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit
) {
    Button(
        onClick = { onCheckedChange(!checked) }
    ) {
        Text(
            text = if (checked) "开启" else "关闭",
            modifier = Modifier
                .padding(8.dp)
                .background(
                    if (checked) Color.Green else Color.Gray,
                    RoundedCornerShape(8.dp)
                )
        )
    }
}

@Composable
fun ParentView() {
    var toggleState by remember { mutableStateOf(false) }
    
    Column {
        CustomToggle(
            checked = toggleState,
            onCheckedChange = { toggleState = it }
        )
        Text("开关状态: ${if (toggleState) "开启" else "关闭"}")
    }
}

状态管理最佳实践

remember和mutableStateOf的使用建议。

Name
设计原则
Type
principles
Description
- 状态最小化
- 合理提升状态
- 避免状态泄露
- 保持单向数据流
Name
注意事项
Type
cautions
Description
- remember仅用于简单数据
- 使用by委托语法简化代码
- 避免过度提升状态
- 及时清理不需要的状态

最佳实践示例

@Composable
fun ProfileView() {
    // 简单状态使用remember
    var isEditing by remember { mutableStateOf(false) }
    var name by remember { mutableStateOf("") }
    
    // 复杂状态使用ViewModel
    val viewModel = viewModel<ProfileViewModel>()
    
    Column {
        // 仅在必要时提升状态
        TextField(
            value = name,
            onValueChange = { name = it },
            label = { Text("姓名") }
        )
        CustomEditButton(
            isEditing = isEditing,
            onEditingChange = { isEditing = it }
        )
        
        if (isEditing) {
            // 编辑模式UI
        }
    }
}