如何阻止Composable函数在导航及输入时重复触发？

问题场景 #

开发了一个包含两个页面的Jetpack Compose应用，使用Navigation组件传递文本，但遇到两个问题：

1. 在TextField输入字符时，MainScreen Composable会随每个字符重复触发；
2. 点击导航按钮后，MainScreen先触发一次，DetailScreen显示后，MainScreen又无理由再次触发，日志如下：

MainScreen //应用启动时
MainScreen //输入第一个字符时
MainScreen //输入第二个字符时
MainScreen //点击Navigate按钮时
DetailScreen //显示第二个页面时
MainScreen //无理由触发

应用核心代码如下：

MainActivity #

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyTheme {
                Navigation(
                    navController = rememberNavController()
                )
            }
        }
    }
}

页面路由定义 #

sealed class Screen(val route: String){
    data object MainScreen : Screen("main_screen")
    data object DetailScreen : Screen("detail_screen")

    fun withArgs(vararg args: String) = buildString {
        append(route)
        args.forEach { arg ->
            append("/$arg")
        }
    }
}

Navigation实现 #

@Composable
fun Navigation(
    navController: NavHostController
) {
    NavHost(
        navController = navController,
        startDestination = MainScreen.route
    ) {
        composable(
            route = MainScreen.route
        ) {
            MainScreen(
                navigateToDetailScreen = { text ->
                    navController.navigate(DetailScreen.withArgs(text))
                }
            )
        }
        composable(
            route = DetailScreen.route + "/{text}",
            arguments = listOf(
                navArgument("text") {
                    type = NavType.StringType
                }
            )
        ) { entry ->
            DetailScreen(
                text = entry.arguments?.getString("text")!!
            )
        }
    }
}

页面实现 #

@Composable
fun MainScreen(
    navigateToDetailScreen: (text: String) -> Unit
) {
    Log.d("MyTag", "MainScreen")

    var text by remember { mutableStateOf("") }

    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        TextField(
            value = text,
            onValueChange = {
                text = it
            }
        )
        Button(
            onClick = {
                navigateToDetailScreen(text)
            }
        ) {
            Text(
                text = "Navigate"
            )
        }
    }
}

@Composable
fun DetailScreen(text: String) {
    Log.d("MyTag", "DetailScreen")

    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        Text(
            text = text
        )
    }
}

问题原因分析 #

1. 输入字符时的重复触发：text是mutableStateOf，每次输入字符都会更新状态，Compose会自动重组依赖该状态的MainScreen，这是正常行为，但额外重组是因为navigateToDetailScreen lambda每次重组都会创建新实例，导致MainScreen参数变化，触发额外重组。
2. 导航后的无理由触发：导航操作会导致NavHost内部状态变化，触发Navigation Composable重组，此时会重新创建navigateToDetailScreen lambda，传递给MainScreen后，因参数变化再次触发重组。

解决方案 #

1. 稳定导航Lambda，避免参数变化触发重组 #

在Navigation的MainScreen路由节点中，用remember包裹导航lambda，确保其实例稳定，不会随每次重组创建新对象：

composable(route = MainScreen.route) {
    // 用remember稳定lambda，依赖navController
    val navigateToDetail = remember(navController) {
        { text: String ->
            navController.navigate(DetailScreen.withArgs(text))
        }
    }
    MainScreen(navigateToDetailScreen = navigateToDetail)
}

2. 优化日志打印，避免误解重组次数 #

将MainScreen中的日志放在LaunchedEffect(Unit)中，确保仅在首次组合时打印一次，而非每次重组都打印：

@Composable
fun MainScreen(
    navigateToDetailScreen: (text: String) -> Unit
) {
    // 仅首次进入时打印日志
    LaunchedEffect(Unit) {
        Log.d("MyTag", "MainScreen")
    }

    var text by remember { mutableStateOf("") }

    // 剩余代码不变...
}

3. 缩小重组范围（可选） #

如果希望进一步减少MainScreen的重组影响，可以将TextField相关的状态逻辑提取到子Composable中，仅让子Composable随text变化重组：

@Composable
fun MainScreen(
    navigateToDetailScreen: (text: String) -> Unit
) {
    LaunchedEffect(Unit) {
        Log.d("MyTag", "MainScreen")
    }

    Column(modifier = Modifier.fillMaxSize()) {
        TextInputSection(
            onNavigateClick = navigateToDetailScreen
        )
    }
}

@Composable
private fun TextInputSection(onNavigateClick: (text: String) -> Unit) {
    var text by remember { mutableStateOf("") }

    TextField(
        value = text,
        onValueChange = { text = it }
    )
    Button(
        onClick = { onNavigateClick(text) }
    ) {
        Text(text = "Navigate")
    }
}

这样MainScreen顶层不会随text变化重组，只有TextInputSection会重组。

总结 #

Compose的重组是基于状态变化的正常行为，我们需要通过稳定参数（如用remember包裹lambda）、缩小重组范围来减少不必要的重组。同时，注意日志打印的位置，避免误判重组次数。

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