返回

Jetpack Compose State理解

2022-11-03 by liujian

Jetpack Compose 是推荐用于构建原生 Android 界面的新工具包。后续简称Jetpack Compose为Compose。

在了解State之前需要先对Compose及申明性编程式有个大概的了解，推荐看下文章# 声明式 UI？Android 官方怒推的 Compose 到底是什么#

State初体验

好了，在你有一定了解的基础上，我们先来运行几个Demo，初步了解为何使用state。这个例子主要是想通过点击按钮，改变文案的显示。（这个过程称之为重组）

Demo1：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
class StateDemoActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        supportActionBar?.hide()
        super.onCreate(savedInstanceState)
        WindowCompat.setDecorFitsSystemWindows(window, false)
        setContent {
            TestComposeTheme {
                var state = false
                Log.e("StateDemoActivity", "hashcode:${state.hashCode()} value:${state}")
                Column(modifier = Modifier.fillMaxSize().systemBarsPadding()) {
                    Button(onClick = {
                        state = !state
                        Log.e("StateDemoActivity", "onClick hashcode:${state.hashCode()} value:${state}")
                    }, modifier = Modifier.fillMaxWidth()) {
                        Text(
                            text = "Change State:${state}",
                            color = MyColorTheme.textMain,
                            fontSize = 20.sp
                        )
                    }
                }
            }
        }
    }
}

对应输出如下：

1
2
3
4
5
StateDemoActivity        E  hashcode:1237 value:false
StateDemoActivity        E  onClick hashcode:1231 value:true
StateDemoActivity        E  onClick hashcode:1237 value:false
StateDemoActivity        E  onClick hashcode:1231 value:true
StateDemoActivity        E  onClick hashcode:1237 value:false

可以发现，点击按钮Text显示的文本没有改变，没有达到预想的目的。

Demo2：这次我们使用官方的MutableState

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
TestComposeTheme {
    var state = mutableStateOf(false)
    Log.e("StateDemoActivity", "hashcode:${state.hashCode()} value:${state.value}")
    Column(modifier = Modifier.fillMaxSize().systemBarsPadding()) {
        Button(onClick = {
            state.value = !state.value
            Log.e("StateDemoActivity", "onClick hashcode:${state.hashCode()} value:${state.value}")
        }, modifier = Modifier.fillMaxWidth()) {
            Text(
                text = "Change State:${state.value}",
                color = MyColorTheme.textMain,
                fontSize = 20.sp
            )
        }
    }
}

输出如下，显示的文案依然没有改变，但相比之前多了Column之前的打印，这表明方法体被重新执行了，state变量的哈希值也在变化。以上表现和普通java方法别无区别，state是方法中的局部变量。

1
2
3
4
5
StateDemoActivity        E  hashcode:103910553 value:false
StateDemoActivity        E  onClick hashcode:103910553 value:true
StateDemoActivity        E  hashcode:118168247 value:false
StateDemoActivity        E  onClick hashcode:118168247 value:true
StateDemoActivity        E  hashcode:245965755 value:false

Demo3：这次我们稍作改动，额外使用remember函数，其他不变

1
2
3
var state = remember {
    mutableStateOf(false)
}

输出如下，按钮文字终于如预想的那样发生了变化，此外有个特别的现象是state变量的哈希值并没有发生变化，表明方法每次执行时，state变量并没有重新创建。

1
2
3
4
5
StateDemoActivity        E  hashcode:103910553 value:false
StateDemoActivity        E  onClick hashcode:103910553 value:true
StateDemoActivity        E  hashcode:103910553 value:true
StateDemoActivity        E  onClick hashcode:103910553 value:false
StateDemoActivity        E  hashcode:103910553 value:false

remember方法内部必然有全局容器存储变量，源码中可以很明显的看出

1
2
3
@Composable
inline fun <T> remember(crossinline calculation: @DisallowComposableCalls () -> T): T =
    currentComposer.cache(false, calculation)

综上我们可以知道，Compose是依赖对State变化的观察来重新执行Compose方法（准确来说Compose基于参数的比较结果来决定是否重组）

重组与稳定类型

接上文一个 Composable 函数在重组中被调用时，如果参数与上次调用时相比没有发生变化，则函数的执行会跳过重组，提升重组性能。需要特别说明Compose不会因为被观察的对象与上次是同一个就跳过重组。详情参考 Compose类型稳定性注解：@Stable & @Immutable

Composable的重组范围

在之前的内容中，我们已经知道了参数的变化会影响重组是否执行，这就带了重组范围的问题。这方面大佬已经有了很好的文章。建议小伙伴先阅读# Jetpack Compose：理解composable的重组范围

当我阅读后用代码验证时却发现了异常，代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
class StateDemoActivity : AppCompatActivity() {

    private val TAG = StateDemoActivity::class.java.simpleName

    override fun onCreate(savedInstanceState: Bundle?) {
        supportActionBar?.hide()
        super.onCreate(savedInstanceState)
        WindowCompat.setDecorFitsSystemWindows(window, false)
        setContent {
            TestComposeTheme {
                Log.e(TAG, "Scope-1 run ")
                var counter by remember {
                    mutableStateOf(0)
                }
                Column(modifier = Modifier.fillMaxSize().systemBarsPadding()) { 
                    Log.e(TAG, "Scope-2 run ")
                    Button(onClick = run {
                        Log.e(TAG, "Button-onClick")
                        return@run { counter++ }
                    }) {
                        Log.e(TAG, "Scope-3 run ")
                        Text(text = "+")
                    }
                    Text(
                        text = "Counter:${counter}",
                        color = MyColorTheme.textMain,
                        fontSize = 20.sp
                    )
                }
            }
        }
    }
}

输出如下

1
2
3
4
StateDemoActivity        E  Scope-1 run 
StateDemoActivity        E  Scope-2 run 
StateDemoActivity        E  Button-onClick
StateDemoActivity        E  Scope-3 run

按照文章内的说法Scope-3 run 这行是不应该被打印出来的，即不应该参与重组的，可实际结果却相反。小伙伴可以自己思考下，稍后再往下翻看原因；

————–完美的分割线^_^————

1
2
3
4
5
6
7
8
class StateDemoActivity : AppCompatActivity() {

    companion object {
        private val TAG = StateDemoActivity::class.java.simpleName
    }

    ....
}
1
2
3
StateDemoActivity        E  Scope-1 run 
StateDemoActivity        E  Scope-2 run 
StateDemoActivity        E  Button-onClick

日志终于和理解的一样了，现在我们回头找原因，知道问题就出在打印的变量“TAG”身上。方法中各作用域Scope都读取了变量“TAG”，在第一个代码中该变量是个非稳定类型，故按钮触发重组时，为了保证正确性，所有引用到该变量的Scope都会重组；而第二个代码中“TAG”已经是个静态变量了，故而是个稳定类型，所以重组时不会引发非必要的重组。

最后补充一点：

从Android View转Compose过程中，对LiveData的使用场景需要特别留意。因为原本对LiveData的观察是通过observe方法进行的，每次LiveData内容更新（即使值一样）回调依然会收到；转换为State之后，只有value变化了，才会引发重组；例如

1
2
3
val missOut = MutableLiveData(false)
...
val state = viewModel.missOut.observeAsState(false).value

多次调用missOut.value = true,state只有在第一次设置为true时引发重组。如果希望行为和之前observe一样，应该如下调用：

1
2
3
4
5
LaunchedEffect(key1 = Unit) {
    viewModel.missOut.asFlow().collect {
        ...
    }
}

至于compose为何能够观察到状态的变化，请参考带你了解 Jetpack Compose 快照系统