前言上一课学习了 rememberSaveable 解决屏幕旋转、系统重建后状态丢失的问题。前面所有代码都是同步UI渲染但真实开发经常需要异步操作页面进入时请求网络、读取本地存储、延时执行代码。Compose可组合函数会频繁重组直接在函数内部写异步代码会重复执行。本课学习副作用API用来处理和UI渲染不同步的外部操作重点掌握 LaunchedEffect 了解 SideEffect 。前置完成1~8课掌握状态、重组、remember系列API一、完整可运行示例源码packagecom.example.composefirstimportandroid.os.Bundleimportandroidx.activity.ComponentActivityimportandroidx.activity.compose.setContentimportandroidx.compose.foundation.layout.Columnimportandroidx.compose.foundation.layout.Spacerimportandroidx.compose.foundation.layout.heightimportandroidx.compose.foundation.layout.paddingimportandroidx.compose.material3.Buttonimportandroidx.compose.material3.Textimportandroidx.compose.runtime.Composableimportandroidx.compose.runtime.LaunchedEffectimportandroidx.compose.runtime.SideEffectimportandroidx.compose.runtime.getValueimportandroidx.compose.runtime.mutableIntStateOfimportandroidx.compose.runtime.rememberimportandroidx.compose.runtime.setValueimportandroidx.compose.ui.Modifierimportandroidx.compose.ui.tooling.preview.Previewimportandroidx.compose.ui.unit.dpimportkotlinx.coroutines.delayclassMainActivity:ComponentActivity(){overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContent{EffectDemoPage()}}}ComposablefunEffectDemoPage(){varcountbyremember{mutableIntStateOf(0)}vartipTextbyremember{mutableStateOf(等待操作)}// SideEffect每次成功重组完成后执行SideEffect{println(页面发生一次重组count $count)}// LaunchedEffect启动协程key变化时重启协程LaunchedEffect(count){tipText计数发生变化延时2秒重置提示delay(2000)tipText等待操作}Column(modifierModifier.padding(20.dp)){Text(text当前计数$count)Text(text提示信息$tipText)Spacer(modifierModifier.height(12.dp))Button(onClick{count}){Text(1)}}}PreviewComposablefunEffectPreview(){EffectDemoPage()}二、逐行代码解读SideEffectSideEffect 在每一次重组成功之后执行。可组合函数每次重组完成就会运行SideEffect内部代码。适合同步副作用比如打印日志、同步更新外部非Compose状态。⚠️ 注意不要在SideEffect写耗时、阻塞代码它不能启动协程。LaunchedEffect(key)LaunchedEffect 是Compose最常用的异步副作用API。接收一个key参数进入组合组件首次渲染时自动启动协程key值发生变化旧协程自动取消重新启动新协程组件退出组合页面销毁、组件不再渲染协程自动取消防止内存泄漏。示例中key是 count 每次count数值改变就触发协程。delay(2000) 是协程延时函数不会阻塞UI主线程。延时结束修改tipText状态触发界面刷新。易错点不要直接在Compose顶层写delay、网络请求// ❌ 错误写法每次重组都会执行无限重复请求ComposablefunBadDemo(){delay(1000)Text(test)}可组合函数会反复重组直接写异步代码会多次重复执行必须放到LaunchedEffect内部。三、两个API适用场景区分SideEffect同步副作用每次重组完成后运行没有协程适合日志、同步外部状态。LaunchedEffect带协程的异步副作用支持delay、网络请求依靠key控制启停组件销毁自动取消协程是开发最常用。四、综合练习题填空题Compose中用来启动协程、处理异步任务的副作用API是________。________会在每一次重组成功之后执行不支持协程。LaunchedEffect的________发生变化时会取消旧协程并重新启动协程。答案与解析LaunchedEffect 解析LaunchedEffect内置协程专门处理异步任务。SideEffect 解析SideEffect在重组完成后执行只支持同步代码。key解析key作为依赖标记key改变触发协程重启。判断题LaunchedEffect内部可以使用delay不会阻塞UI主线程。答案正确。理由LaunchedEffect启动协程delay是挂起函数不会阻塞主线程。可组合函数里面直接写网络请求每次重组都会重复发起请求。答案正确。理由Compose可组合函数会多次重组直接写请求会重复执行必须放到LaunchedEffect。SideEffect内部可以写delay、网络请求这类异步挂起函数。答案错误。理由SideEffect没有协程上下文不能调用suspend挂起函数。简答题LaunchedEffect的key参数作用是什么组件销毁时协程会发生什么参考答案key是依赖标记key值改变会取消当前正在运行的协程重新启动新协程。当组件从UI树移除页面关闭LaunchedEffect会自动取消协程避免内存泄漏。代码实操题编写代码页面一加载就延时3秒修改提示文字为「页面加载完成」只执行一次点击按钮修改count不会再次触发这个延时任务。参考答案ComposablefunLoadDemoPage(){vartipbyremember{mutableStateOf(页面加载中...)}varcountbyremember{mutableIntStateOf(0)}// key写固定常量只在组件首次进入组合执行一次LaunchedEffect(Unit){delay(3000)tip页面加载完成}Column(modifierModifier.padding(20.dp)){Text(tip)Text(count:$count)Button(onClick{count}){Text(1)}}}解析key传入 Unit 代表依赖永远不变只在组件首次挂载运行一次修改count不会触发这个LaunchedEffect重启。五、本课小结SideEffect重组完成后执行同步代码无协程。LaunchedEffect启动协程处理异步任务key控制执行时机组件销毁自动取消协程。不要在可组合函数顶层直接写耗时、网络请求代码。key填Unit代表只在页面首次加载执行一次。下一课点击事件进阶、Dropdown下拉菜单状态联动综合练习。
