Compose principle - the view and the principle of two-way data binding

Foreword:

Compose is inherently declarative programming with MVVM features.So how can this feature be used and how to implement data binding?What is the principle of it?Then try it today.

One. Experiment Demo

The logic is very simple, it is to display a Text first, the content is aaa.Then open the thread for 5S and modify the data to bbb.

First version code first:

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()}}@Composablefun Greeting(name: String) {Log.i("test","Greeting:${name}")Text(text = "Hello $name!")}data class Student(var name: String = "aaa",valid id: Int = 0)

It seems that there is no problem, but once it is running, there is no change after 5S, and the displayed content is still aaa.Why is this?

Comparing with the official example, it is found that there is a little typo. In the official example, when assigning value to the Model, the writing method is similar to the following:

uiState = uiState.copy(name = "bbb", id = 1)

And I wrote it like this:

uiState.name = "bbb"

After the correction, it really took effect. After 5S, the display content became bbb.

Why should I emphasize that I made a mistake here?The reason you may have guessed, since only copy takes effect, then the principle of binding is in it.(PS: In fact, just assign uiState to a new object)

2. Binding principle

Let's take a look at the java code after decompilation of this line of code: uiState = uiState.copy(name = "bbb", id = 1):

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()));

The code is very long, but it doesn't really matter, just look at the top: the setUiState method.In kotlin, as long as you assign a value to an object, it will eventually be converted to calling the setXXX method.Then we enter the setUiState method to see.

public final void setUiState(@NotNull Student var1) {Intrinsics.checkNotNullParameter(var1, "");MutableState $this$setValue$iv = this.uiState$delegate;KProperty property$iv = null;int $i$f$setValue = false;$this$setValue$iv.setValue(var1);//1 this line of code}

The final conversion is to call the setValue method of $this$setValue$iv.So what is the first object?In fact, it is the MutableState we declared earlier:

private final MutableState uiState$delegate = SnapshotStateKt.mutableStateOf$default(new Student((String)null, 0, 3, (DefaultConstructorMarker)null), (SnapshotMutationPolicy)null, 2, (Object)null);

So the line of code 1 will eventually call the setValue method of MutableState.

MutableState is actually an interface, and the final implementation class is actually a generated observation object for Student.So when calling setValue, if the judgment value has changed, the outer layer will be notified to refresh the UI.