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

失落夏天

已于 2022-08-21 09:40:23 修改

阅读量722

点赞数

分类专栏： flutter/RN/Compose/VUE/跨平台文章标签： android kotlin 开发语言

于 2022-07-31 18:43:24 首次发布

本文链接：https://blog.csdn.net/rzleilei/article/details/126087938

版权

flutter/RN/Compose/VUE/跨平台专栏收录该内容

8 篇文章 1 订阅

订阅专栏

前言：

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。