Jetpack Compose学习之mutableStateOf与remember是什么

刚开始学jetpack compose，会看到两个函数，mutableStateOf和remember，这俩货是干什么的？

假如我们要实现下面这个页面

一个标签，一个输入框，那我们马上开搞

    @Composablefun 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(text = "Name") },)}}

写完之后会发现，界面是出来了，但是输入东西却没有反应！！

然后你沉思一下，应该是OutlinedTextFiled的value始终是空字符啊，所以我们需要将输入内容动态赋值给他就行了！

改一改。

class MainActivity : ComponentActivity() {//我们新加入了inputText, 用来记录OutlinedTextField的值，并将它赋值回去var inputText = ""override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {MyApplicationTheme(darkTheme = false) {HelloContent()}}}@Composablefun HelloContent() {Column(modifier = Modifier.padding(16.dp)) {Text(text = "Hello",modifier = Modifier.padding(bottom = 8.dp),style = MaterialTheme.typography.h5,)OutlinedTextField(value = inputText,onValueChange = { inputText = it },label = { Text(text = "Name") },)}}
}

结果还是不行！

为什么呢？

因为inputText的值虽然改变了，但是界面却没有重新绘制！

所以我们需要引入mutableStateOf，来标明这个data是有状态的，如果状态发生了改变，所有引用这个状态的控件都发生了改变，都需要重新绘制！

再改一改

class MainActivity : ComponentActivity() {//这里我们把inputText的类型改成mutableState，标明这个data是有状态的，如果发生了改变，//则所有设计到的“view”都要重新绘制var inputText = mutableStateOf("")override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {MyApplicationTheme(darkTheme = false) {HelloContent()}}}@Composablefun HelloContent() {Column(modifier = Modifier.padding(16.dp)) {Text(text = "Hello",modifier = Modifier.padding(bottom = 8.dp),style = MaterialTheme.typography.h5,)OutlinedTextField(value = inputText.value,onValueChange = { inputText.value = it },label = { Text(text = "Name") },)}}
}

然后就会发现可以功能实现了，完美！ 那remember是干什么的？

观看上面的代码，你会发现HelloContent依赖了一个类成员变量inputText，而JetPack Compose是一种“函数式”编程，怎么可以依赖类变量呢？

你看看，如果改成下面这样，你这个变量放在哪里？

class MainActivity : ComponentActivity() {var inputText = mutableStateOf("")override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {MyApplicationTheme(darkTheme = false) {HelloContent()}}}
}// 我们把HelloContent抽到class外面
@Composable
fun HelloContent() {Column(modifier = Modifier.padding(16.dp)) {Text(text = "Hello",modifier = Modifier.padding(bottom = 8.dp),style = MaterialTheme.typography.h5,)OutlinedTextField(value = inputText.value,onValueChange = { inputText.value = it },label = { Text(text = "Name") },)}
}

这个时候肯定会编译不过，所以就需要remember出马了！

继续修改

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {MyApplicationTheme(darkTheme = false) {HelloContent()}}}
}@Composable
fun HelloContent() {var inputText = remember { mutableStateOf("") }Column(modifier = Modifier.padding(16.dp)) {Text(text = "Hello",modifier = Modifier.padding(bottom = 8.dp),style = MaterialTheme.typography.h5,)OutlinedTextField(value = inputText.value,onValueChange = { inputText.value = it },label = { Text(text = "Name") },)}
}

remember将值存储起来，当界面发生了重新绘制，就会读之前存储的值。

这个功能就完成了！！

到上面位置就明白了mutableStateOf和remember的作用。

可能隐隐约约我们也明白了Jetpack Compose的响应式编程是什么

• 响应式编程就是数据发生了变化，对应的界面就重新绘制，和DataBinding有点类似（不完全一样）
• 传统的界面写法是命令式编程，都是我们主动告诉界面view说，你改变吧，界面view才改变。

结尾

可能有人会看到rememberSaveable，他是什么呢？

他就是当configChanges的时候，将remember的值写入到bundle中，然后重新构建Activity的时候，从bundle读数据，换句话说

rememberSaveable == remeber + onSaveInstanceState+ onCreate中的read savedInstanceState。