Jetpack compose management status (I)

Preface
Jetpack Compose It can help you clarify the status in Android Storage location and usage in the application , State management It's using Compose Development ui Primary problems .

Jetpack compose Introduce new development paradigm （MVI）

Jetpack Compose Architecture comparison ：MVP & MVVM & MVI

A state in an application is any value that can change over time . It's a very broad definition , from Room Database to class variables , It's all covered .

all Android The application will show the status to the user . Here is Android Some state examples in the application ：

1. Information prompt control displayed when a network connection cannot be established .
2. Blog posts and related comments like background changes , perhaps icon change .
3. Ripple animation played when the user clicks the button .

State and combination

because Compose yes declarative Toolset , The interface cannot be manually operated according to the previous command ui Refresh . The only way to update it is to call the same composable item with a new parameter , Here we need to introduce state control . The change of state will trigger the recombination of composable functions .

@Composable
fun HelloContent() {
    
   Column(modifier = Modifier.padding(16.dp)) {
    
       Text(
           text = "Hello!",
           modifier = Modifier.padding(bottom = 8.dp),
           style = MaterialTheme.typography.h5
       )
       OutlinedTextField(
           value = "",
           onValueChange = {
     },
           label = {
     Text("Name") }
       )
   }
}

If you run this code , Will not see any reaction .OutlinedTextField Can't input content , This is because ,OutlinedTextField Will not update itself , But it will be in its value Parameter change When the update , This is because Compose The working principle of combination and reorganization in . The update here is OutlinedTextField You can recombine functions .

Important vocabulary ：

The initial combination ： Create a composite by running composable items for the first time .

Combine ：Jetpack Compose Description of the interface built when executing composable items .

restructuring ： In the data ( state ) Rerun composable items when changes occur to update the composition .

States in composable items

1. Composable functions can use remember Composable items remember individual objects , The system will be controlled by remember The calculated values are stored in the combination , And returns the stored value during reorganization .remember It can be used to store variable objects , It can also be used to store immutable objects .

2.mutableStateOf Will create observable MutableState,MutableState Is with the Compose Observable types for runtime integration .

Items in a combination can be declared MutableState Object has three methods ：

val mutableState = remember {
     mutableStateOf(default) }
var value by remember {
     mutableStateOf(default) }
val (value, setValue) = remember {
     mutableStateOf(default) }

tips:
although remember Can help you stay in shape after reorganization , But it won't help you in Configuration changes Keep the state after ,
So , You must use rememberSaveable.rememberSaveable It will be saved automatically and can be saved in Bundle Any value in .
For other values , You can pass it in to custom Saver object .

remember Composable items and MutableState Composable item relationship

remember Composable items remain in state in composable functions .MutableState Is to implement the State The observable state of the interface . In writing

 remember {
     mutableStateOf(default) }

Other supported state types

Jetpack Compose Other observable types are supported , stay Jetpack Compose Before reading other observable types in , You must convert it to State, In order to Jetpack Compose It can automatically reorganize the interface when the state changes .

Compose With some can be based on Android Common observable types used in applications State Function of ：

LiveData
Flow
RxJava2

The main points of ：Compose Will read State Interface Automatic reorganization interface .
If you are in Compose Use in LiveData Other observable types , It should be converted to State, Then use something like LiveData.observeAsState() Composable extension functions such as read it in composable items .

Be careful ： stay Compose The variable object （ Such as ArrayList or mutableListOf()） Using as status will cause users to see incorrect or stale data in your application . Whether it is an observable object depends on whether State Interface , Unobservable objects are not recommended

Stateful and stateless

Use remember Composable items that store objects create internal states , Make the composable item stateful .HelloContent Is an example of stateful composable items , Because it will keep and modify its own name state . There is no need to control the state at the caller , And you can use the state without managing the state by yourself ,“ A stateful ” It will be very useful . however , Composable items with internal states are often not easy to reuse , It's also harder to test .

Stateless composable items refer to composable items that do not maintain any state . A simple way to achieve statelessness is to use [ Status up ].

When developing reusable composable items , You usually want to provide both stateful and stateless versions of the same composable item . Stateful versions are convenient for callers who don't care about state , Stateless versions are necessary for callers who need to control or promote state .

@Composable
fun HelloContent() {
    
   Column(modifier = Modifier.padding(16.dp)) {
    
       var name by remember {
     mutableStateOf("") }
       if (name.isNotEmpty()) {
    
           Text(
               text = "Hello, $name!",
               modifier = Modifier.padding(bottom = 8.dp),
               style = MaterialTheme.typography.h5
           )
       }
       OutlinedTextField(
           value = name,
           onValueChange = {
     name = it },
           label = {
     Text("Name") }
       )
   }
}

The system provides rememberxxx function

State and Jetpack Compose