如何理解Jetpack Compose中的remember？

一、概念

Jetpack Compose是一种新的 Android UI开发框架，它提供了一种简洁的方式来创建和管理界面。其中 remember 是一个强大的功能，用于在界面重构期间保存和恢复界面状态。

在传统的 Android UI 开发中，界面重构往往会导致数据丢失，例如输入框中的文本。Jetpack Compose 通过 remember功能解决了这个问题，使开发者可以在界面重构期间轻松地保存和恢复界面状态。

二、通过代码来说明一下用法

1、如下面代码所示，如果不使用remember，当点击改变name的值显示没有变化，当设置remember点击改变name值后显示改为xiaohua。

@Composable
private fun GreetingAllen() {
    var name = remember {
        mutableStateOf("allen")
    }
    var name = "allen"//不使用remember
    Surface(
        color = MaterialTheme.colors.primary,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Column(modifier = Modifier.padding(24.dp)) {
            Text(text = name.value)
            Button(
                onClick = { name.value = "xiaohua" }
            ) {
                Text(name.value)
            }
        }
    }
}

2、如下面代码所示，大家可以思考一下，当点击事件改变 name值时，会显示什么。第一次运行时显示ALLEN，点击事件发生后Text显示 XIAOHUA，Button显示ALLEN。这是因为remember中的key没有发生变化，因此重组时name3的值不会改变。

如果把name3换成var name3 = remember(name.value) { name.value.uppercase() } Button的显示会改变吗？

@Composable
private fun GreetingAllen() {
//    var nameList = remember { mutableStateOf(listOf("allen", "jack")) }
    var name = remember {
        mutableStateOf("allen")
    }
    var name2 = name.value.uppercase()
    var name3 = remember(name) {
        name.value.uppercase()
    }
    Surface(
        color = MaterialTheme.colors.primary,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Column(modifier = Modifier.padding(24.dp)) {
            Text(text = name2)
            Button(
                onClick = { name.value = "xiaohua" }
            ) {
                Text(name3)
            }
        }
    }
}

3、最后看一下下面的代码，upperNameList是从nameList中派生出来的，当nameList增加一个元素，upperNameList也会发生变化，在重组时会更新UI。可以对比一下upperNameList和name3的区别。derivedStateOf是监听对象内部状态的改变，而remember中的key监听的是对象的改变。

@Composable
private fun GreetingAllen() {
    var nameList = remember { mutableStateListOf("allen", "jack") }
    var upperNameList = remember {
        derivedStateOf {
            nameList.map {
                it.uppercase()
            }
        }
    }
    var name = remember {
        mutableStateOf("allen")
    }
    var name2 = name.value.uppercase()
    var name3 = remember(name) {
        name.value.uppercase()
    }
    Surface(
        color = MaterialTheme.colors.primary,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Column(modifier = Modifier.padding(24.dp)) {
            Text(text = name2)
            Button(
                onClick = { name.value = "xiaohua" }
            ) {
                Text(name3)
            }
            Spacer(modifier = Modifier.size(5.dp))
            LazyColumn {
                items(upperNameList.value) {
                    Text(text = it, modifier = Modifier.clickable {
                        nameList.add("bob")
                    })
                }
            }
        }
    }
}

三、总结

总的来说，remember 功能是 Jetpack Compose中的一个强大的特性，可以大大简化界面状态管理的工作。它使开发者可以轻松地在界面重构期间保存和恢复界面状态，避免数据丢失的问题。