Android Compose副作用困惑：如何修正非顺序执行下的计数逻辑

原Bug代码核心问题 #

官方提供的这段代码错误地假设Compose函数是顺序执行的，但实际上Compose支持并行、乱序执行，依赖局部变量的副作用会导致计数完全不可靠：

@Composable
fun Buggy(
    items: List<String>
) {
    // Composabe functions can:
    // Execute in any order because they are assumed to be "pure" functions
    // Run in parallel
    // Whether or not you observe this happening is dependant on
    // your runtime environment and the compose runtime code
    // But *DO NOT* assume that because you have written code that
    // appears sequential that it will be executed sequentially...
    // For instance, the following code is not correct:

    var itemCount = 0
    Row {
        Column {
            items.forEach { item ->
                Text("Item: $item")
                itemCount++ // Avoid! Side-effect of the column recomposing.
            }
        }
        // Inuitively, we expect that this will render the length of myList
        // But in reality, this code may run during (or even before!) the execution Column
        // Therefore, relying on side effects such as read/writes to some external state
        // And expecting execution to be sequential is a bug waiting to happen
        Text("Count: $itemCount")
    }
}

问题本质：

• 局部变量itemCount不属于Compose的可观察状态，修改后不会触发UI重组
• Column的执行可能与右侧Text并行或滞后，导致计数显示为初始值或错误数值
• 每次重组时itemCount都会被重置为0，进一步加剧数值混乱

你的尝试代码依然存在Bug #

你用LaunchedEffect修改itemCount的写法并没有解决核心问题：

@Composable
fun NotBuggy(
    items: List<String>
) {
    var itemCount = 0
    Row {
        Column {
            items.forEach { item ->
                Text("Item: $item")
                LaunchedEffect(Unit) {
                    itemCount++
                }
            }
        }
        Text("Count: $itemCount")
    }
}

具体问题：

1. LaunchedEffect是异步协程执行，代码块会在重组完成后运行，itemCount的更新完全滞后于右侧Text的渲染
2. itemCount是普通局部变量，即使被修改也不会触发UI重组，右侧Text永远显示初始值0
3. 每次重组时LaunchedEffect(Unit)都会重复触发，导致itemCount被多次累加，数值彻底错误

正确实现方案（不直接使用items.size） #

要在Compose的并行执行模型下安全实现计数，必须严格遵循状态管理和副作用规则：

@Composable
fun CorrectCount(
    items: List<String>
) {
    // 定义可观察状态，确保数值变化能触发UI重组
    val itemCount = remember { mutableStateOf(0) }
    // 保存已处理的item，避免重组时重复计数
    val processedItems = remember { mutableSetOf<String>() }

    // 当items列表整体变化时，重置状态
    remember(items) {
        processedItems.clear()
        itemCount.value = 0
        true
    }

    Row {
        Column {
            items.forEach { item ->
                Text("Item: $item")
                // SideEffect会在当前组件成功组合后执行，且每次重组仅执行一次
                SideEffect {
                    if (processedItems.add(item)) {
                        itemCount.value++
                    }
                }
            }
        }
        // 观察状态变量，确保计数更新时自动刷新UI
        Text("Count: ${itemCount.value}")
    }
}

关键设计点：

• 使用mutableStateOf创建可观察状态，确保计数变化能触发UI重组
• remember保证状态在重组过程中被保留，不会每次重组都重置
• SideEffect同步执行，避免异步延迟问题，确保计数与组件组合同步
• processedItems集合防止重复计数（比如列表不变但发生重组时，不会重复累加）

如果你的item可能存在重复，可以改用索引追踪，避免重复项导致的计数错误：

@Composable
fun CorrectCountWithDuplicates(
    items: List<String>
) {
    val itemCount = remember { mutableStateOf(0) }
    val processedIndices = remember { mutableSetOf<Int>() }

    remember(items) {
        processedIndices.clear()
        itemCount.value = 0
        true
    }

    Row {
        Column {
            items.forEachIndexed { index, item ->
                Text("Item: $item")
                SideEffect {
                    if (processedIndices.add(index)) {
                        itemCount.value++
                    }
                }
            }
        }
        Text("Count: ${itemCount.value}")
    }
}

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