Jetpack Compose SearchBar多次recompose是否正常？如何优化性能？

问题描述 #

我实现了一个水平内边距依赖于active状态的SearchBar。每次active状态发生变化时，该Composable会recompose 5-6次，这是否属于正常现象？我能否对该SearchBar的性能进行优化？

示例代码：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LimitRecomposeSearchBar(modifier: Modifier = Modifier) {
    var query by remember { mutableStateOf("") }
    val onQueryChange: (String) -> Unit = {
        query = it
    }
    val onSearch: (String) -> Unit = {}

    var active by remember { mutableStateOf(false) }
    val onActiveChange: (Boolean) -> Unit = {
        active = it
    }

    val paddingAnimation by animateDpAsState(
        if (active) 0.dp else 16.dp,
        label = "paddingAnimation"
    )

    Column(
        modifier = modifier
            .fillMaxSize()
    ) {
        SearchBar(
            query = query,
            onQueryChange = onQueryChange,
            onSearch = onSearch,
            active = active,
            onActiveChange = onActiveChange,
            modifier = modifier
                .widthIn(max = 488.dp)
                .fillMaxWidth()
                .padding(horizontal = paddingAnimation),
            leadingIcon = {
                Icon(
                    painterResource(R.drawable.ic_search),
                    stringResource(R.string.button_search)
                )
            },
            placeholder = {
                Text(stringResource(R.string.placeholder_search))
            },
        ) {
        }
    }
}

演示效果：

解答 #

一、重组次数是否正常？ #

5-6次重组属于正常范围，主要原因包括：

• active状态变更会直接触发一次重组；
• animateDpAsState在动画执行过程中会持续更新paddingAnimation的值，每一次值更新都会触发依赖该状态的Composable重组；
• Material3的SearchBar内部包含多个依赖active状态的子组件，状态变更时这些子组件也会触发重组。

二、性能优化方案 #

针对你的代码，可以通过以下方式减少不必要的重组：

1. 稳定lambda引用

当前onQueryChange、onActiveChange每次重组都会创建新的lambda实例，导致SearchBar因参数不稳定触发额外重组。用remember包裹lambda，保持引用稳定：

val onQueryChange = remember { { newQuery: String -> query = newQuery } }
val onActiveChange = remember { { newActive: Boolean -> active = newActive } }
val onSearch = remember { { _: String -> } }

2. 提取独立子Composable

将leadingIcon、placeholder这类静态内容提取为独立的子Composable，避免每次重组都重新创建这些元素：

@Composable
private fun SearchLeadingIcon() {
    Icon(
        painterResource(R.drawable.ic_search),
        stringResource(R.string.button_search)
    )
}

@Composable
private fun SearchPlaceholder() {
    Text(stringResource(R.string.placeholder_search))
}

之后在SearchBar中直接调用：

leadingIcon = { SearchLeadingIcon() },
placeholder = { SearchPlaceholder() },

3. 缩小重组范围

将与动画无关的状态（比如query）和逻辑拆分到独立的Composable中，只让依赖paddingAnimation的部分跟随动画更新重组，避免整个父Composable重复重组。

4. 调整动画参数（可选）

如果觉得动画过程中的重组过于频繁，可以调整animateDpAsState的动画参数（比如降低帧率），但这会影响动画流畅度，需根据需求权衡：

val paddingAnimation by animateDpAsState(
    targetValue = if (active) 0.dp else 16.dp,
    animationSpec = tween(durationMillis = 300, easing = LinearEasing),
    label = "paddingAnimation"
)

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