常见高开销模式：复杂闭包计算、频繁变化的输入、不必要的派生订阅、链式推导

使用 derivedStateOf 时，若忽视其触发与计算机制，极易陷入四种典型的高开销模式。本章逐一剖析每种模式的原理、典型代码表现、调试定位方法以及优化策略，帮助你在早期阶段识别并规避这些陷阱。

4.1 复杂闭包计算

原理：derivedStateOf 的闭包在每次输入状态变化时都会完整重新执行。如果闭包内包含大量运算（例如列表过滤、排序、字符串拼接、JSON 解析或数学计算），即使最终派生值未变，开销仍会累加，拖慢重组周期。

// ❌ 高开销闭包：每次输入变化都重排序
val sortedList by remember(users) {
    derivedStateOf {
        users.sortedBy { it.lastActive }   // O(n log n)
    }
}

// ✅ 优化：在 ViewModel 中预计算，只暴露最终 State
// 或在 derivedStateOf 外使用 remember + snapshotFlow 做增量更新

4.2 频繁变化的输入

当派生状态依赖的输入 State 以极高频率更新（例如动画帧、ScrollState、实时输入框值），derivedStateOf 会紧随每次变化重算闭包。即使闭包逻辑简单，大量微秒级重算也会累积成 UI 线程压力。

• 典型场景：derivedStateOf { textFieldValue.length } 在用户打字时每字符触发一次。
• 危害：Compose 的 recomposition 范围被扩大，造成帧率下降。
• 方案：加入节流（debounce）或采样逻辑，使用 snapshotFlow 配合 debounce 操作符。

// 高频输入示例：滑动进度条
var sliderValue by remember { mutableFloatStateOf(0f) }
val formatted by remember {
    derivedStateOf { "%.2f".format(sliderValue) } // 每 1ms 都可能触发
}

// ✅ 使用 snapshotFlow + debounce
val debouncedFormatted by remember {
    derivedStateOf {
        snapshotFlow { sliderValue }
            .debounce(100) // 毫秒
            .map { "%.2f".format(it) }
            .collectAsState(false).value
    }
}

4.3 不必要的派生订阅

有些派生状态只在特定场景下被读取（例如根据用户权限展示不同 UI），但仍然被 Composable 函数在重组时无条件订阅。这会导致 derivedStateOf 即使在不需要的屏幕区域也被持续计算。

// ❌ 不必要订阅：整个页面都会订阅 userRole
@Composable
fun App(userRole: State<Role>) {
    val isAdmin by remember { derivedStateOf { userRole.value == Role.ADMIN } }
    // ... 数百行代码后，isAdmin 可能只在某个角落用到
}

// ✅ 最小作用域：仅在需要的地方订阅
@Composable
fun AdminPanel(userRole: State<Role>) {
    val isAdmin by remember { derivedStateOf { userRole.value == Role.ADMIN } }
    if (isAdmin) { // 仅这里订阅，不影响页面其他部分
        // 管理员面板
    }
}

4.4 链式推导

多个 derivedStateOf 首尾相连形成链路：derivedStateOf { ... } → derivedStateOf { ... } → derivedStateOf { ... }。每次根输入变化，整条链都会顺序重算，中间状态的每次重算都会触发下游订阅，形成级联开销。

• 原理：Compose 的 derivedStateOf 订阅是同步的，链式推导会阻塞重组流程直到所有节点完成。
• 对比方案：使用 snapshotFlow 可以异步处理中间状态，避免同步阻塞。

// ❌ 链式推导（三级）
val a by remember { derivedStateOf { x * 2 } }        // 第一层
val b by remember { derivedStateOf { a + y } }        // 第二层（依赖 a）
val c by remember { derivedStateOf { b.toString() } } // 第三层（依赖 b）

// ✅ 合并为一个 derivedStateOf 或使用 snapshotFlow 配合 combine
val c by remember {
    derivedStateOf {
        val a = x * 2
        val b = a + y
        b.toString()
    }
}