Compose生命周期---Lifecycle of composables

在 Jetpack Compose 中,生命周期与传统 View 系统 (Activity / Fragment) 的生命周期大不相同。Compose 是声明式的 UI 框架,UI 是由状态驱动生成的,其生命周期依赖于「组合(Composition)」和「重组(Recomposition)」过程,以及副作用(Side Effects)的控制。

一、Compose 的生命周期结构

阶段 含义 类比传统Android生命周期
Composition(组合) 第一次调用 @Composable 构建 UI onCreate() / onStart()
Recomposition(重组) 状态变化时,自动刷新相关 UI 部分 onResume()(多次执行)
Disposal(释放) UI 不再需要,Compose 会清理资源 onPause() / onDestroy()

二、生命周期相关的 Compose 函数(副作用 API)

副作用函数是 Compose 提供的"生命周期钩子",可安全地进行如网络请求、监听器注册、清理任务等。

✅ 1. LaunchedEffect 组件进入组合或 key 变化时执行协程代码(只执行一次或条件变化时重新执行)

kotlin 复制代码
@Composable
fun MyScreen(userId: String) {
    LaunchedEffect(userId) {
        // 初始加载或 userId 改变时触发
        val userData = loadUser(userId)
        println("Loaded user: $userData")
    }
}

支持 CoroutineScope,适合做网络请求、动画、延迟等

常用于:页面加载、初始化数据

✅ 2. DisposableEffect

组件进入组合时初始化,在离开组合时释放资源

kotlin 复制代码
@Composable
fun LifecycleAwareComponent(someKey: String) {
    DisposableEffect(someKey) {
        println("Component active with key: $someKey")

        onDispose {
            println("Component with key $someKey is disposed")
        }
    }
}

常用于:注册广播、监听器、传感器等资源释放相关场景

✅ 3. SideEffect

每次重组后立即执行,适合和外部系统同步状态

kotlin 复制代码
@Composable
fun MyComponent(count: Int) {
    SideEffect {
        println("Current count is $count")
    }
}

✅ 4. rememberUpdatedState

用于保证 LaunchedEffect 或 DisposableEffect 中使用到的 lambda 是最新的版本

kotlin 复制代码
@Composable
fun TimerEffect(onTick: () -> Unit) {
    val currentOnTick by rememberUpdatedState(onTick)

    LaunchedEffect(Unit) {
        while (true) {
            delay(1000)
            currentOnTick()  // always calls the latest lambda
        }
    }
}

解决"捕获旧 lambda"的问题

🎯 三、搭配 LifecycleOwner 使用(配合 ViewModel)

在某些场景中,我们需要访问宿主组件(如 Activity/Fragment)的生命周期:

kotlin 复制代码
@Composable
fun ObserveLifecycleEvents() {
    val lifecycleOwner = LocalLifecycleOwner.current

    DisposableEffect(lifecycleOwner) {
        val observer = LifecycleEventObserver { _, event ->
            println("Lifecycle event: $event")
        }

        lifecycleOwner.lifecycle.addObserver(observer)

        onDispose {
            lifecycleOwner.lifecycle.removeObserver(observer)
        }
    }
}

🔄 生命周期对比表

传统生命周期 Compose 替代
onCreate() LaunchedEffect(Unit)
onResume() LaunchedEffect(key)
onPause() / onStop() onDispose in DisposableEffect
onDestroy() onDispose
状态绑定 View 状态驱动组合 UI

✅ 小结

API 触发时机 用途
LaunchedEffect 初次组合或 key 变化 异步任务、网络请求
DisposableEffect 组合 + 清理 注册监听、取消绑定
SideEffect 每次重组后 外部同步、日志记录
rememberUpdatedState 始终使用最新值 动态回调、协程中更新状态
LocalLifecycleOwner 获取宿主生命周期 与原生协同工作
相关推荐
人工智能训练师1 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny071 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy2 小时前
css的基本知识
前端·css
昔人'3 小时前
css `lh`单位
前端·css
Nan_Shu_6144 小时前
Web前端面试题(2)
前端
知识分享小能手4 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队5 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光6 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5206 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days20506 小时前
LeaferJS好用的 Canvas 引擎
前端·开源