Compose + 协程：声明式UI下的异步新范式——告别生命周期，拥抱重组安全

文/常利兵
“当声明式遇见协程，异步逻辑终于有了归宿”

---

💡 开篇：从“命令式焦虑”到“声明式从容”

上周，团队重构商品详情页：

“用Compose重写后，代码量减少40%，但新成员提问：
‘网络请求放哪里？怎么避免重组时重复请求？页面退出如何取消？’
我笑着写下三行代码——问题烟消云散。”

传统View系统痛点：
❌ 手动管理lifecycleScope/viewModelScope
❌ 担心重组触发重复请求
❌ 页面退出需显式取消协程

Compose的答案：
✨ 协程与重组深度绑定
✨ 状态驱动异步逻辑
✨ 生命周期隐式管理

🌟 本文所有方案均经千万级APP验证，文末附开源工具库

---

🔑 核心范式一：LaunchedEffect —— 重组安全的“自动协程”

❌ 传统陷阱（View系统思维残留）

@Composable
fun ProductDetailScreen(viewModel: ProductViewModel) {
    // ❌ 重组时重复触发！滑动列表即触发10次请求
    LaunchedEffect(Unit) {
        viewModel.loadProduct() 
    }
    
    // ❌ 更危险：直接写launch（无限重组！）
    // lifecycleScope.launch { ... } 
}

✅ 正确姿势：键控触发 + 状态驱动

@Composable
fun ProductDetailScreen(
    productId: String,
    viewModel: ProductViewModel = hiltViewModel()
) {
    // ✅ 仅当productId变化时触发（首次进入+参数变更）
    LaunchedEffect(productId) {
        viewModel.loadProduct(productId)
    }
    
    // ✅ 多键组合：仅当用户登录状态变化时刷新
    val isLoggedIn = remember { mutableStateOf(false) }
    LaunchedEffect(productId, isLoggedIn.value) {
        if (isLoggedIn.value) {
            viewModel.fetchUserWish(productId)
        }
    }
    
    // UI状态驱动
    when (val state = viewModel.uiState.value) {
        is Loading -> CircularProgressIndicator()
        is Success -> ProductContent(state.data)
        is Error -> ErrorView(state.msg)
    }
}

📌 黄金法则：

LaunchedEffect的键 = 异步操作的触发条件

• Unit：仅首次重组触发（慎用！）
• key1, key2：任一键变化即重启协程（自动取消旧协程）
• null：永不触发（用于条件控制）

---

🔑 核心范式二：rememberCoroutineScope —— 事件回调的“安全发射器”

❌ 危险写法：在onClick中直接launch

@Composable
fun CartButton() {
    val scope = rememberCoroutineScope() // ✅ 正确：作用域绑定Composable
    
    Button(onClick = {
        // ❌ 错误：直接用lifecycleScope（Compose中无此概念！）
        // lifecycleScope.launch { ... }
        
        // ✅ 正确：通过rememberCoroutineScope启动
        scope.launch {
            submitOrder() // 页面退出自动取消！
        }
    }) {
        Text("提交订单")
    }
}

💡 为什么安全？

• rememberCoroutineScope() 返回的Scope随Composable销毁自动取消
• 无需手动管理生命周期，彻底告别IllegalStateException
• 与LaunchedEffect互补：
  • LaunchedEffect：响应状态变化（声明式）
  • rememberCoroutineScope：响应用户事件（命令式）

---

🔑 核心范式三：协程 + 状态提升 —— 异步逻辑的“纯净分离”

❌ 反模式：在Composable内写业务逻辑

@Composable
fun BadSearchScreen() {
    var results by remember { mutableStateOf<List<Item>>(emptyList()) }
    
    LaunchedEffect(searchQuery) {
        // ❌ 业务逻辑污染UI层！测试困难、复用性差
        val response = api.search(searchQuery)
        results = response.items
    }
}

✅ 推荐架构：ViewModel + StateFlow

// ViewModel层（纯净业务逻辑）
@HiltViewModel
class SearchViewModel @Inject constructor(
    private val repository: SearchRepository
) : ViewModel() {
    
    private val _searchQuery = MutableStateFlow("")
    val uiState: StateFlow<SearchUiState> = _searchQuery
        .debounce(300) // 防抖
        .filter { it.length >= 2 } // 有效输入
        .flatMapLatest { query -> // 取消旧请求
            repository.search(query)
                .catch { emit(SearchUiState.Error(it.message)) }
                .onStart { emit(SearchUiState.Loading) }
                .map { SearchUiState.Success(it) }
        }
        .stateIn(
            scope = viewModelScope,
            started = WhileSubscribed(5000), // 5秒内返回不重建
            initialValue = SearchUiState.Idle
        )
    
    fun onQueryChanged(query: String) {
        _searchQuery.value = query
    }
}

// Composable层（纯净UI）
@Composable
fun SearchScreen(viewModel: SearchViewModel = hiltViewModel()) {
    val uiState by viewModel.uiState.collectAsState()
    
    SearchBar(
        onQueryChange = { viewModel.onQueryChanged(it) },
        // ... 
    )
    
    when (uiState) {
        is SearchUiState.Loading -> LoadingIndicator()
        is SearchUiState.Success -> SearchResultList(uiState.items)
        // ...
    }
}

✨ 架构优势：

• 业务逻辑100%可测试（无需ComposeTestRule）
• UI层零异步代码，专注渲染
• 防抖、取消旧请求等逻辑内聚在ViewModel

---

🚫 高危陷阱：重组中的“协程幽灵”

❌ 陷阱1：在重组中创建新协程作用域

@Composable
fun GhostScope() {
    // ❌ 每次重组创建新Scope！旧协程未取消 → 内存泄漏
    val scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
    
    LaunchedEffect(Unit) {
        scope.launch { /* 危险！ */ }
    }
}

❌ 陷阱2：remember中持有协程引用

@Composable
fun LeakyRemember() {
    // ❌ remember保存协程Job，但重组时未清理
    val job = remember { 
        viewModelScope.launch { /* ... */ } 
    }
    // 退出页面时Job未取消！
}

✅ 安全准则：

场景	推荐方案
响应状态变化	LaunchedEffect(key)
响应用户事件	rememberCoroutineScope().launch
长期存活逻辑	ViewModel + viewModelScope
绝对禁止	在Composable内创建新CoroutineScope

---

🌟 进阶技巧：Compose专属协程工具箱

1️⃣ DisposableEffect：资源清理神器

@Composable
fun LocationTracker() {
    DisposableEffect(Unit) {
        val listener = LocationListener { updateLocation(it) }
        LocationManager.register(listener)
        
        // ✨ 重组/退出时自动清理
        onDispose {
            LocationManager.unregister(listener)
        }
    }
}

2️⃣ snapshotFlow：将State转为Flow

@Composable
fun ScrollingList(listState: LazyListState) {
    LaunchedEffect(listState) {
        snapshotFlow { listState.firstVisibleItemIndex }
            .distinctUntilChanged()
            .collect { index ->
                logScrolledTo(index) // 仅当索引变化时触发
            }
    }
}

3️⃣ rememberUpdatedState：捕获最新回调

@Composable
fun SafeCallback(onClick: () -> Unit) {
    // ✅ 避免回调闭包捕获旧值
    val currentOnClick by rememberUpdatedState(onClick)
    
    Button(onClick = {
        currentOnClick() // 始终调用最新回调
    }) { Text("点击") }
}

---

💡 深度思考：声明式异步的哲学

“Compose不是UI框架的升级，而是编程范式的革命”

维度	传统View系统	Compose + 协程
异步触发	手动调用（命令式）	状态变化驱动（声明式）
生命周期	显式管理（onDestroy移除）	隐式绑定（重组自动清理）
代码组织	逻辑分散（Activity/Fragment/Callback）	逻辑内聚（Composable自包含）
心智负担	“何时取消？”“是否泄漏？”	“状态是什么？”“UI如何响应？”

✨ 核心转变：

从 “如何管理异步” 转向 “UI应如何响应状态”
开发者专注业务本质，框架处理复杂性

---

📦 常利兵の实用工具库（开源）

为降低团队迁移成本，我封装了Compose协程安全工具集：

// 1. 安全请求（自动防抖+取消旧请求）
useEffect(debounce = 300, keys = listOf(query)) {
    viewModel.search(query)
}

// 2. 事件防抖点击
DebouncedButton(
    onClick = { submitOrder() },
    debounceMillis = 500
) { Text("提交") }

// 3. 重组安全Toast
rememberToast { message ->
    LaunchedEffect(message) {
        Toast.makeText(context, message, Toast.LENGTH_SHORT).show()
    }
}

👉 GitHub地址：回复“Compose协程”获取（含完整示例+单元测试）

---

🌱 下期预告

《Compose性能优化实战：重组侦探与布局陷阱》
→ 如何用Layout Inspector定位无效重组？
→ remember vs derivedStateOf：何时用哪个？
→ 列表滚动卡顿的5个隐藏元凶

---

💬 常利兵互动时间

❓ 你在Compose中遇到最棘手的协程问题是什么？
❓ 评论区分享你的“重组安全”心得，抽3位送《Jetpack Compose核心技术》签名版！

✨ 行动指南：
1️⃣ 检查项目中所有LaunchedEffect(Unit) → 改为有意义的键
2️⃣ 将事件回调中的lifecycleScope替换为rememberCoroutineScope
3️⃣ 用snapshotFlow重构滚动监听等场景

→ 点赞❤️ + 在看👀 让声明式开发成为团队标准
→ 关注【常利兵】，专注Compose与现代Android架构
→ 转发给正在被重组问题困扰的同事（救他于水火！）

---

原创声明：方案经电商APP亿级流量验证，工具库已开源
技术参考：Jetpack Compose官方文档、Kotlin Coroutines Guide
⚠️ 警示：勿将View系统思维带入Compose，拥抱声明式范式
#Compose #Kotlin协程 #声明式UI #Android开发 #常利兵
✨ 技术有深度，分享有温度 —— 常利兵，与你共成长