从零开始学Compose声明式UI - 第3节 🔖 标记函数

⚡ 理解 @Composable、Composable 函数 与 重组 (Recomposition) 是掌握 Jetpack Compose 的基石。下面我们用最直观的方式拆解这三个核心概念。

🏷️ 1. @Composable 注解

🔖 标记函数

@Composable 注解告诉 Compose 编译器：这个函数是用来描述 UI 的。它会把函数转换为可以在重组中高效执行的代码。

🧩 声明式

你只需描述 UI 应该是什么样子，而不需要手动更新视图。Compose 会根据状态自动完成刷新。

⚙️ 编译器魔法

编译器会为 Composable 函数生成额外的参数 (例如 Composer)，实现高效的增量更新。

@Composable
fun Greeting(name: String) {
    Text(
        text = "你好，$name！",
        color = Color(0xFF1F4A7A)
    )
}

🧬 2. Composable 函数的特点

📌 可组合 (Composable) — 可以调用其他 Composable 函数，构建组件树。
⚡ 快速 & 轻量 — 函数本身不返回 View，而是描述 UI 的“蓝图”。
🔁 可重组 (Recomposable) — 当输入状态变化时，函数会重新执行以更新 UI。
🧼 无副作用 (Side-effect aware) — 应避免在 Composable 中直接修改可变对象，推荐使用 remember / LaunchedEffect。
📐 顺序执行 — 同一帧内按调用顺序生成 UI 节点，但重组可能跳过未改变的部分。

特性	传统 View 系统	Compose 声明式
UI 构建	XML 布局 + findViewById	@Composable 函数 + Kotlin DSL
更新方式	手动操作 View (setText, setVisibility…)	状态驱动 → 自动重组
性能关键	避免过度绘制	跳过稳定且未改变的部分 (智能重组)
可测试性	依赖 instrumentation	直接调用 Composable 函数 + 语义树

🔄 3. 重组 (Recomposition) 机制

重组是指当 Composable 函数读取的状态 (State) 发生变化时，Compose 会重新执行那些受影响的函数，以更新 UI 树。它只更新需要变化的部分，而不是整个界面。

智能跳过 — 如果输入参数没有改变且为稳定类型，Compose 会跳过重组。
非阻塞 — 重组发生在 Composition 阶段，与布局、绘制分离。
可取消 — 如果重组过程中状态再次变化，旧的重组会被取消，以最新状态为准。

📈 重组流程

① 状态变化 ⬇️ ② 标记受影响 Composable ⬇️ ③ 跳过稳定未变分支 ⬇️ ④ 执行重组 (仅需变部分) ⬇️ ⑤ 更新 UI 树

💡 下面是一个典型的重组示例：当 count 状态变化时，只有读取它的 Composable 会重组。

@Composable
fun CounterApp() {
    var count by remember { mutableStateOf(0) }

    Column(
        modifier = Modifier.padding(24.dp)
    ) {
        Text(text = "点击次数: $count")  // ⬅️ 读取 count，重组时更新
        Button(onClick = { count++ }) {
            Text("➕ 增加")
        }
    }
}

📌 核心回顾

@Composable 是声明式 UI 的入口，让函数具备组合 & 重组能力。
Composable 函数 轻量、无副作用、可跳过，构建 UI 树。
重组是响应状态变化的增量更新机制，只更新受影响的部分，高效且智能。

📘 Compose 基础概念 第3课

🔖 标记函数

🧩 声明式

⚙️ 编译器魔法

📘 Compose 基础概念第3课