Compose 副作用

Compose中的 副作用（Side Effect） 是一个核心概念，理解它对编写高质量的Compose代码至关重要。

什么是副作用

定义

副作用是指在Composable函数执行过程中，对函数外部状态产生的影响，或者执行了与UI渲染无关的操作。

理想的Composable函数特征

// ✅ 纯函数：相同输入总是产生相同输出，无副作用
@Composable
fun PureComponent(text: String, color: Color) {
    Text(
        text = text,
        color = color
    )
}

为什么会有副作用

1. Compose的重组机制

// Compose的重组是不可预测的
@Composable
fun MyComponent() {
    // ❌ 这个函数可能被调用多次、乱序调用、或被跳过
    println("组件正在重组") // 副作用：日志输出
    
    var count by remember { mutableStateOf(0) }
    
    Button(onClick = { count++ }) {
        Text("点击次数: $count")
    }
}

2. 重组的不确定性

• 频率不确定：可能每帧都重组，也可能很久才重组一次
• 顺序不确定：子组件可能在父组件之前重组
• 可能被跳过：Compose会智能跳过不需要的重组
• 可能被中断：重组过程可能被更高优先级的重组中断

副作用的具体表现

1. 直接在Composable中执行副作用操作

@Composable
fun ProblematicComponent() {
    // ❌ 副作用：网络请求
    val data = fetchDataFromNetwork() // 每次重组都会执行
    
    // ❌ 副作用：文件操作
    writeToFile("some data") // 每次重组都会执行
    
    // ❌ 副作用：日志记录
    Log.d("TAG", "组件重组了") // 每次重组都会执行
    
    // ❌ 副作用：全局状态修改
    GlobalState.updateValue() // 每次重组都会执行
    
    Text("显示数据: $data")
}

2. 副作用导致的问题示例

// ❌ 问题代码：计数器异常
@Composable
fun BuggyCounter() {
    var count by remember { mutableStateOf(0) }
    
    // 副作用：每次重组都会增加计数
    count++ // 这会导致无限重组！
    
    Text("计数: $count")
}

// ❌ 问题代码：重复的网络请求
@Composable
fun BuggyDataLoader(userId: String) {
    var userData by remember { mutableStateOf<User?>(null) }
    
    // 副作用：每次重组都发起网络请求
    userData = loadUserData(userId) // 性能问题和重复请求
    
    userData?.let { user ->
        Text("用户: ${user.name}")
    }
}

如何识别副作用

副作用检查清单

@Composable
fun CheckSideEffects() {
    // ❌ 网络请求
    val data = api.getData()
    
    // ❌ 数据库操作
    database.insertUser(user)
    
    // ❌ 文件I/O
    File("path").writeText("content")
    
    // ❌ 修改全局变量
    GlobalCounter.increment()
    
    // ❌ 启动协程
    GlobalScope.launch { /* ... */ }
    
    // ❌ 注册监听器
    EventBus.register(listener)
    
    // ❌ 修改外部状态
    viewModel.updateState()
    
    // ❌ 系统调用
    startActivity(intent)
    
    // ❌ 日志记录（开发阶段可以，生产环境避免）
    println("重组了")
}

如何规避副作用问题

1. 使用LaunchedEffect处理副作用

@Composable
fun CorrectDataLoader(userId: String) {
    var userData by remember { mutableStateOf<User?>(null) }
    var isLoading by remember { mutableStateOf(false) }
    
    // ✅ 正确：使用LaunchedEffect
    LaunchedEffect(userId) { // 只在userId变化时执行
        isLoading = true
        try {
            userData = loadUserData(userId)
        } catch (e: Exception) {
            // 处理错误
        } finally {
            isLoading = false
        }
    }
    
    when {
        isLoading -> CircularProgressIndicator()
        userData != null -> Text("用户: ${userData.name}")
        else -> Text("加载失败")
    }
}

2. 使用DisposableEffect管理资源

@Composable
fun LocationListener(
    onLocationChanged: (Location) -> Unit
) {
    val currentCallback by rememberUpdatedState(onLocationChanged)
    
    // ✅ 正确：使用DisposableEffect管理监听器
    DisposableEffect(Unit) {
        val locationListener = LocationListener { location ->
            currentCallback(location)
        }
        
        // 注册监听器
        locationManager.requestLocationUpdates(locationListener)
        
        // 清理资源
        onDispose {
            locationManager.removeUpdates(locationListener)
        }
    }
}

3. 使用SideEffect处理非挂起的副作用

@Composable
fun AnalyticsTracker(screenName: String) {
    // ✅ 正确：使用SideEffect
    SideEffect {
        // 每次重组完成后执行，但会去重
        Analytics.trackScreenView(screenName)
    }
    
    // UI内容
    Text("当前页面: $screenName")
}

4. 使用produceState处理异步数据

@Composable
fun AsyncDataComponent(url: String) {
    // ✅ 正确：使用produceState
    val dataState by produceState<ApiResult<String>>(
        initialValue = ApiResult.Loading,
        key1 = url
    ) {
        try {
            val data = fetchData(url)
            value = ApiResult.Success(data)
        } catch (e: Exception) {
            value = ApiResult.Error(e)
        }
    }
    
    when (dataState) {
        is ApiResult.Loading -> CircularProgressIndicator()
        is ApiResult.Success -> Text(dataState.data)
        is ApiResult.Error -> Text("错误: ${dataState.exception.message}")
    }
}

Compose副作用API详解

1. LaunchedEffect - 协程副作用

@Composable
fun LaunchedEffectExample() {
    var count by remember { mutableStateOf(0) }
    
    // 组件首次组合时执行
    LaunchedEffect(Unit) {
        // 启动定时器
        while (true) {
            delay(1000)
            count++
        }
    }
    
    // 依赖变化时重新执行
    LaunchedEffect(count) {
        if (count >= 10) {
            // 执行某些操作
            showNotification("达到10次了！")
        }
    }
    
    Text("计数: $count")
}

2. DisposableEffect - 资源管理

@Composable
fun DisposableEffectExample(lifecycleOwner: LifecycleOwner) {
    DisposableEffect(lifecycleOwner) {
        val observer = LifecycleEventObserver { _, event ->
            when (event) {
                Lifecycle.Event.ON_RESUME -> {
                    // 恢复操作
                }
                Lifecycle.Event.ON_PAUSE -> {
                    // 暂停操作
                }
            }
        }
        
        lifecycleOwner.lifecycle.addObserver(observer)
        
        onDispose {
            lifecycleOwner.lifecycle.removeObserver(observer)
        }
    }
}

3. SideEffect - 同步副作用

@Composable
fun SideEffectExample(value: String) {
    // 每次成功重组后执行
    SideEffect {
        // 记录分析数据
        Analytics.track("value_changed", value)
    }
    
    Text(value)
}

4. derivedStateOf - 避免不必要的重组

@Composable
fun DerivedStateExample() {
    var name by remember { mutableStateOf("") }
    var surname by remember { mutableStateOf("") }
    
    // ✅ 只有当fullName真正改变时才重组
    val fullName by remember {
        derivedStateOf { "$name $surname".trim() }
    }
    
    Column {
        TextField(value = name, onValueChange = { name = it })
        TextField(value = surname, onValueChange = { surname = it })
        Text("全名: $fullName") // 只有fullName变化时才重组
    }
}

完整的最佳实践示例

@Composable
fun BestPracticeComponent(
    userId: String,
    onUserLoaded: (User) -> Unit
) {
    // 状态管理
    var user by remember { mutableStateOf<User?>(null) }
    var isLoading by remember { mutableStateOf(false) }
    var error by remember { mutableStateOf<String?>(null) }
    
    // 缓存最新的回调
    val currentCallback by rememberUpdatedState(onUserLoaded)
    
    // 数据加载副作用
    LaunchedEffect(userId) {
        isLoading = true
        error = null
        
        try {
            val loadedUser = userRepository.getUser(userId)
            user = loadedUser
            currentCallback(loadedUser)
        } catch (e: Exception) {
            error = e.message
        } finally {
            isLoading = false
        }
    }
    
    // 分析追踪副作用
    SideEffect {
        if (user != null) {
            Analytics.trackUserView(userId)
        }
    }
    
    // 资源管理副作用
    DisposableEffect(userId) {
        val subscription = userUpdateService.subscribe(userId) { updatedUser ->
            user = updatedUser
        }
        
        onDispose {
            subscription.unsubscribe()
        }
    }
    
    // UI渲染
    when {
        isLoading -> {
            CircularProgressIndicator()
        }
        error != null -> {
            Column {
                Text("错误: $error", color = Color.Red)
                Button(onClick = { 
                    // 触发重新加载，通过改变key来重启LaunchedEffect
                }) {
                    Text("重试")
                }
            }
        }
        user != null -> {
            UserProfile(user = user!!)
        }
    }
}

@Composable
fun UserProfile(user: User) {
    // 纯UI组件，无副作用
    Column {
        Text("姓名: ${user.name}")
        Text("邮箱: ${user.email}")
        AsyncImage(
            model = user.avatarUrl,
            contentDescription = "用户头像"
        )
    }
}

副作用调试技巧

1. 使用Compose调试工具

@Composable
fun DebuggableComponent() {
    // 添加重组计数器
    val recompositionCount = remember { mutableStateOf(0) }
    recompositionCount.value++
    
    SideEffect {
        Log.d("Compose", "重组次数: ${recompositionCount.value}")
    }
    
    // 你的组件内容
}

2. 性能监控

@Composable
fun PerformanceMonitoredComponent() {
    SideEffect {
        val startTime = System.currentTimeMillis()
        // 监控重组性能
        Choreographer.getInstance().postFrameCallback {
            val endTime = System.currentTimeMillis()
            if (endTime - startTime > 16) { // 超过一帧时间
                Log.w("Performance", "重组耗时过长: ${endTime - startTime}ms")
            }
        }
    }
}

总结

副作用的本质问题

1. 不可预测的执行时机：可能在任何时间、任何频率执行
2. 性能影响：重复执行昂贵操作
3. 状态不一致：可能导致UI和数据状态不同步
4. 资源泄漏：未正确清理的资源

解决方案

1. 使用正确的Effect API：LaunchedEffect、DisposableEffect、SideEffect
2. 合理的依赖管理：正确设置Effect的key
3. 资源清理：在onDispose中清理资源
4. 状态提升：将副作用移到合适的层级

最佳实践

• 保持Composable函数的纯净性
• 使用remember缓存昂贵的计算
• 合理使用derivedStateOf避免不必要的重组
• 副作用操作放在Effect中执行
• 正确管理Effect的生命周期

好的Compose代码应该是可预测、高性能、无副作用的