• Compose原理-视图和数据双向绑定的原理


    前言:

    Compose是天生的声明式编程,自带MVVM的特性。那么这个特性能怎么用的,如何实现数据绑定的呢?其原理是怎么样的呢?那么今天就来试一下。

    一.实验Demo

    逻辑很简单,就是先显示一个Text,内容为aaa。然后开启线程5S后修改数据为bbb。

    首先先是第一版代码:

    1. class ComposeActivity : ComponentActivity() {
    2. var uiState by mutableStateOf(Student())
    3. override fun onCreate(savedInstanceState: Bundle?) {
    4. super.onCreate(savedInstanceState)
    5. val student = Student()
    6. setContent {
    7. Greeting(uiState.name)
    8. }
    9. Thread {
    10. Thread.sleep(5000)
    11. uiState.name = "bbb"
    12. Log.i(
    13. "test",
    14. "student.name:${student.name}, mutableStateOf.name:${uiState.name}"
    15. )
    16. }.start()
    17. }
    18. }
    19. @Composable
    20. fun Greeting(name: String) {
    21. Log.i(
    22. "test",
    23. "Greeting:${name}"
    24. )
    25. Text(text = "Hello $name!")
    26. }
    27. data class Student(
    28. var name: String = "aaa",
    29. val id: Int = 0
    30. )

    看起来没啥问题,但是一运行,发生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方法看下。

    1. public final void setUiState(@NotNull Student var1) {
    2. Intrinsics.checkNotNullParameter(var1, "");
    3. MutableState $this$setValue$iv = this.uiState$delegate;
    4. KProperty property$iv = null;
    5. int $i$f$setValue = false;
    6. $this$setValue$iv.setValue(var1);//1这行代码
    7. }

    最终转换为了调用$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。

  • 相关阅读:
    每日4道算法题——第021天
    Count( ? ) 效率的比较
    青书学堂 看视频 耍课时
    Navicat远程连接MySQL服务器
    Python抓取我的CSDN粉丝数,白嫖GithubAction自动抓取
    LeetCode102.二叉树的层序遍历
    18 【节点的关系和内部操作】
    Swagger:在线接口文档
    在vue3+vite中引入高德开放平台API实现边界范围多边形的绘制
    Dubbo(一)——概念与环境搭建
  • 原文地址:https://blog.csdn.net/AA5279AA/article/details/126087938