Jetpack Compose 【三】附带效应、协程与异步

• Jetpack Compose 【一】入门：拥抱现代 Android UI 开发
• Jetpack Compose 【二】状态管理详解
• Jetpack Compose 【三】附带效应、协程与异步
• Jetpack Compose 【四】动画
• Jetpack Compose【五】 高级布局与绘制技巧
• Jetpack Compose【六】终极：声明式 UI 如何重塑开发者的思维

前言

Jetpack Compose 是 Google 推出的声明式 UI 框架，它通过简单、高效的方式构建现代化 Android 应用。然而，随着应用变得复杂，尤其是涉及到异步任务、数据流和副作用时，如何高效管理这些操作成为了一个挑战。幸运的是，Jetpack Compose 提供了一系列工具，帮助开发者轻松管理副作用、协程和异步操作。

本文将围绕 副作用（附带效应）管理、Compose 状态管理 和 协程与异步操作 等主题展开，帮助开发者深入理解 Compose 如何处理这些常见场景。

1. 副作用的管理

在 Compose 中，副作用（Side Effects） 是指在 UI 渲染之外执行的操作，如日志记录、网络请求、数据库操作等。为了确保这些操作在正确的生命周期时机执行，并且不会对 UI 产生不必要的副作用，Compose 提供了多个 API 来帮助管理这些副作用。

1.1 SideEffect

SideEffect 是最简单的副作用 API，它每次 UI 重组时都会执行。通常用于那些无需清理的副作用操作，如日志记录、埋点等。

示例

@Composable
fun SideEffectExample(count: Int) {
    SideEffect {
        println("当前计数: $count")
    }

    Button(onClick = { /* 更新 count */ }) {
        Text("增加计数")
    }
}

特点：

• 每次重组都会执行 SideEffect。
• 无需执行清理操作，适用于无状态的简单副作用。

1.2 DisposableEffect

DisposableEffect 用于需要清理资源的副作用操作。常见场景包括注册/注销监听器、取消广播接收器等。DisposableEffect 会在组件退出时执行清理操作，确保不会出现资源泄漏。

示例

@Composable
fun DisposableEffectExample() {
    val context = LocalContext.current

    DisposableEffect(Unit) {
        val receiver = BatteryReceiver()
        context.registerReceiver(receiver, IntentFilter(Intent.ACTION_BATTERY_CHANGED))

        onDispose {
            context.unregisterReceiver(receiver)
        }
    }

    Text("监听器已注册")
}

class BatteryReceiver : BroadcastReceiver() {
    override fun onReceive(context: Context?, intent: Intent?) {
        println("电量状态更新")
    }
}

特点：

• 可以在 onDispose 中执行清理操作。
• 依赖值变化时，会先清理旧资源，再初始化新资源。

1.3 LaunchedEffect

LaunchedEffect 是一个适合异步操作的副作用 API，常用于启动协程。它会在组件进入 Composition 时启动协程，并且会根据依赖值变化重新启动协程任务。对于需要与 UI 生命周期同步的异步任务，LaunchedEffect 是非常合适的选择。

示例

@Composable
fun LaunchedEffectExample() {
    var count by remember { mutableStateOf(0) }

    LaunchedEffect(count) {
        delay(1000)
        count++
    }

    Text("计数：$count")
}

特点：

• 适合执行异步任务。
• 会在依赖值变化时自动重启。

2. Compose 状态管理

在 Compose 中，UI 更新依赖于 状态（State） 。为了让 UI 能够根据状态自动更新，我们需要将传统的数据流（如 LiveData 和 Flow）转换为 Compose 可以自动观察的 State 类型。通过这种方式，UI 会随着数据的变化自动更新，而无需手动通知 UI 组件。

2.1 observeAsState 和 collectAsState

observeAsState 和 collectAsState 是用于将传统的 LiveData 和 StateFlow 转换为 Compose 状态的两个函数。通过这两个函数，Compose 可以自动观察数据流的变化，并触发 UI 的更新。

observeAsState

observeAsState 用于将 LiveData 转换为 Compose 状态，自动观察数据的变化，并更新 UI。

示例

@Composable
fun LiveDataExample(viewModel: MyViewModel) {
    val data by viewModel.liveData.observeAsState("加载中...")

    Text("数据: $data")
}

class MyViewModel : ViewModel() {
    val liveData = MutableLiveData("初始数据")
}

特点：

• 自动观察 LiveData 数据的变化。
• LiveData 与 Compose 状态同步，确保 UI 更新。

collectAsState

collectAsState 用于将 StateFlow 转换为 Compose 状态，并在数据流变化时自动更新 UI。

示例

@Composable
fun FlowExample(viewModel: MyViewModel) {
    val data by viewModel.flow.collectAsState("加载中...")

    Text("数据: $data")
}

class MyViewModel : ViewModel() {
    val flow = MutableStateFlow("初始数据")
}

特点：

• 自动观察 StateFlow 数据流的变化。
• StateFlow 与 Compose 状态同步，确保 UI 更新。

2.2 总结

observeAsState 和 collectAsState 都是为了将传统的 LiveData 或 StateFlow 转换为 Compose 中的 State，从而实现 UI 的自动更新。两者的主要区别在于它们分别处理不同的数据类型：observeAsState 处理 LiveData，而 collectAsState 处理 StateFlow。

3. 协程与异步操作

Compose 和协程的结合使得我们可以高效地管理异步任务，并与 UI 生命周期同步。Jetpack Compose 提供了多个工具来启动协程、执行异步操作，并确保 UI 根据异步任务的结果自动更新。

3.1 rememberCoroutineScope

rememberCoroutineScope 用于创建与 UI 组件生命周期同步的协程作用域。通过它，您可以在 UI 组件中启动协程并保证协程在重组时不会被取消。

示例

@Composable
fun CoroutineScopeExample() {
    val scope = rememberCoroutineScope()

    Button(onClick = {
        scope.launch {
            delay(2000)
            println("异步任务完成")
        }
    }) {
        Text("启动异步任务")
    }
}

特点：

• 创建与 UI 生命周期同步的协程作用域。
• 适合在 UI 组件中启动独立的异步任务。

3.2 LaunchedEffect

LaunchedEffect 用于启动与 UI 生命周期相关联的协程，它会在组件进入 Composition 时启动，并且会根据依赖项变化重新启动协程。

示例

@Composable
fun LaunchedEffectCoroutine() {
    var count by remember { mutableStateOf(0) }

    LaunchedEffect(count) {
        delay(1000)
        count++
    }

    Text("计数：$count")
}

特点：

• 在 UI 组件的生命周期内启动协程。
• 依赖项变化时会重新启动协程。

3.3 produceState

produceState 用于从异步任务生成 Compose 状态。当异步任务完成时，状态会更新并触发 UI 更新。

示例

@Composable
fun ProduceStateExample() {
    val data by produceState("加载中...") {
        delay(2000)
        value = "异步任务完成"
    }

    Text("数据：$data")
}

特点：

• 将异步数据转为 Compose 状态。
• 状态更新后，UI 自动更新。

4. 附带效应的进阶应用

当需要在协程中确保使用最新的状态时，rememberUpdatedState 是一个非常重要的工具。它能够确保我们在回调中始终使用最新的状态，而不会因为闭包捕获了过期的值而导致逻辑错误。

示例

@Composable
fun TimerExample(onTick: (Int) -> Unit) {
    val currentOnTick by rememberUpdatedState(onTick)

    LaunchedEffect(Unit) {
        repeat(10) {
            delay(1000)
            currentOnTick(it)
        }
    }

    Text("定时器启动")
}

特点：

• 确保回调始终使用最新的状态。
• 避免由于闭包捕获旧值导致的状态不一致问题。

5. 总结

Jetpack Compose 提供了多种工具来高效管理副作用、协程和异步操作。这些工具使得我们能够简洁地处理 UI 和业务逻辑之间的交互，确保状态更新时 UI 自动响应，并且能够安全、清晰地管理异步任务。通过合理使用这些 API，我们可以大大提升应用的可维护性和性能。

API	用途	是否支持协程	生命周期绑定
SideEffect	每次重组时执行操作（无清理需求）	❌ 不支持	每次 Composition
DisposableEffect	需要清理资源的副作用（监听、注册等）	❌ 不支持	进入和退出 Composition
LaunchedEffect	适合异步操作，自动取消协程	✅ 支持	进入 Composition，依赖变化重启
rememberCoroutineScope	启动协程，作用域不受重组影响	✅ 支持	生命周期与 Composition 同步
produceState	从异步数据生成 Compose 状态	✅ 支持	生命周期与 Composition 同步
derivedStateOf	根据其他状态派生计算新状态	❌ 不支持	跟踪依赖状态，懒计算
snapshotFlow	将 Compose 状态转换为 StateFlow	✅ 支持	组合 Compose 和协程状态
rememberUpdatedState	捕获最新的状态以确保在回调中使用	❌ 不支持	Composition 生命周期内
observeAsState	将 LiveData 转换为 Compose 状态	✅ 支持	与 LiveData 生命周期同步
collectAsState	将 StateFlow 转换为 Compose 状态	✅ 支持	与 StateFlow 生命周期同步