etpack Compose 是推荐用于构建原生 Android 界面的新工具包。后续简称Jetpack Compose为Compose。
在了解State之前需要先对Compose及申明性编程式有个大概的了解。
好了,在你有一定了解的基础上,我们先来运行几个Demo,初步了解为何使用state。这个例子主要是想通过点击按钮,改变文案的显示。(这个过程称之为重组)
Demo1:
classStateDemoActivity : AppCompatActivity() {
overridefunonCreate(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
)
}
}
}
}
}
}
复制代码
对应输出如下:
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
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是方法中的局部变量。
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函数,其他不变
var state = remember {
mutableStateOf(false)
}
复制代码
输出如下,按钮文字终于如预想的那样发生了变化,此外有个特别的现象是state变量的哈希值并没有发生变化,表明方法每次执行时,state变量并没有重新创建。
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方法内部必然有全局容器存储变量,源码中可以很明显的看出
@Composable
inline fun remember(crossinline calculation: @DisallowComposableCalls () -> T): T =
currentComposer.cache(false, calculation)
复制代码
综上我们可以知道,Compose是依赖对State变化的观察来重新执行Compose方法(准确来说Compose基于参数的比较结果来决定是否重组)
接上文一个 Composable 函数在重组中被调用时,如果参数与上次调用时相比没有发生变化,则函数的执行会跳过重组,提升重组性能。需要特别说明Compose不会因为被观察的对象与上次是同一个就跳过重组。详情参考 Compose类型稳定性注解:@Stable & @Immutable
在之前的内容中,我们已经知道了参数的变化会影响重组是否执行,这就带了重组范围的问题。这方面大佬已经有了很好的文章。建议小伙伴先阅读# Jetpack Compose:理解composable的重组范围
当我阅读后用代码验证时却发现了异常,代码如下
classStateDemoActivity : AppCompatActivity() {
privateval TAG = StateDemoActivity::class.java.simpleName
overridefunonCreate(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
)
}
}
}
}
}
复制代码
输出如下
StateDemoActivity E Scope-1 run
StateDemoActivity E Scope-2 run
StateDemoActivity E Button-onClick
StateDemoActivity E Scope-3 run
复制代码
按照文章内的说法Scope-3 run 这行是不应该被打印出来的,即不应该参与重组的,可实际结果却相反。小伙伴可以自己思考下,稍后再往下翻看原因;
--------------完美的分割线^_^------------
classStateDemoActivity : AppCompatActivity() {
companionobject {
privateval TAG = StateDemoActivity::class.java.simpleName
}
....
}
复制代码
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变化了,才会引发重组;例如
val missOut = MutableLiveData(false)
...
val state = viewModel.missOut.observeAsState(false).value
复制代码
多次调用missOut.value = true,state只有在第一次设置为true时引发重组。如果希望行为和之前observe一样,应该如下调用:
LaunchedEffect(key1 = Unit) {
viewModel.missOut.asFlow().collect {
...
}
}
复制代码
Android开发核心知识点笔记
Android Framework核心知识点笔记
音视频开发笔记,入门到高级进阶
Android Flutter核心知识点笔记与实战详解
性能调优核心知识点笔记