Compose的UI刷新机制是啥？和Flutter一样么？

前言

我去年发现Android新出了个UI框架Compose，看了Demo后发现，纳尼！和Flutter太像了吧，无论是编程逻辑、控件名，都有很多相似的地方。谷歌自己抄自己？一直想去尝试，感受一下，直到今年才有时间去写了小项目。

思考

我在写代码的时候和Flutter去做对比，就想到它俩的UI刷新机制是否有相似点，如果不一样，那Compose的刷新机制是什么？

在看Compose的刷新机制前，我回忆了一下Flutter的刷新机制。

简单讲Flutter是通过调用StatefulWidget的setState方法,重新走一遍build方法中的代码。那原理就是setState调用时会自己添加到BuildOwner的dirtyElements脏链表中，然后调用window.scheduleFrame来注册Vsync回调，当下一次vsync信号的到来时会重新绘制UI。

所以我觉得Flutter更像是一个屏幕，调用setState方法不断重新构建UI页面，一帧一帧的。那Compose是不是也是这样呢？

尝试

Demo如下，在页面上显示一个Text控件，和一个按钮,每一次点击，Text显示的数字自增。

@Composable
fun demo() {
    // 关键代码
    var versionCode by remember { mutableStateOf(0) }
    
    Column {
        Button(
            onClick = { versionCode++ }) {
            Text("Add +")
        }
        Text( versionCode.toString() )
    }
} 

UI发生变化的关键代码就是 by remember { mutableStateOf(0) } ，这行代码删除后，怎么按UI都不会变化。我发每次versionCode变化的时候会重新走一遍demo()内的代码，这时该类中有其他方法，其他方法代码并不会重走。如果把Text中的versionCode引用删除，写一个固定值，这个再点击按钮，也不会重新走一遍代码。

问题

1. Compose 是如何进行更新的？
2. 如何做到更新时只有引用的方法内刷新？
3. 不引用为何不刷新方法？

分析

带着以上三个问题，点进mutableStateOf中去，看一看源码。 进入 createSnapshotMutableState 进入 ParcelableSnapshotMutableState 进入SnapshotMutableStateImpl，下面这个类中，红框标记的是关键代码，这个方法的注解是

A single value holder whose reads and writes are observed by Compose.Additionally, writes to it are transacted as part of the [Snapshot] system.

我理解的意思是，对value这个值做了监听，只要是 Compose的UI 引用了value，当其发生变化时就能自动更新

这里的 value 就是给 versionCode 赋的值，这里的 get() 方法中会调用readable() ，把当前 state 保存起来（我认为这里的 state 可以理解为 Flutter 的 state）。set() 方法内会进行对比，在 equivalent() 方法中比对的是对象，当两个对象的地址不一致时，会触发监听通知，重写用的Compose方法，

这也就解释了之前说的三个问题。

1. Compose的刷新本质是对 value 的监听通知；
2. 为了避免过度刷新，将刷新范围固定到最小的标记@Compose的注解的方法内，包括方法内的其他方法（和Flutter的StatefulWidget的刷新范围一样），前提是其他Compose方法有参数传入(我理解是有新的参数传入，会生成新的对象)，否则除了第一次不会再进行刷新；为提高性能，会把频繁刷新的View(Flutter中的widget）封装为单独的Compose方法（Stful）；
3. 对value的引用，调用了get内的注册方法，不引用，也就不会引起刷新。

以上就是我对Compose的刷新机制的理解，

应用

了解了Compose的刷新机制后，怎么才能高效的使用这中逻辑编程呢？我在踩了一堆坑后，有以下几个写代码的注意点，仅供参考。

一、

如果在方法内使用mutableStateOf，需要包一层remember函数，它的作用是运行完里面的代码后，就会存在缓存里，再次执行这行代码，不会再次初始化，会从缓存中拿出 State的对象，防止多次初始化。 如果你偏不，可以试试看有什么神奇的现象🙃。’ （PS ：在remember函数中有个熟悉的参数 Key，熟悉Flutter的估计都明白干啥的了，这就不再啰嗦了）

// 成员变量可以不用套，因为本身就初始化一次
var versionCode by mutableStateOf(0) 

@Composable
fun demo() {
    // 方法内这么写
    var versionCode by remember { mutableStateOf(0) }
    
    Column {
        Button(
            onClick = { versionCode++ }) {
            Text("Add +")
        }
        Text( versionCode.toString() )
    }
} 

二、

对value的刷新是设置新的值，是对比对象本身，如果只改变了对象内的值，是不会放生刷新的。如代码中A对象并没有改变。

data class A(var a: Int = 0)
@Composable
fun demo() {
    val versionCode by remember { mutableStateOf(A(0)) }
    Column {
        Button(
            onClick = { versionCode.a++ }) {
            Text("Add +")
        }
        Text( versionCode.toString() )
    }
} 

遇到这种情况需要刷新有两种办法

1. 复制对象，改变对象地址

 Button(
            onClick = { versionCode.copy(a = versionCode.a++) }) {
            Text("Add +")
        } 

2. 给对象内的变量实现mutableStateOf

data class A(var a: MutableState<Int> = mutableStateOf(0)) {
    // 或写在下面用 by 代理的方式
    var a by mutableStateOf(0)
} 

三、

单个对象好复制，好改，遇到列表，数组类的对象刷新，该怎么做呢，换列表对象？不合适。好在官方已经替咱们想到了这一点。神器 mutableStateListOf，当列表内的数据发生变化时，会刷新UI

val data = mutableStateListOf(1, 2, 3)
@Composable
fun demo() {
    Column {
        Button(onClick = {
            data.add(data.last() + 1)
        }) {
            Text(text = "onclick")
        }
        for (d in data) {
            Text(text = "data:${d}")
        }
    }
} 

我大概遇到的UI刷新上的坑，可以归为以上三种，还有其他的欢迎交流补充。

总结

Compose的刷新机制简单来讲是有范围，有组织的用观察者模式进行刷新。 分析了个大概，更深层次的原理，以后慢慢啃。 Compose的编程模式和Flutter很像，会flutter很容易上手，还挺有意思的。

如果有错误，请留言指正