为何Jetpack Compose按钮每次点击会触发两次重组？

代码示例 #

var counter by remember { mutableIntStateOf(0) }
Button(onClick = { counter++ }) {
  Text(text = "I've been clicked $counter times")
}

观察到的现象 #

通过布局检查器可以看到，按钮每被点击x次，Button组件的重组次数就达到2x次。比如点击3次时，按钮总共重组了6次。

原因解析 #

这种现象来自Compose的两种状态更新触发的重组叠加：

• 第一重组：点击按钮时，counter的状态值被修改，Compose会触发所有依赖该状态的UI区域重组——也就是当前的Button及其内部的Text，这是业务状态更新带来的正常重组。
• 第二重组：Button组件内部维护着自身的交互状态（比如isPressed）。当你点击按钮时，这个状态会从false切换为true（按下时），再切换回false（松开时），这个内部状态的变化同样会触发Button的重组。

一次点击操作会同时触发业务状态更新的重组和Button自身交互状态变化的重组，所以最终会出现每点击一次就触发两次重组的情况。

你可以做个简单验证：把Text提取成独立的可组合函数，此时会发现Text的重组次数等于点击次数（仅跟随counter变化），而Button的重组次数依然是点击次数的两倍，这就能明确区分两种不同的重组触发源。

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