在 Compose 中，可以使用 StateFlow 来管理 UI 状态。但当一个页面需要多个 StateFlow 时，如何更好地进行重组？

我们可以使用 combine 函数将几个 StateFlow 的最新值组合成一个新值。然后，使用一个只有当这些 StateFlow 发生变化时才会重新计算的 derivedStateOf，将这个组合的新值转换为 UI。

以下是一个具体的示例：

data class ViewState(val count1: Int, val count2: Int)

@Composable
fun MultipleStateFlows() {
    val stateFlow1 = stateFlowOf(0)
    val stateFlow2 = stateFlowOf(0)

    val viewState = combine(stateFlow1, stateFlow2) { count1, count2 ->
        ViewState(count1, count2)
    }

    val count1 by viewState.collectAsState().map { it.count1 }
    val count2 by viewState.collectAsState().map { it.count2 }

    Column {
        Text("Count1: $count1")
        Text("Count2: $count2")

        Button(onClick = { stateFlow1.value += 1 }) {
            Text("Count1++")
        }

        Button(onClick = { stateFlow2.value += 1 }) {
            Text("Count2++")
        }
    }
}

在上述示例中，我们先定义两个 StateFlow，然后使用 combine 将它们组合成了一个新的 ViewState。最后使用 derivedStateOf 将 ViewState 转换为 UI。在 UI 中可以通过点击按钮的形式来改变两个 StateFlow 的值，整个 Compose 中只会根据 StateFlow 的变化来进行重组 UI。