如何避免NavGraphBuilder中Composable在应用状态变化时重复执行？

问题说明 #

使用Navigation组件时，每当应用状态变化（例如从后台回到前台），NavGraphBuilder中的composable lambda内容会被重复调用，导致不必要的逻辑执行（如示例中的日志重复打印）。

代码示例 #

NavHost(navController = navController, startDestination = ArticleNavigation.START) {
    composable(ArticleNavigation.START) {
        Log.d("cuongnvxx", "repeated")
        WelcomeScreens {
            navController.navigate(ArticleNavigation.HOME)
        }
    }
    composable(ArticleNavigation.HOME) {
        HomeScreens(articleViewModel)
    }
    composable(ArticleNavigation.DETAIL) {}
}

日志信息 #

2023-06-15 20:21:38.266 22845-22845 cuongnvxx  D  repeated
2023-06-15 20:21:41.288 22845-22845 cuongnvxx  D  repeated
2023-06-15 20:21:43.200 22845-22845 cuongnvxx  D  repeated
2023-06-15 20:21:45.971 22845-22845 cuongnvxx  D  repeated

解决方案 #

Composable的重组是Jetpack Compose的正常行为，NavHost的composable lambda会在父组件重组时重新执行（比如应用前后台切换触发Activity生命周期变化，进而引发Compose重组）。要避免重复执行副作用逻辑，需使用Compose的副作用处理函数：

1. 用LaunchedEffect包裹一次性逻辑 #

将不需要重复执行的逻辑（如日志、初始化请求）放入LaunchedEffect中，通过指定key控制执行时机。使用Unit作为key时，逻辑仅在Composable首次进入时执行一次，除非Composable被销毁重建：

composable(ArticleNavigation.START) {
    // 仅在Composable首次加载时执行一次
    LaunchedEffect(Unit) {
        Log.d("cuongnvxx", "repeated")
    }
    WelcomeScreens {
        navController.navigate(ArticleNavigation.HOME)
    }
}

2. 用remember缓存状态或计算结果 #

如果有需要保持的状态或计算结果，使用remember缓存，避免每次重组重新计算：

composable(ArticleNavigation.START) {
    // 缓存数据，仅初始化一次
    val cachedData = remember { fetchInitialData() }
    WelcomeScreens(data = cachedData) {
        navController.navigate(ArticleNavigation.HOME)
    }
}

原理说明 #

JetNews示例中没有出现该问题，是因为其将所有副作用逻辑都正确包裹在LaunchedEffect、remember等副作用处理函数中，确保逻辑仅在必要时执行，而非随Composable重组重复运行。

内容的提问来源于stack exchange，提问作者cuong nguyen