如何在Jetpack Compose中稳定Lambda引用：防止不必要的重组的完整指南（译文）了解如何为 Lambda

感觉这个文章很好翻译当作笔记看。文章来源

了解如何为 Lambda 创建稳定的引用对于构建高性能 Jetpack Compose 应用至关重要。本指南涵盖了您需要了解的有关 Lambda 稳定性、重组优化以及可用工具的所有内容。

了解基础知识：什么是重组？

在深入探讨 Lambda 稳定性之前，务必先了解 Jetpack Compose 中重组的含义。重组是指当可组合函数的输入参数发生变化时，Compose 会重新执行这些函数的过程。Compose 正是通过这种方式来更新界面，以反映新的数据或状态变化。

把重新构图想象成一位需要更新画作的画家。一位聪明的画家不会从头开始绘制整幅画布，而是只会重新绘制实际更改的部分。同样，Compose 会尝试智能地判断哪些部分需要更新，但它需要我们的帮助才能做出正确的决定。

重组挑战：Lambda 稳定性为何重要

假设您有一个包含 1000 个项目的列表，每个项目都有一个点击处理程序。如果每次重组时都重新创建这些点击处理程序，Compose 会认为每个项目都发生了更改（因为每个项目都收到了一个“新的”点击处理程序）。这意味着所有 1000 个项目都会被不必要地重组，即使实际上只有一条数据发生了更改。

@Composable
fun ProblematicExample() {
    val items = remember { mutableStateListOf("Item 1", "Item 2", "Item 3") }
    var selectedItem by remember { mutableStateOf("") }
    
    // This is what happens during recomposition:
    // 1. ProblematicExample gets recomposed
    // 2. A new lambda { item -> selectedItem = item } is created
    // 3. Every ItemCard receives this "new" lambda
    // 4. Compose thinks every ItemCard has changed
    // 5. All ItemCards get recomposed unnecessarily
    
    LazyColumn {
        items(items) { item ->
            ItemCard(
                text = item,
                isSelected = selectedItem == item,
                onClick = { selectedItem = item } // ❌ New lambda every time!
            )
        }
    }
}

这就是为什么 lambda 稳定性至关重要——它可以防止这种不必要的重组，这些重组可能会让你的应用程序感觉迟缓并耗尽电池寿命。

了解 Compose 中的 Lambda 稳定性

什么使得 Lambda 稳定或不稳定？

如果在重组过程中重复使用同一个实例，则 Lambda 是稳定的。如果每次父级可组合项重组时都会创建新实例，则 Lambda 是不稳定的。

让我们通过一个详细的例子来理解这一点：

@Composable
fun StabilityComparison() {
    var counter by remember { mutableStateOf(0) }
    
    // ❌ UNSTABLE: New lambda created on every recomposition
    val unstableLambda = { 
        println("Unstable lambda called with counter: $counter")
    }
    
    // ✅ STABLE: Same lambda instance reused across recompositions
    val stableLambda = remember { 
        { 
            println("Stable lambda called")
        } 
    }
    
    // ⚠️ PARTIALLY STABLE: Lambda is stable, but captures changing values
    val capturesCounter = remember(counter) { 
        { 
            println("Lambda called with counter: $counter")
        } 
    }
    
    Column {
        Button(onClick = { counter++ }) {
            Text("Increment Counter: $counter")
        }
        
        // These buttons will cause different recomposition behaviors
        MyButton(onClick = unstableLambda, text = "Unstable")
        MyButton(onClick = stableLambda, text = "Stable") 
        MyButton(onClick = capturesCounter, text = "Captures Counter")
    }
}

在此示例中：

unstableLambda``counter每次更改时都会创建新实例
stableLambda始终使用相同的实例（但无法访问当前计数器值）
capturesCounter仅当发生变化时才创建新实例counter（这正是我们想要的）

力量`remember`：你的第一道防线

该remember函数类似于在重组过程中持久存在的缓存。它存储一个值，并返回相同的值，直到其键发生更改或可组合项从组合中移除为止。

`remember`内部工作原理

当 Compose 遇到remember调用时，它会：

检查合成中此位置是否有缓存值
如果不存在缓存值，则执行 lambda 并存储结果
如果存在缓存值，则返回缓存值而不执行 lambda
如果任何提供的键发生了变化，它会使缓存无效并重新计算

@Composable
fun RememberInternalsExample() {
    var recompositionCount by remember { mutableStateOf(0) }
    
    // This lambda will only be created once, when the composable is first composed
    val stableOnClick = remember {
        println("Lambda created!") // This will only print once
        { 
            recompositionCount++
            println("Button clicked! Count: $recompositionCount")
        }
    }
    
    Column {
        Text("Recomposition count: $recompositionCount")
        Button(onClick = stableOnClick) {
            Text("Click me")
        }
    }
}

用钥匙记住：控制何时重新创建

真正的威力remember在于提供键。键会告诉 Compose 何时应该使缓存值失效并创建新值。

@Composable
fun RememberWithKeysDetailed(userId: String, userRole: String, isOnline: Boolean) {
    // This lambda will be recreated only when userId, userRole, or isOnline changes
    val onUserAction = remember(userId, userRole, isOnline) {
        println("Creating new action handler for user: $userId, role: $userRole, online: $isOnline")
        { action: String ->
            when {
                !isOnline -> showOfflineMessage()
                userRole == "admin" -> performAdminAction(userId, action)
                userRole == "user" -> performUserAction(userId, action)
                else -> showUnauthorizedMessage()
            }
        }
    }
    
    UserActionButton(
        userId = userId,
        onAction = onUserAction
    )
}

为什么键很重要：如果没有键，lambda 将执行以下操作：

永不更新（如果没有提供密钥），导致数据过时
始终更新（如果我们不使用记住），导致不必要的重组

深入探究`rememberUpdatedState`：游戏规则改变者

rememberUpdatedState是 Compose 中最重要但经常被误解的工具之一。它解决了一个关键问题：如何在不重新创建整个 lambda 表达式的情况下访问频繁变化的参数的最新值。

问题`rememberUpdatedState`解决了

考虑这种情况：您有一个 lambda 需要访问一个经常变化的值，但您不想在该值每次变化时都重新创建该 lambda。

@Composable
fun ProblemWithoutRememberUpdatedState(
    currentUser: User,
    onUserAction: (User, String) -> Unit
) {
    // Problem: This lambda gets recreated every time currentUser changes
    // Even if currentUser changes 10 times per second, we're creating 10 new lambdas
    val handleClick = remember(currentUser, onUserAction) {
        { action: String ->
            onUserAction(currentUser, action)
        }
    }
    
    UserActionButton(onClick = handleClick)
}

`rememberUpdatedState`工作原理

rememberUpdatedState创建一个始终指向最新值的稳定引用，而不会在该值发生变化时触发重组。

@Composable
fun SolutionWithRememberUpdatedState(
    currentUser: User,
    onUserAction: (User, String) -> Unit
) {
    // These create stable references that always point to the latest values
    val currentUserRef by rememberUpdatedState(currentUser)
    val currentOnActionRef by rememberUpdatedState(onUserAction)
    
    // This lambda is created only once, but always accesses the latest values
    val handleClick = remember {
        { action: String ->
            currentOnActionRef(currentUserRef, action)
        }
    }
    
    UserActionButton(onClick = handleClick)
}

为什么有效：技术细节

rememberUpdatedState作品由：

创建可重组的可变引用
每次重组时用新值更新该引用
返回State始终包含最新值的对象
由于引用本身稳定，因此不会触发子可组合项的重组

可以把它想象成一个始终包含最新值的盒子，但盒子本身永远不会改变——只有它的内容会改变。

`rememberUpdatedState`副作用：完整指南

Compose 中的副作用（例如LaunchedEffect、DisposableEffect等）通常需要访问在执行过程中可能发生变化的值。这一点rememberUpdatedState至关重要。

LaunchedEffect 和 rememberUpdatedState

LaunchedEffect当其键发生变化时运行暂停块。但是，如果你需要访问的值变化频率比你想要重新启动效果的频率更高，该怎么办？

@Composable
fun LaunchedEffectWithRememberUpdatedState(
    userId: String,
    isUserOnline: Boolean,
    onStatusUpdate: (String, Boolean) -> Unit
) {
    // We want to restart the effect only when userId changes,
    // but we want to use the latest values of isUserOnline and onStatusUpdate
    val currentIsOnline by rememberUpdatedState(isUserOnline)
    val currentOnStatusUpdate by rememberUpdatedState(onStatusUpdate)
    
    LaunchedEffect(userId) { // Only restart when userId changes
        while (true) {
            delay(5000) // Check every 5 seconds
            
            // Always use the latest values, even if they changed during the delay
            if (currentIsOnline) {
                currentOnStatusUpdate(userId, true)
            } else {
                currentOnStatusUpdate(userId, false)
            }
        }
    }
}

如果没有 rememberUpdatedState，您必须执行以下操作之一：

包括isUserOnline和onStatusUpdate作为键（频繁重新启动效果）
使用效果开始时捕获的过时值的风险

带有 rememberUpdatedState 的 DisposableEffect

DisposableEffect用于清理操作。清理操作通常需要访问最新的值。

@Composable
fun DisposableEffectExample(
    eventListener: EventListener,
    eventType: String,
    onEventReceived: (Event) -> Unit
) {
    val currentOnEventReceived by rememberUpdatedState(onEventReceived)
    
    DisposableEffect(eventListener, eventType) {
        val callback = { event: Event ->
            // Always use the latest callback, even if onEventReceived prop changed
            currentOnEventReceived(event)
        }
        
        eventListener.subscribe(eventType, callback)
        
        onDispose {
            // Cleanup uses the same stable callback reference
            eventListener.unsubscribe(eventType, callback)
        }
    }
}

带有 rememberUpdatedState 的 SideEffect

SideEffect每次成功重组后运行。它对于将 Compose 状态与外部系统同步非常有用。

@Composable
fun SideEffectExample(
    composeState: String,
    externalSystem: ExternalSystem
) {
    val currentExternalSystem by rememberUpdatedState(externalSystem)
    
    SideEffect {
        // This runs after every recomposition
        // Always sync with the latest external system reference
        currentExternalSystem.updateState(composeState)
    }
}

produceState 和 rememberUpdatedState

produceState通过运行生产者协程来创建状态。生产者经常需要访问不断变化的值。

@Composable
fun ProduceStateExample(
    url: String,
    refreshInterval: Long,
    httpClient: HttpClient
) {
    val currentHttpClient by rememberUpdatedState(httpClient)
    val currentRefreshInterval by rememberUpdatedState(refreshInterval)
    
    val data by produceState<String?>(initialValue = null, url) {
        while (true) {
            try {
                value = currentHttpClient.get(url)
                delay(currentRefreshInterval) // Use latest refresh interval
            } catch (e: Exception) {
                value = "Error: ${e.message}"
                delay(currentRefreshInterval)
            }
        }
    }
    
    Text(data ?: "Loading...")
}

默认值和初始化模式

了解如何正确初始化并为稳定的 lambda 提供默认值对于强大的应用程序至关重要。

提供默认 Lambda 值

创建稳定的 lambda 表达式时，通常需要合理的默认值：

@Composable
fun ComponentWithDefaults(
    items: List<String>,
    onItemClick: (String) -> Unit = {}, // Default: do nothing
    onItemLongPress: (String) -> Unit = { item -> 
        // Default: show a toast
        showToast("Long pressed: $item")
    },
    onItemDelete: ((String) -> Unit)? = null // Default: null (no delete action)
) {
    // Create stable references with proper defaults
    val stableOnClick = remember(onItemClick) {
        { item: String -> onItemClick(item) }
    }
    
    val stableOnLongPress = remember(onItemLongPress) {
        { item: String -> onItemLongPress(item) }
    }
    
    val stableOnDelete = remember(onItemDelete) {
        onItemDelete?.let { deleteHandler ->
            { item: String -> deleteHandler(item) }
        }
    }
    
    LazyColumn {
        items(items) { item ->
            ItemWithActions(
                item = item,
                onClick = stableOnClick,
                onLongPress = stableOnLongPress,
                onDelete = stableOnDelete // This can be null
            )
        }
    }
}

用于`derivedStateOf`计算值

derivedStateOf当你有一个计算值，并且该值仅在其依赖项发生变化时才需要重新计算时，可以使用此选项。这对于将计算量较大的计算输入到稳定的 lambda 表达式中非常有效。

@Composable
fun DerivedStateDetailedExample(todos: List<TodoItem>) {
    // This computation runs whenever the todos list reference changes
    // BUT derivedStateOf will only trigger recomposition if the calculated result is different
    val completionStats by remember {
        derivedStateOf {
            val completed = todos.count { it.completed }
            val total = todos.size
            val percentage = if (total > 0) (completed * 100) / total else 0
            
            CompletionStats(
                completed = completed,
                total = total,
                percentage = percentage,
                allCompleted = completed == total && total > 0
            )
        }
    }
    
    // This lambda is stable and only recreates when the stats actually change
    val onCelebrate = remember(completionStats.allCompleted) {
        {
            if (completionStats.allCompleted) {
                showCelebrationAnimation()
                playSuccessSound()
            }
        }
    }
    
    val onShareProgress = remember(completionStats) {
        {
            shareText("I've completed ${completionStats.completed} out of ${completionStats.total} tasks!")
        }
    }
    
    ProgressCard(
        stats = completionStats,
        onCelebrate = onCelebrate,
        onShare = onShareProgress
    )
}

data class CompletionStats(
    val completed: Int,
    val total: Int,
    val percentage: Int,
    val allCompleted: Boolean
)

为什么 很重要：如果没有它，即使结果相同，每次重组时都会运行计算。有了，当列表发生变化时，计算仍然会运行，但会使用结构相等性将新结果与先前的结果进行比较。如果结果相等，则不会触发依赖于此值的组件的重组。这在计算成本高昂或输入频繁变化但输出保持不变的情况下尤其有用。derivedStateOf ****derivedStateOf``todos``derivedStateOf

具有条件逻辑的稳定引用

通常，你的 lambda 需要根据当前状态表现出不同的行为：

@Composable
fun ConditionalLambdaExample(
    user: User?,
    isLoading: Boolean,
    isOffline: Boolean
) {
    // Create a stable reference that handles all the conditional logic
    val onActionClick = remember(user, isLoading, isOffline) {
        {
            when {
                isLoading -> {
                    // Do nothing while loading
                }
                isOffline -> {
                    showOfflineMessage()
                }
                user == null -> {
                    navigateToLogin()
                }
                user.isPremium -> {
                    showPremiumFeatures()
                }
                else -> {
                    showBasicFeatures()
                }
            }
        }
    }
    
    ActionButton(
        text = when {
            isLoading -> "Loading..."
            isOffline -> "Offline"
            user == null -> "Login"
            else -> "Continue"
        },
        enabled = !isLoading && !isOffline,
        onClick = onActionClick
    )
}

使用集合和列表：深入探究

理解列表重组模式

在 Compose 中使用列表时，了解更改如何传播至关重要：

@Composable
fun ListRecompositionExample() {
    var items by remember { 
        mutableStateOf(
            listOf(
                ListItem("1", "First item", false),
                ListItem("2", "Second item", false),
                ListItem("3", "Third item", false)
            )
        ) 
    }
    
    // ❌ WRONG: This lambda captures the entire items list
    // When items changes, this lambda is recreated, causing all items to recompose
    val wrongOnToggle = remember(items) {
        { id: String ->
            items = items.map { item ->
                if (item.id == id) item.copy(completed = !item.completed)
                else item
            }
        }
    }
    
    // ✅ CORRECT: This lambda doesn't depend on the items list
    // It's stable across all recompositions
    val correctOnToggle = remember {
        { id: String ->
            items = items.map { item ->
                if (item.id == id) item.copy(completed = !item.completed)
                else item
            }
        }
    }
    
    LazyColumn {
        items(
            items = items,
            key = { it.id } // Important: stable keys prevent unnecessary recomposition
        ) { item ->
            ListItemComponent(
                item = item,
                onToggle = correctOnToggle
            )
        }
    }
}

使用稳定的回调优化大型列表

对于大型列表，模式变得更加重要：

@Composable
fun OptimizedLargeListExample(
    items: List<ProductItem>,
    onToggleFavorite: (String) -> Unit,
    onAddToCart: (String, Int) -> Unit,
    onViewDetails: (String) -> Unit
) {
    // Create stable references for all callbacks
    // These don't depend on the items list, so they remain stable
    val currentOnToggleFavorite by rememberUpdatedState(onToggleFavorite)
    val currentOnAddToCart by rememberUpdatedState(onAddToCart)
    val currentOnViewDetails by rememberUpdatedState(onViewDetails)
    
    // Create individual stable callbacks for each action
    val stableToggleFavorite = remember {
        { productId: String ->
            currentOnToggleFavorite(productId)
        }
    }
    
    val stableAddToCart = remember {
        { productId: String, quantity: Int ->
            currentOnAddToCart(productId, quantity)
        }
    }
    
    val stableViewDetails = remember {
        { productId: String ->
            currentOnViewDetails(productId)
        }
    }
    
    LazyColumn {
        items(
            items = items,
            key = { it.id }
        ) { item ->
            ProductCard(
                product = item,
                onToggleFavorite = stableToggleFavorite,
                onAddToCart = stableAddToCart,
                onViewDetails = stableViewDetails
            )
        }
    }
}

ViewModel 集成：最佳实践和模式

创建稳定的 ViewModel 连接

ViewModel 提供自然的稳定性，因为它们的方法本质上是稳定的引用：

class ProductViewModel : ViewModel() {
    private val _products = MutableStateFlow<List<Product>>(emptyList())
    val products = _products.asStateFlow()
    
    private val _isLoading = MutableStateFlow(false)
    val isLoading = _isLoading.asStateFlow()
    
    // These methods are inherently stable - they don't change across recompositions
    fun toggleFavorite(productId: String) {
        _products.value = _products.value.map { product ->
            if (product.id == productId) {
                product.copy(isFavorite = !product.isFavorite)
            } else {
                product
            }
        }
    }
    
    fun addToCart(productId: String, quantity: Int) {
        // Implementation
    }
    
    fun refreshProducts() {
        viewModelScope.launch {
            _isLoading.value = true
            try {
                _products.value = repository.getProducts()
            } finally {
                _isLoading.value = false
            }
        }
    }
}

@Composable
fun ProductScreen(viewModel: ProductViewModel = viewModel()) {
    val products by viewModel.products.collectAsState()
    val isLoading by viewModel.isLoading.collectAsState()
    
    // These are stable because they reference stable ViewModel methods
    val onToggleFavorite = remember { viewModel::toggleFavorite }
    val onAddToCart = remember { viewModel::addToCart }
    val onRefresh = remember { viewModel::refreshProducts }
    
    ProductList(
        products = products,
        isLoading = isLoading,
        onToggleFavorite = onToggleFavorite,
        onAddToCart = onAddToCart,
        onRefresh = onRefresh
    )
}

处理复杂的 ViewModel 状态

当您的 ViewModel 具有需要传递给稳定 lambda 的复杂状态时：

class ShoppingCartViewModel : ViewModel() {
    private val _cartItems = mutableStateListOf<CartItem>()
    val cartItems: List<CartItem> = _cartItems
    
    private val _selectedItems = mutableStateSetOf<String>()
    val selectedItems: Set<String> = _selectedItems
    
    fun toggleSelection(itemId: String) {
        if (itemId in _selectedItems) {
            _selectedItems.remove(itemId)
        } else {
            _selectedItems.add(itemId)
        }
    }
    
    fun removeSelected() {
        _cartItems.removeAll { it.id in _selectedItems }
        _selectedItems.clear()
    }
    
    fun updateQuantity(itemId: String, newQuantity: Int) {
        val index = _cartItems.indexOfFirst { it.id == itemId }
        if (index != -1) {
            _cartItems[index] = _cartItems[index].copy(quantity = newQuantity)
        }
    }
}


@Composable
fun ShoppingCartScreen(viewModel: ShoppingCartViewModel = viewModel()) {
    val cartItems by viewModel.cartItems.collectAsState()
    val selectedItems by viewModel.selectedItems.collectAsState()
    
    // Stable references to ViewModel methods
    val onToggleSelection = remember { viewModel::toggleSelection }
    val onRemoveSelected = remember { viewModel::removeSelected }
    val onUpdateQuantity = remember { viewModel::updateQuantity }
    
    // Derived state for UI logic
    val hasSelectedItems by remember {
        derivedStateOf { selectedItems.isNotEmpty() }
    }
    
    val totalSelectedPrice by remember {
        derivedStateOf {
            cartItems
                .filter { it.id in selectedItems }
                .sumOf { it.price * it.quantity }
        }
    }
    
    // Stable lambda that uses derived state
    val onCheckout = remember(hasSelectedItems) {
        {
            if (hasSelectedItems) {
                navigateToCheckout(selectedItems.toList())
            }
        }
    }
    
    ShoppingCartContent(
        cartItems = cartItems,
        selectedItems = selectedItems,
        totalPrice = totalSelectedPrice,
        onToggleSelection = onToggleSelection,
        onRemoveSelected = onRemoveSelected,
        onUpdateQuantity = onUpdateQuantity,
        onCheckout = onCheckout
    )
}

常见陷阱及详细解决方案

陷阱 1：错误地捕获可变状态

这是使用稳定 lambda 表达式时最常见的错误之一：

// ❌ WRONG: Lambda captures the value at creation time
@Composable
fun WrongStateCapture() {
    var counter by remember { mutableStateOf(0) }
    var message by remember { mutableStateOf("Initial") }
    
    // This lambda captures the current values when it's created
    // If counter or message change, the lambda still has the old values
    val wrongHandler = remember {
        {
            println("Counter: $counter, Message: $message") // Always prints initial values!
            // This is because the lambda was created when counter=0 and message="Initial"
        }
    }
    
    Column {
        Text("Counter: $counter")
        Text("Message: $message")
        
        Button(onClick = { counter++ }) {
            Text("Increment Counter")
        }
        
        Button(onClick = { message = "Updated at ${System.currentTimeMillis()}" }) {
            Text("Update Message")
        }
        
        Button(onClick = wrongHandler) {
            Text("Print Values (Wrong)")
        }
    }
}



// ✅ CORRECT: Multiple solutions depending on your needs
// Solution 1: Use rememberUpdatedState for frequently changing values
@Composable
fun CorrectStateCapture1() {
    var counter by remember { mutableStateOf(0) }
    var message by remember { mutableStateOf("Initial") }
    
    val currentCounter by rememberUpdatedState(counter)
    val currentMessage by rememberUpdatedState(message)
    
    val correctHandler = remember {
        {
            println("Counter: $currentCounter, Message: $currentMessage") // Always prints current values!
        }
    }
    
    // Rest of the UI...
}


// Solution 2: Use remember with keys for less frequently changing values
@Composable
fun CorrectStateCapture2() {
    var counter by remember { mutableStateOf(0) }
    var message by remember { mutableStateOf("Initial") }
    
    // Lambda is recreated whenever counter or message changes
    val correctHandler = remember(counter, message) {
        {
            println("Counter: $counter, Message: $message") // Always prints current values!
        }
    }
    
    // Rest of the UI...
}


// Solution 3: Mixed approach - stable for some, updated for others
@Composable
fun CorrectStateCapture3() {
    var counter by remember { mutableStateOf(0) }
    var message by remember { mutableStateOf("Initial") }
    var userId by remember { mutableStateOf("user123") }
    
    // counter changes frequently, so use rememberUpdatedState
    val currentCounter by rememberUpdatedState(counter)
    // message changes less frequently, include in keys
    // userId rarely changes, include in keys
    
    val mixedHandler = remember(message, userId) {
        {
            println("Counter: $currentCounter, Message: $message, User: $userId")
            performAction(userId, message, currentCounter)
        }
    }
    
    // Rest of the UI...
}

陷阱2：过度稳定的依赖关系

在键中包含太多或不必要的依赖项remember实际上可能会损害性能：

// ❌ WRONG: Including unnecessary dependencies
@Composable
fun OverStabilizedExample(
    userId: String,
    userName: String,
    userAge: Int,
    userEmail: String,
    currentTime: Long // This changes every second!
) {
    // This lambda will be recreated every second because of currentTime
    val overStabilizedHandler = remember(userId, userName, userAge, userEmail, currentTime) {
        {
            // Only userId is actually used in the action
            performUserAction(userId)
        }
    }
    
    UserButton(onClick = overStabilizedHandler)
}


// ✅ CORRECT: Only include dependencies that are actually used
@Composable
fun ProperlyStabilizedExample(
    userId: String,
    userName: String,
    userAge: Int,
    userEmail: String,
    currentTime: Long
) {
    // Only include userId since that's what's actually used
    val properHandler = remember(userId) {
        {
            performUserAction(userId)
        }
    }
    
    // If you need to display currentTime but not use it in the handler
    val displayTime = remember(currentTime) {
        formatTime(currentTime)
    }
    
    Column {
        Text("Current time: $displayTime")
        UserButton(onClick = properHandler)
    }
}

陷阱 3：不正确的副作用依赖关系

误解何时在副作用键中包含参数以及何时使用rememberUpdatedState：

// ❌ WRONG: Including callback in LaunchedEffect keys
@Composable
fun WrongSideEffectDependencies(
    url: String,
    onDataReceived: (String) -> Unit,
    refreshInterval: Long
) {
    // This will restart the effect every time onDataReceived changes
    // Even if it's just a reference change with the same behavior
    LaunchedEffect(url, onDataReceived, refreshInterval) {
        while (true) {
            val data = fetchData(url)
            onDataReceived(data) // Using potentially stale callback
            delay(refreshInterval)
        }
    }
}


// ✅ CORRECT: Use rememberUpdatedState for callbacks and frequently changing values
@Composable
fun CorrectSideEffectDependencies(
    url: String,
    onDataReceived: (String) -> Unit,
    refreshInterval: Long
) {
    // Keep fresh references without restarting the effect
    val currentOnDataReceived by rememberUpdatedState(onDataReceived)
    val currentRefreshInterval by rememberUpdatedState(refreshInterval)
    
    // Only restart when url changes (which is what we want)
    LaunchedEffect(url) {
        while (true) {
            val data = fetchData(url)
            currentOnDataReceived(data) // Always uses latest callback
            delay(currentRefreshInterval) // Always uses latest interval
        }
    }
}

陷阱 4：忘记 LazyColumn 中的键

不为列表项提供稳定的键可能会导致性能问题和 UI 错误：

// ❌ WRONG: No keys provided
@Composable
fun ListWithoutKeys(items: List<TodoItem>) {
    LazyColumn {
        items(items) { item -> // No key parameter
            TodoItemRow(
                item = item,
                onToggle = { toggleTodo(item.id) }
            )
        }
    }
}


// ❌ ALSO WRONG: Using index as key
@Composable
fun ListWithIndexKeys(items: List<TodoItem>) {
    LazyColumn {
        itemsIndexed(items) { index, item ->
            TodoItemRow(
                key = index, // Index changes when items are added/removed
                item = item,
                onToggle = { toggleTodo(item.id) }
            )
        }
    }
}
// ✅ CORRECT: Using stable, unique keys
@Composable
fun ListWithStableKeys(items: List<TodoItem>) {
    LazyColumn {
        items(
            items = items,
            key = { it.id } // Stable, unique identifier
        ) { item ->
            TodoItemRow(
                item = item,
                onToggle = { toggleTodo(item.id) }
            )
        }
    }
}

常见场景和快速参考

对于不经常改变的简单状态：

val onClick = remember(userId, userRole) {
    { performAction(userId, userRole) }
}

对于需要最新值的回调：

val currentCallback by rememberUpdatedState(callback)
val onClick = remember {
    { currentCallback() }
}

对于昂贵的计算：

val expensiveValue by remember {
    derivedStateOf { expensiveCalculation(data) }
}

对于副作用：

val currentCallback by rememberUpdatedState(callback)
LaunchedEffect(key) {
    // Use currentCallback here
}

对于列表：

LazyColumn {
    items(items, key = { it.id }) { item ->
        ItemComponent(
            item = item,
            onClick = stableCallback
        )
    }
}

结论：构建高性能 Compose 应用程序

掌握 Jetpack Compose 中稳定的 lambda 引用是创建不仅功能正常而且性能卓越的应用程序的基础。本指南涵盖的全面技术构成了 Compose 应用程序性能优化的基础。

关键要点和最佳实践

1. 了解基础知识

当 Compose 检测到参数变化时，就会进行重组
不稳定的 lambda 表达式会导致整个组件树中不必要的重组
目标是在保持正确性的同时尽量减少重组

2. 掌握核心工具

remember：创建稳定引用的主要工具
rememberUpdatedState：无需重新创建 lambda 表达式即可访问最新值
derivedStateOf：优化昂贵的计算和派生值
关键点 remember：精确控制何时重新创建 lambda

3. 为您的用例选择正确的模式

不使用remember任何键来实现真正的静态 lambda
remember与依赖于不频繁变化的值的 lambda 的键一起使用
用于rememberUpdatedState访问经常变化的值
当您有混合需求时结合两种模式

4. 副作用和高级场景

总是用于rememberUpdatedState副作用回调
仅包含应在 LaunchedEffect 键中重新启动效果的值
小心 DisposableEffect 中的清理——使用稳定的引用

5. ViewModel 和架构

ViewModel 方法自然稳定——使用remember { viewModel::method }
将 ViewModel 稳定性与rememberUpdatedState复杂场景相结合
用于derivedStateOf根据 ViewModel 状态计算的值

性能影响摘要

当你正确实现稳定的 lambda 引用时，你可以期待：

减少 CPU 使用率：更少的不必要的重组意味着更少的计算工作
更长的电池寿命：更少的 CPU 使用率直接转化为更好的电池性能
更流畅的动画：稳定的用户界面意味着动画不会被重新组合打断
改进的滚动性能：具有稳定回调的列表滚动更加顺畅
更好的用户体验：用户感受到更快、响应更快的应用程序

最后的想法

构建高性能 Compose 应用不仅需要理解要做什么，还需要理解这些模式的工作原理。Compose 的声明式特性非常强大，但它要求开发者以不同的方式思考状态管理和界面更新。

如何在Jetpack Compose中稳定Lambda引用：防止不必要的重组的完整指南（译文）