Jetpack Compose中Body因showError重组是否有副作用及规避方案

1. 是否存在副作用？ #

这种情况不属于副作用，但属于不必要的组件重组。副作用指的是Composable执行时对外部环境产生的可观察变更（比如未受控的网络请求、修改全局变量），而你的代码只是Body组件在不需要响应showError变化时依然发生了重组，会在Body逻辑复杂时造成性能浪费。

2. 为什么Body会重组？ #

因为你给Body传递了整个UiState对象（假设是data class），当showError变化时，UiState会生成新的实例（data class的copy操作会创建新对象）。Compose会对比Body的入参，发现入参对象变化后就触发重组，即便Body内部根本不依赖showError字段。

3. 避免不必要重组的方案 #

方案一：只传递Body真正依赖的状态字段

直接拆分Body的入参，只传入它需要的属性，而不是整个UiState。比如如果Body只需要用户数据：

@Composable
fun Screen(viewModel: ViewModel) {
    val state by viewModel.uiState.collectAsState()
    if (state.showError) {
        Text("sample view")
    }
    // 只传递Body需要的部分
    Body(userData = state.userData)
}

@Composable
fun Body(userData: UserData) {
    // todo
}

这样showError变化时，userData没有变更，Body就不会触发重组。

方案二：使用派生状态隔离依赖（适用于必须传递复合状态的场景）

如果确实需要给Body传递复合状态，但希望它只响应特定字段变化，可以用derivedStateOf缓存Body所需的状态子集：

@Composable
fun Screen(viewModel: ViewModel) {
    val state by viewModel.uiState.collectAsState()
    // 仅提取Body需要的状态，只有当这些状态变化时，bodyState才会更新
    val bodyState = remember {
        derivedStateOf {
            UiState(
                showError = false, // Body不需要该字段，固定值
                userData = state.userData
            )
        }
    }
    
    if (state.showError) {
        Text("sample view")
    }
    Body(state = bodyState.value)
}

方案三：确保状态类的稳定性

如果UiState尚未标记为稳定类型，Compose可能无法精准判断状态是否真的变更。确保你的状态类是稳定的（data class默认是稳定的，自定义类可添加@Stable注解）：

@Stable
data class UiState(
    val showError: Boolean,
    val userData: UserData
)

这是基础优化，配合前两种方案效果更好。

内容的提问来源于stack exchange，提问作者Leila_ygb