>在学习了 Compose 的基础语法、状态管理和动画系统之后，我开始思考一个每个有经验的开发者都绕不开的话题——**性能优化**。前端世界里有 `React.memo`、`useMemo`、`useCallback`、Vue 的 `computed`，以及 React DevTools 的"高亮重渲染"功能，这些工具帮助我们避免不必要的重新渲染。那么，Compose 是怎么做的呢？

令我惊喜的是，Compose 的优化思路和前端非常相似，甚至在某些地方更加优雅。本文将从前端开发者的视角，通过四个可交互 Demo，深入学习 Compose 性能优化的核心技术：**重组可视化、remember 缓存、derivedStateOf 优化、LazyList key 和 @Stable**。

---

## 快速体验性能优化

### 运行本课程示例

在深入理论之前，先让我们直接跑起来，动手感受：

#### Web 版本（推荐给前端开发者）

```bash
# 克隆项目（如果还没有）
git clone <repository-url>
cd learn-jetpack-compose

# 运行本课程的 WASM 版本
./gradlew :lesson-16-performance:wasmJsBrowserDevelopmentRun
```

运行成功后，浏览器会自动打开 `http://localhost:8080`，你将看到：

- **重组可视化**：切换"状态放顶层 vs 状态下沉"，直观看到闪烁边框标记的重组范围
- **remember 缓存**：两列面板对比，"无缓存"侧的计算次数随重组线性增长
- **derivedStateOf**：搜索水果列表，"优化版"的过滤执行次数明显少于"未优化版"
- **LazyColumn key**：100 条数据打乱顺序，感受有无 key 的行为差异

💡 **前端开发者的优势**：WASM 版本可以直接在浏览器中查看效果，就像开发普通的 Web 应用一样！

#### 桌面版本（可选）

```bash
./gradlew :lesson-16-performance:run
```

**效果预览：**

![企业微信截图_1ad7e93c-fea4-4bfb-a28f-1188f8c00471.png](https://developer.qcloudimg.com/http-save/yehe-320080/6b27239dd95e7d49fec3651d86beeb02.png)
---

## 从前端视角理解 Compose 重组

### 重组 vs 重新渲染

在前端开发中，我们熟悉"重新渲染"（Re-render）这个概念：

**React 中的重新渲染：**
```jsx
function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>+1 ({count})</button>
      <ChildA />  {/* 每次 count 变化，ChildA 也会 re-render */}
      <ChildB />  {/* 除非用 React.memo 包裹 */}
    </div>
  );
}

// 用 React.memo 优化：props 未变化就跳过
const ChildA = React.memo(() => <div>静态内容 A</div>);
```

**Compose 中的重组（Recomposition）：**
```kotlin
@Composable
fun Parent() {
    var count by remember { mutableStateOf(0) }

    Column {
        Button(onClick = { count++ }) {
            ChineseText("+1 (${count})")
        }
        ChildA()  // 如果 count 变化，Parent 重组时 ChildA 也可能重组
        ChildB()
    }
}
```

核心差别在于：React 需要 `React.memo` 手动优化，而 Compose 的编译器会自动推断哪些 Composable 的参数没有变化，从而跳过重组——**前提是参数类型是稳定的（Stable）**。

---

## 核心优化技术

### 1. 重组可视化与状态下沉

#### 问题：状态放顶层，重组范围过大

```kotlin
// ❌ 问题写法：count 状态在父组件
@Composable
fun ParentWithStateAtTop() {
    var count by remember { mutableStateOf(0) }

    Column {
        // 点击按钮 → count 变化 → Parent 重组 → 所有子组件跟着重组
        Button(onClick = { count++ }) {
            ChineseText("计数: $count")
        }
        StaticChildA()  // 与 count 无关，却被迫重组
        StaticChildB()  // 同上
    }
}
```

**这就像 React 中把所有 state 都放在顶层组件，然后所有子组件都会 re-render。**

#### 解决方案：状态下沉（State Hoisting 的反向思维）

```kotlin
// ✅ 优化写法：状态下沉到真正需要它的组件
@Composable
fun ParentStateLowered() {
    Column {
        CounterChild()  // 状态和按钮都在这里，只有它自己重组
        StableChildA()  // 不参与重组 ✅
        StableChildB()  // 不参与重组 ✅
    }
}

@Composable
private fun CounterChild() {
    var count by remember { mutableStateOf(0) }  // 状态在此

    Button(onClick = { count++ }) {
        ChineseText("计数: $count")
    }
}
```

**前端类比**：
- React：将 `useState` 移到最小必要的子组件中
- Vue：将 `ref` 放在真正需要的组件里，避免不必要的响应式触发

**关键原则**：将状态放在"最小必要范围"内，缩小重组边界。

---

### 2. remember 缓存（类比 useMemo/computed）

`remember` 是 Compose 中最基础的缓存机制。

#### 对比：无缓存 vs remember

```kotlin
// ❌ 无缓存：每次重组都执行（即使输入没变）
@Composable
fun WithoutRemember(inputN: Int) {
    val result = expensiveSum(inputN)  // 每次重组都算一遍
    Text("结果: $result")
}

// ✅ remember(key)：只有 key 变化时才重新计算
@Composable
fun WithRemember(inputN: Int) {
    val result = remember(inputN) {
        expensiveSum(inputN)  // 只有 inputN 变化时才执行
    }
    Text("结果: $result")
}
```

**前端对比表格：**

| 场景 | React | Vue | Compose |
|------|-------|-----|---------|
| 缓存计算结果 | `useMemo(() => calc(dep), [dep])` | `computed(() => calc(dep))` | `remember(dep) { calc(dep) }` |
| 缓存对象引用 | `useMemo(() => new Obj(), [])` | `ref(new Obj())` | `remember { Obj() }` |
| 缓存函数 | `useCallback(() => fn(), [dep])` | 方法直接定义 | `remember { { fn() } }` |
| 缓存滚动状态 | 自行管理 | 自行管理 | `rememberScrollState()` |

**我的实践经验**：一开始我以为 `remember { }` 等同于 `useMemo(..., [])`（空依赖），但实际上 `remember` 有两种形式：
- `remember { value }`：整个 Composable 生命周期内只计算一次（等同于 `useMemo(fn, [])`）
- `remember(key) { value }`：key 变化时重新计算（等同于 `useMemo(fn, [key])`）

---

### 3. derivedStateOf（类比 Vue computed）

`derivedStateOf` 是比 `remember(key)` 更"智能"的优化工具，特别适合**派生状态依赖于频繁变化的原始状态**的场景。

#### 经典场景：搜索过滤

```kotlin
// ❌ 问题写法：直接过滤（每次 query 变化都触发整个组件树更新）
@Composable
fun SearchList(query: String, list: List<String>) {
    val filtered = list.filter { it.contains(query) }  // 每次按键都重算

    // 下游组件：每次 query 变化都会重组
    FilteredListDisplay(filtered)
}

// ✅ 优化写法：derivedStateOf
@Composable
fun SearchListOptimized() {
    var query by remember { mutableStateOf("") }

    // derivedStateOf：只有过滤结果真正变化时，才通知依赖它的组件重组
    val filtered by remember {
        derivedStateOf {
            allItems.filter { it.contains(query, ignoreCase = true) }
        }
    }

    TextField(value = query, onValueChange = { query = it })
    FilteredListDisplay(filtered)  // 只有 filtered 内容变化时才重组
}
```

**derivedStateOf 的核心价值**：

假设用户输入 "ab"，过滤结果是 ["apple", "cab"]；再输入 "abc"，过滤结果也是 ["apple", "cab"]（相同）。
- 没有 `derivedStateOf`：`FilteredListDisplay` 每次按键都重组
- 有 `derivedStateOf`：Compose 比较结果发现没变，**跳过** `FilteredListDisplay` 的重组

**前端对比：**

| | React | Vue | Compose |
|--|-------|-----|---------|
| 派生状态 | `useMemo(() => derive(s), [s])` | `computed(() => derive(s))` | `derivedStateOf { derive(s) }` |
| 触发时机 | deps 变化时重新计算 | 依赖变化时 | 原始状态变化时执行，结果不同才通知 |
| 优势 | 简单直接 | 自动追踪依赖 | 细粒度跳过下游重组 |

**踩过的坑**：`derivedStateOf` 需要包裹在 `remember { }` 里，否则每次重组都会创建新的派生状态对象：

```kotlin
// ❌ 忘记 remember 包裹
val filtered by derivedStateOf { ... }  // 每次重组都重新创建！

// ✅ 正确用法
val filtered by remember { derivedStateOf { ... } }
```

---

### 4. LazyColumn key 和 @Stable

这是 Compose 中对应前端 `key` 的核心优化，同时加入了 `@Stable` 注解的稳定性声明。

#### key 参数：帮助 Compose 识别列表项

```kotlin
// ❌ 没有 key：按位置匹配，打乱顺序后全量重组
LazyColumn {
    items(items) { item ->
        ListItemView(item)
    }
}

// ✅ 提供 key：按 id 匹配，打乱顺序只移动位置，不重建组件
LazyColumn {
    items(
        items = items,
        key = { it.id }  // 稳定唯一的 key
    ) { item ->
        ListItemView(item)
    }
}
```

**和 React/Vue 的对比：**

```jsx
// React
items.map(item => <ListItem key={item.id} item={item} />)

// Vue
<li v-for="item in items" :key="item.id">...</li>

// Compose
items(items = items, key = { it.id }) { item -> ListItemView(item) }
```

三者语义完全一致：**提供稳定的 key，让框架能高效地识别列表项的增删改和顺序变化**。

#### @Stable：告诉 Compose"这个类型是稳定的"

```kotlin
// ❌ 普通 data class：Compose 不确定是否稳定，每次父重组都会重组参数为此类型的子组件
data class UnstableItem(val id: Int, val name: String)

// ✅ @Stable 注解：告诉 Compose 编译器"相同实例 = 相同数据"
// Compose 可以对使用此类型的子组件做跳过优化（类比 React.memo）
@Stable
data class StableItem(val id: Int, val name: String)
```

**为什么需要 @Stable？**

Compose 编译器在编译时会分析每个类型是否"稳定"。对于自定义 `data class`，编译器默认不确定它是否稳定（因为可能有可变属性），所以不会自动跳过。加上 `@Stable` 之后，就明确告诉编译器：**如果参数引用没变，就不用重组我的子 Composable**。

| 概念 | React | Compose |
|------|-------|---------|
| 跳过组件更新 | `React.memo(Component)` | `@Stable` 数据类 + key |
| 深层比较 | `React.memo(Component, deepEqual)` | 无直接对应，通常不需要 |
| 不稳定情况 | 每次渲染都是新对象引用 | 无 `@Stable` 的自定义类 |

---

## Compose 性能优化全景对比

| 优化目标 | React | Vue | Compose |
|---------|-------|-----|---------|
| 缓存计算 | `useMemo` | `computed` | `remember(key) { }` |
| 缓存函数 | `useCallback` | 方法定义 | `remember { lambda }` |
| 跳过组件更新 | `React.memo` | 自动（响应式） | `@Stable` + Compose 编译器 |
| 派生状态 | `useMemo` | `computed` | `derivedStateOf` |
| 列表 key | `key` prop | `:key` | `items(key = { it.id })` |
| 调试工具 | React DevTools（高亮更新） | Vue DevTools | Layout Inspector / 边框高亮 |
| 状态范围 | 组件 + Context | 组件 + Pinia/Vuex | Composable + remember |

---

## 最佳实践清单

### 从前端迁移的思维转换

1. **React.memo + props 不变 → @Stable data class**
   - 前端：`const Item = React.memo(({ data }) => <div>{data.name}</div>)`
   - Compose：`@Stable data class Item(val name: String)` + 正确的 `key`

2. **useMemo(fn, [dep]) → remember(dep) { fn() }**
   - 语义几乎一致，key 变化时重算

3. **useMemo(fn, []) → remember { fn() }**
   - 整个生命周期只算一次

4. **Vue computed → derivedStateOf**
   - `derivedStateOf` 比 `computed` 更细粒度：原始 state 变化但结果不变时，不触发下游

5. **\<li key={id}\> → items(key = { it.id })**
   - 完全对应，帮助 Compose 高效处理列表变化

### 常见错误

#### ❌ 不稳定的 lambda 作为参数
```kotlin
// ❌ 错误：每次父重组都创建新 lambda，导致子组件无法跳过
@Composable
fun Parent() {
    var count by remember { mutableStateOf(0) }
    // lambda 在每次重组时是新对象 → ChildComponent 无法跳过重组
    ChildComponent(onClick = { doSomething(count) })
}

// ✅ 正确：用 remember 缓存 lambda（或状态下沉）
@Composable
fun Parent() {
    var count by remember { mutableStateOf(0) }
    val onClick = remember(count) { { doSomething(count) } }
    ChildComponent(onClick = onClick)
}
```

#### ❌ derivedStateOf 忘记 remember 包裹
```kotlin
// ❌ 每次重组都重新创建 derivedState 对象
val filtered by derivedStateOf { list.filter { it.active } }

// ✅ 正确
val filtered by remember { derivedStateOf { list.filter { it.active } } }
```

#### ❌ LazyList 使用不稳定的 key
```kotlin
// ❌ 使用 index 做 key：和不加 key 一样
items(items = list, key = { index, _ -> index }) { ... }

// ✅ 使用稳定唯一 ID
items(items = list, key = { it.id }) { ... }
```

---

## 总结

通过本文的学习，我们从前端开发者的视角梳理了 Compose 性能优化的四大核心技术：

**核心要点：**
- **状态下沉** — 把状态放在最小必要范围，缩小重组边界（类比减少 React 组件树的 re-render 范围）
- **remember(key)** — 缓存昂贵计算，key 变化才重算（等同于 `useMemo([dep])`）
- **derivedStateOf** — 派生状态优化，原始 state 变但结果不变时不触发下游（比 Vue `computed` 粒度更细）
- **LazyList key + @Stable** — 列表高效更新（`key` 对应 React/Vue 的 key，`@Stable` 对应 `React.memo`）

**前端开发者的优势：**
- 重组 ≈ re-render，思维模型直接迁移
- key 的用法和前端完全一致
- useMemo/computed 有对应的 remember/derivedStateOf

**需要适应的地方：**
- `@Stable` 注解需要手动声明，不像 Vue 自动追踪响应式依赖
- `derivedStateOf` 必须包裹在 `remember` 里，否则失效
- Compose 没有内置的"性能高亮"工具，需要借助 Android Studio Layout Inspector 或手动可视化

---

在学习了 Compose 的基础语法、状态管理和动画系统之后，我开始思考一个每个有经验的开发者都绕不开的话题——性能优化。前端世界里有 React.memo、useMemo、useCallback、Vue 的 computed，以及 React DevTools 的"高亮重渲染"功能，这些工具帮助我们避免不必要的重新渲染。那么，Compose 是怎么做的呢？

前端开发者的 Kotlin 之旅：Compose 性能优化最佳实践

前端开发工程师

前端

编程语言

客户端

本文从React/Vue开发者视角解析Jetpack Compose性能优化技术，涵盖重组可视化、remember缓存、derivedStateOf优化和LazyList key等核心技巧。通过4个可交互Demo对比Compose与前端框架的优化策略异同，帮助开发者快速掌握Compose状态管理最佳实践，实现高效UI渲染。

编译器

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

本文从React/Vue开发者视角解析Jetpack Compose性能优化技术，涵盖重组可视化、remember缓存、derivedStateOf优化和LazyList key等核心技巧。通过4个可交互Demo对比Compose与前端框架的优化策略异同，帮助开发者快速掌握Compose状态管理最佳实践，实现高效UI渲...

前端开发者的 Kotlin 之旅：Compose 性能优化最佳实践-腾讯云开发者社区-腾讯云

前端开发者的 Kotlin 之旅：Compose 性能优化最佳实践

前端开发者的 Kotlin 之旅：Compose 性能优化最佳实践

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐