Jetpack Compose中的副作用的使用

奇舞周刊

于 2024-11-04 18:02:05 发布

阅读量426

点赞数 3

本文链接：https://blog.csdn.net/qiwoo_weekly/article/details/143501137

版权

本文作者系360奇舞团前端开发工程师

什么是副作用？

副作用是指在函数式编程和声明式UI框架中，那些在函数执行过程中除了返回结果之外还产生的其他影响或操作。在Jetpack Compose这样的声明式UI框架中，副作用通常指的是那些在Composable函数中执行的操作，这些操作会在每次Composable函数被重新计算时执行，而不是只在函数首次调用时执行。这与命令式编程中的副作用有所不同，后者通常指的是在函数执行过程中改变全局状态或产生外部影响。

为什么需要管理副作用？

在Jetpack Compose这样的声明式UI框架中，管理副作用至关重要。首先，它符合声明式编程模型的要求，即界面通过函数的反复执行来渲染。其次，管理副作用可以优化性能和资源利用，避免不必要的UI重组和计算。例如，如果不正确地管理网络请求或事件监听器的注册和注销，可能会导致性能下降或资源泄漏。因此，了解如何正确使用副作用API是构建高效、可维护应用的关键。

Jetpack Compose 中的副作用 API

LaunchedEffect

定义：LaunchedEffect 用于在 Composable 中启动一个协程。它在指定的key变化时重新启动，并可以执行异步操作。

使用场景：

当数据变化时，需要进行一些操作，比如网络请求，数据更新等

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import kotlinx.coroutines.delay
import androidx.compose.material.Button
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp


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

    //第一次加载的时候也会执行一次
    LaunchedEffect(count) {
        println("发生了变化")
        // 在这里可以做网络请求
        delay(1000)
        result++;

    }

    Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.padding(top=80.dp)) {
        Text(text = "Count: "+count+"  result="+result)
        Button(onClick = { count++ }) {
            Text("加")
        }
    }
}

关键点：

适合用于处理与状态变化直接相关的副作用。
每次键值变化时会启动新的协程，之前的协程会被取消。

rememberCoroutineScope

定义：rememberCoroutineScope 返回一个 CoroutineScope，它可以在 Composable 中启动新的协程。适合在用户交互时使用。直译的话就是记住协程区域

使用场景：

异步操作：当需要在 Compose 组件中执行异步操作时（如网络请求、文件读写等），可以使用 rememberCoroutineScope 来启动协程。

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import kotlinx.coroutines.delay
import androidx.compose.material.Button
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch

@Composable
fun CoroutineScopeDemo() {
    val coroutineScope = rememberCoroutineScope() // 创建协程作用域
    var count by remember { mutableStateOf(0) }
    var result by remember { mutableStateOf(0) }


    Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.padding(top=80.dp)) {
        Text(text = "Count: "+count+"  result="+result)
        Button(onClick = {
            coroutineScope.launch {
                delay(1000) // 模拟延迟
                result++ // 更新状态
            }
        }) {
            Text("点击")
        }
    }
}

关键点：

rememberCoroutineScope 提供了一个方便的方式来在用户交互时启动协程，确保在 UI 线程之外执行耗时操作。

SideEffect

定义：SideEffect 用于在每次重组时执行副作用。它适合记录日志、调试信息等，而不依赖于特定的状态变化。

使用场景：

调试信息的记录：在每次重组时输出状态，有助于调试更新某个外部状态而不影响 UI。

import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment

import androidx.compose.material.Button
import androidx.compose.runtime.SideEffect

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

    SideEffect {
        // 每次重组时都会执行这个块
        println(" -------count: $count") // 打印当前计数
    }

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "Count: $count")
        Button(onClick = { count++ }) {
            Text("点击")
        }
    }
}

关键点：

SideEffect 在每次重组时执行，适合用于需要执行的副作用。
它不依赖于任何状态，因此在多个状态变化时也会被调用。

DisposableEffect

定义：DisposableEffect 用于在 Composable 退出时执行清理操作，例如解除注册、释放资源。

使用场景：

资源的清理：如取消网络请求、解除事件监听。确保不再需要的资源在 Composable 退出时被正确释放。

import android.content.Context
import android.hardware.Sensor
import android.hardware.SensorEvent
import android.hardware.SensorEventListener
import android.hardware.SensorManager
import androidx.compose.foundation.layout.fillMaxSize

import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.runtime.DisposableEffect
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
@Composable
fun DisposableEffectDemo() {
    val context = LocalContext.current
    var sensorData by remember { mutableStateOf("无数据") }

    DisposableEffect(Unit) {
        // 获取传感器管理器
        val sensorManager = context.getSystemService(Context.SENSOR_SERVICE) as SensorManager
        val sensor = sensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER)

        // 创建传感器事件监听器
        val sensorEventListener = object : SensorEventListener {
            override fun onSensorChanged(event: SensorEvent) {
                // 更新传感器数据
                sensorData = "X: ${event.values[0]}, Y: ${event.values[1]}, Z: ${event.values[2]}"
            }

            override fun onAccuracyChanged(sensor: Sensor, accuracy: Int) {

            }
        }

        // 注册监听器
        sensorManager.registerListener(sensorEventListener, sensor, SensorManager.SENSOR_DELAY_NORMAL)

        // 清理代码
        onDispose {
            // 注销监听器
            sensorManager.unregisterListener(sensorEventListener)
        }
    }

    // 组件的 UI 逻辑
    Text(
        text = sensorData,
        modifier = Modifier.fillMaxSize()
    )
}

关键点：