wordpress案例分析优化加速
etpack Compose 是推荐用于构建原生 Android 界面的新工具包。后续简称Jetpack Compose为Compose。
在了解State之前需要先对Compose及申明性编程式有个大概的了解。
State初体验
好了，在你有一定了解的基础上，我们先来运行几个Demo，初步了解为何使用state。这个例子主要是想通过点击按钮，改变文案的显示。（这个过程称之为重组）
Demo1：
classStateDemoActivity : AppCompatActivity() {overridefunonCreate(savedInstanceState: Bundle?) {supportActionBar?.hide()super.onCreate(savedInstanceState)WindowCompat.setDecorFitsSystemWindows(window, false)setContent {TestComposeTheme {var state = falseLog.e("StateDemoActivity", "hashcode:${state.hashCode()} value:${state}")Column(modifier = Modifier.fillMaxSize().systemBarsPadding()) {Button(onClick = {state = !stateLog.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.valueLog.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 <T> remember(crossinline calculation: @DisallowComposableCalls () -> T): T =currentComposer.cache(false, calculation)
复制代码综上我们可以知道，Compose是依赖对State变化的观察来重新执行Compose方法（准确来说Compose基于参数的比较结果来决定是否重组）
重组与稳定类型
接上文一个 Composable 函数在重组中被调用时，如果参数与上次调用时相比没有发生变化，则函数的执行会跳过重组，提升重组性能。需要特别说明Compose不会因为被观察的对象与上次是同一个就跳过重组。详情参考 Compose类型稳定性注解：@Stable & @Immutable
Composable的重组范围
在之前的内容中，我们已经知道了参数的变化会影响重组是否执行，这就带了重组范围的问题。这方面大佬已经有了很好的文章。建议小伙伴先阅读# Jetpack Compose：理解composable的重组范围
当我阅读后用代码验证时却发现了异常，代码如下
classStateDemoActivity : AppCompatActivity() {privateval TAG = StateDemoActivity::class.java.simpleNameoverridefunonCreate(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开发核心知识点笔记
Android Framework核心知识点笔记
音视频开发笔记，入门到高级进阶
Android Flutter核心知识点笔记与实战详解
性能调优核心知识点笔记