Jetpack Compose中popBackStack引发组件重组两次的原因咨询

复现代码与现象 #

代码1（调用popBackStack） #

@Composable
fun AlbumPage(navHostController: NavHostController) {
   ElevatedButton(onClick = {
      navHostController.popBackStack()
   }) {
      Text(text = "click")
   }

   SideEffect {
        Log.d("tag","1111")
   }
}

点击按钮后，日志"1111"会输出两次（日志时间：14:53:34.452、14:53:34.816）。

代码2（注释popBackStack） #

@Composable
fun AlbumPage(navHostController: NavHostController) {
   ElevatedButton(onClick = {
      //navHostController.popBackStack()
   }) {
      Text(text = "click")
   }

   SideEffect {
        Log.d("tag","1111")
   }
}

点击按钮后，日志仅输出一次。

原因分析 #

• SideEffect的核心特性是每次Composable重组完成后都会执行。
• 当调用popBackStack()时，会触发两次重组：
  1. 按钮点击后自身状态（比如按压状态）变化，触发AlbumPage的第一次重组，SideEffect执行一次。
  2. popBackStack()会修改NavController的返回栈状态，导航组件会触发当前页面（AlbumPage）的第二次重组——这是因为页面即将被从返回栈移除，Compose会先完成当前页面的最后一次重组流程，之后才会销毁页面，因此SideEffect再次执行。
• 注释掉popBackStack()后，点击按钮只会因按钮状态变化触发一次重组，所以SideEffect仅执行一次。

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