当前位置:网站首页>Compose原理-视图和数据双向绑定的原理
Compose原理-视图和数据双向绑定的原理
2022-08-01 00:00:00 【失落夏天】
前言:
Compose是天生的声明式编程,自带MVVM的特性。那么这个特性能怎么用的,如何实现数据绑定的呢?其原理是怎么样的呢?那么今天就来试一下。
一.实验Demo
逻辑很简单,就是先显示一个Text,内容为aaa。然后开启线程5S后修改数据为bbb。
首先先是第一版代码:
class ComposeActivity : ComponentActivity() {
var uiState by mutableStateOf(Student())
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val student = Student()
setContent {
Greeting(uiState.name)
}
Thread {
Thread.sleep(5000)
uiState.name = "bbb"
Log.i(
"test",
"student.name:${student.name}, mutableStateOf.name:${uiState.name}"
)
}.start()
}
}
@Composable
fun Greeting(name: String) {
Log.i(
"test",
"Greeting:${name}"
)
Text(text = "Hello $name!")
}
data class Student(
var name: String = "aaa",
val id: Int = 0
)
看起来没啥问题,但是一运行,发生5S之后并没有发生变化,显示的内容仍然是aaa。这是为何?
对照着官方的例子发现有一点写错,官方的例子中给Model赋值时用的是类似下面这样的写法:
uiState = uiState.copy(name = "bbb", id = 1)
而我的写法是这样的:
uiState.name = "bbb"
改正之后,果然生效了,5S之后显示内容变成了bbb。
这里为什么要强调我写错了呢?原因你也许猜到了,既然只有copy才生效,那么绑定的原理就在其中。(PS:其实只要把uiState赋值新对象就可以)
二.绑定原理
我们先看一下uiState = uiState.copy(name = "bbb", id = 1)这行代码反编译之后的java代码:
this$0.setUiState(this$0.getUiState().copy(com.xt.composeapp.LiveLiterals.ComposeActivityKt.INSTANCE.String$arg-0$call-copy$arg-0$call-$set-uiState$$fun-$anonymous$$arg-0$call-$init$$$this$call-start$fun-onCreate$class-ComposeActivity(), com.xt.composeapp.LiveLiterals.ComposeActivityKt.INSTANCE.Int$arg-1$call-copy$arg-0$call-$set-uiState$$fun-$anonymous$$arg-0$call-$init$$$this$call-start$fun-onCreate$class-ComposeActivity()));
代码很长,但是其实并不重要,只要看最前面即可:setUiState方法。kotlin中,只要给对象赋值,最终其实都会转化为调用setXXX方法。那我们进入setUiState方法看下。
public final void setUiState(@NotNull Student var1) {
Intrinsics.checkNotNullParameter(var1, "<set-?>");
MutableState $this$setValue$iv = this.uiState$delegate;
KProperty property$iv = null;
int $i$f$setValue = false;
$this$setValue$iv.setValue(var1);//1这行代码
}
最终转换为了调用$this$setValue$iv的setValue方法。那么第一个对象是什么呢?其实就是我们之前声明的MutableState:
private final MutableState uiState$delegate = SnapshotStateKt.mutableStateOf$default(new Student((String)null, 0, 3, (DefaultConstructorMarker)null), (SnapshotMutationPolicy)null, 2, (Object)null);
所以1这行代码,最终其实会调用到MutableState的setValue方法。
MutableState其实是一个接口,最终实现类其实是生成的对Student的一个观测对象。所以调用setValue的时候,判断值发生了变化,则会通知外层去重新刷新UI。
边栏推荐
- [Cloud Residency Co-Creation] [HCSD Big Celebrity Live Broadcast] Personally teach the secrets of interviews in big factories
- (26) About menu of the top menu of Blender source code analysis
- 什么是客户画像管理?
- /etc/resolv.conf的作用
- UOS统信系统 - WindTerm使用
- VOT2021 game introduction
- vim的基本使用概念
- SQL注入 Less42(POST型堆叠注入)
- The role of /etc/resolv.conf
- leetcode:126. 单词接龙 II
猜你喜欢
随机推荐
2022-07-31:给出一个有n个点,m条有向边的图, 你可以施展魔法,把有向边,变成无向边, 比如A到B的有向边,权重为7。施展魔法之后,A和B通过该边到达彼此的代价都是7。 求,允许施展一次魔法
消息队列消息存储设计(架构实战营 模块八作业)
Interview assault 69: TCP reliable?Why is that?
Daily--Kali opens SSH (detailed tutorial)
hboot and recovery, boot.img, system.img
清华大学陈建宇教授团队 | 基于接触丰富机器人操作的接触安全强化学习框架
[微服务]分布式事务解决方案-Seata
什么是动态规划,什么是背包问题
vim的基本使用-命令模式
类和对象:上
date命令
22年8月推广大使额外奖励规则
力扣二叉树
Flutter教程之 02 Flutter 桌面程序开发入门教程运行hello world (教程含源码)
简单的vim配置
SQL injection Less54 (limited number of SQL injection + union injection)
命名实体识别-模型:BERT-MRC
继承和友元,静态成员的关系
Components of TypeScript
NgRx 里 first 和 take(1) 操作符的区别