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

前言

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

思考

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

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

简单讲Flutter是通过调用StatefulWidgetsetState方法,重新走一遍build方法中的代码。那原理就是setState调用时会自己添加到BuildOwnerdirtyElements脏链表中,然后调用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引用删除,写一个固定值,这个再点击按钮,也不会重新走一遍代码。

Compose 是如何进行更新的?如何做到更新时只有引用的方法内刷新?不引用为何不刷新方法?

分析

带着以上三个问题,点进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()方法内会进行对比,当两个对象的地址不一致时,会触发监听通知,重写用的Compose方法,

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

  1. Compose的刷新本质是对 value 的监听通知;
  2. 为了避免过度刷新,将刷新范围固定到最小的标记@Compose的注解的方法内,包括方法内的其他方法(和Flutter的StatefulWidget的刷新范围一样),为提高性能,会把频繁刷新的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 +")
        }

  1. 给对象内的变量实现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很容易上手,还挺有意思的。

如果有错误,请留言指正

本文转自 https://juejin.cn/post/7080453608231141412,如有侵权,请联系删除。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,271评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,725评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,252评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,634评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,549评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,985评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,471评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,128评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,257评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,233评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,235评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,940评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,528评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,623评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,858评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,245评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,790评论 2 339

推荐阅读更多精彩内容