Jetpack Compose学习之mutableStateOf与remember是什么

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

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

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

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

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

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

改一改。

class MainActivity : ComponentActivity() {
    //我们新加入了inputText, 用来记录OutlinedTextField的值，并将它赋值回去
    var inputText = ""
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme(darkTheme = false) {
                HelloContent()
            }
        }
    }

    @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,
                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()
            }
        }
    }

    @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是干什么的？

观看上面的代码，你会发现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。