在Compose中使用状态提升？我提升个P...Provider

最新推荐文章于 2024-04-11 14:36:32 发布

Junerver

最新推荐文章于 2024-04-11 14:36:32 发布

阅读量681

点赞数 10

分类专栏： ComposeHooks 文章标签： react.js android jetpack compose-ui

本文链接：https://blog.youkuaiyun.com/u011133887/article/details/137237400

版权

本文讨论了在Compose中如何应用状态提升来实现组件无状态设计，指出其优点如可复用和可测试性。然而，实践中可能存在复杂场景下的状态管理和传递问题。作者通过引入上下文和useContext函数，展示了如何优化组件间的耦合，使状态和事件传递变得更简洁有效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

”总所周知“，在 Compose 中有个思想叫做状态提升，在之前的文章Compose学习笔记2 - LaunchedEffect、状态与状态管理中我们曾提及过。

状态提升的目的是为了让我们的组件尽可能的”无状态“，无状态的优点：

可复用，组件只负责组件的职责，不持有或者少持有状态
可测试，组件不持有状态，更接近于纯函数，相同输入必然有相同输出

状态提升的想法很好，但是实践的时候可能并不美妙。

可能有点丑陋的状态提升

我们快速的写一个 TodoList，来演示一下状态提升可能存在的问题：

@Composable
fun TestStateHoisting() {
   
    // 在顶层组件声明状态与改变状态的函数(称之为事件)
    val list = useList<Todo>()
    fun addTodo(todo: Todo) {
   
        list.add(todo)
    }
    fun delTodo(id: String) {
   
        list.removeIf {
    it.id == id }
    }
    Surface {
   
        Column {
   
            //事件传递
            Header(::addTodo)
            TodoList(todos = list, ::delTodo)
        }
    }
}

data class Todo(val name: String, val id: String)

@Composable
fun Header(addTodo: (Todo) -> Unit) {
   
    val (input, setInput) = useState("")
    Row {
   
        OutlinedTextField(
            value = input,
            onValueChange

最低0.47元/天解锁文章