Jetpack Compose 入门难点解疑

作者：晴天小庭

近些年声明式布局开发方式逐渐从网页端延展到了手机端，说到底还是声明式太香了，其代码更加清晰、简洁，并且更接近于自然语言的表达方式。这使得代码易于理解和维护，降低了开发人员的心智负担。

谷歌和苹果分别维护着两个地球上最大的手机操作系统：Android和IOS。长期以来，由于编程语言的特性，手机端一直都是使用命令式布局（偏向面向对象的开发方式）来开发UI，但是随着手机UI逐渐复杂和动态化，原有的方式暴露了其瓶颈，越来越多的手机端工程师抱怨，实现产品要求的效果越来越难了。于是为了适应市场的要求，谷歌和苹果分别推出了原生的声明式布局开发框架，苹果端是SwiftUi,安卓端就是本期的主角-Jetpack Compose。

如果你从来没听说过Jetpack Compose，笔者建议你先阅读一下官方的简介和开发文档，因为本期节目并不会从0开始介绍这个框架，而是带领新人攻克最难的几个入门门槛。

• Jetpack Compose 简介  |  Android Developers (google.cn)
• Jetpack Compose 开发文档  |  Android Developers (google.cn)

如果你已经大致读完了上面两个文档，你仍然回到这篇文章，那说明你遇到了笔者一开始遇到的问题：Jetpack Compose的文档实在写的太烂了，充满了机翻，而且比较难的概念只是一笔带过。

本章会手把手带你理解Jetpack Compose初学最难理解的几个难点。

一、可组合函数与附带效应

可组合函数是Compose中描述UI的函数，你可以把它类比成HTML，可组合函数使用kotlin作为开发语言。

关于可组合函数，必须有以下特点：

• 此函数带有 @Composable 注释。所有可组合函数都必须带有此注释；此注释可告知 Compose 编译器：此函数旨在将数据转换为界面。

• 此函数接受数据。可组合函数可以接受一些参数，这些参数可让应用逻辑描述界面。在本例中，我们的 widget 接受一个 String，因此它可以按名称问候用户。

• 此函数可以在界面中显示文本。为此，它会调用 Text() 可组合函数，该函数实际上会创建文本界面元素。可组合函数通过调用其他可组合函数来发出界面层次结构。

• 此函数不会返回任何内容。发出界面的 Compose 函数不需要返回任何内容，因为它们描述所需的屏幕状态，而不是构造界面 widget。

• 可组合函数快速、幂等且没有附带效应。

  • 使用同一参数多次调用此函数时，它的行为方式相同，并且它不使用其他值，如全局变量或对 random() 的调用。
  • 此函数描述界面而没有任何副作用，如修改属性或全局变量。

这里出现了一个概念：幂等，也许有人第一次接触到这个词，我提供一下关于这个词的解释：

在编程中，"幂等"是指一个操作或函数，无论执行多少次，结果都是相同的。换句话说，对于给定的输入，多次执行相同的操作或函数不会产生额外的影响或副作用。

假设你的函数改变了外部的变量或者访问了外部的变量，那它就不是幂等的，例如下面的函数：

var a:Int=1

fun nonIdempotent(){
    a++
}

很显然，每次调用nonIdempotent()方法的结果都是不一样的，这种就是"不幂等"的函数。

相同的，我们再来看看幂等的函数：

fun idempotent(a:Int):Int{
    return a+1
}

如果我传入的a不一样，每次返回的结果都不一样，还算幂等吗？当然算，我们说幂等的前提是保持参数一致，如果参数一致的情况下，结果永远都是a+1，因此方法是幂等的。

下面再看一个函数，请问这是幂等的吗:

fun idempotentOrNonIdempotent(a:Int):Int{
    print("${a+1}")
    return a+1
}

也许你会觉得这是幂等的，因为结果是一致的，但是这个函数却是不幂等的，因为print会对控制台输出日志，这属于对函数外部产生了影响，而对外部产生影响属于附带效应，因此也是不幂等的。

附带效应是指发生在可组合函数作用域之外的应用状态的变化。由于可组合项的生命周期和属性（例如不可预测的重组、以不同顺序执行可组合项的重组或可以舍弃的重组），可组合项在理想情况下应该是无附带效应的。

回到Compose中来，为什么Compose的可组合函数要强调幂等且没有附带效应呢？因为Compose是没有对象这一个概念的，它是用纯粹的函数来表达UI，因此UI的刷新就是重新调用一次可组合函数，刷新过程由Compose的智能重组机制自动完成，关于这个机制我们接下来才会提到，你只需要了解一个概念：即Compose的UI刷新就是重新调用一次可组合函数，而且调用的次数和时机是不确定的即可。

基于这个因素，如果我们的可组合函数里面出现了附带效应的情况，就会导致附带效应在不恰当的时机出现，例如下面的代码：

@Composable
fun MyScreen(
    title:String
){

    Log.d("UI日志","MyScreen")
    Column{
        Text(title)
    }

}

也许你的本意只是想输出一个日志，查看MyScreen的出现时机，但是这样在Compose中属于经典的错误。这样写的结果是每当MyScreen刷新的时候，都会输出一遍日志，如何解决附带效应的问题我们接下来再讲，现在只需要读者留一个概念：千万要注意附带效应！

二、重组与智能重组

在命令式界面模型中，如需更改某个 widget，您可以在该 widget 上调用 setter 以更改其内部状态。在 Compose 中，您可以使用新数据再次调用可组合函数。

这样做会导致函数进行重组，系统会根据需要使用新数据重新绘制函数发出的 widget。Compose 框架可以智能地仅重组已更改的组件。

例如，假设有以下可组合函数，它用于显示一个按钮：

@Composable
fun ClickCounter(clicks: Int, onClick: () -> Unit) {
    Button(onClick = onClick) {
        Text("I've been clicked $clicks times")
    }
}

每次点击该按钮时，调用方都会更新 clicks 的值。Compose 会再次调用 lambda 与 Text 函数以显示新值；此过程称为“重组”。不依赖于该值的其他函数不会进行重组。

如前文所述，重组整个界面树在计算上成本高昂，因为会消耗计算能力并缩短电池续航时间。Compose 使用智能重组来解决此问题。

所谓的智能重组就是：Compose根据可组合函数的参数来决定是否进行重组。

也就是说，每一次可组合函数被调用的时候，他会检查所有传入的参数，如果本次传入的参数和上一次传入的参数都是相同的话（这里指的相同是指结构性相等，在kotlin中指的是==，在java中指的是调用对象的equals()方法) ，那么Compose就会略过调用这个可组合函数，以达到最快的重组效率。

让我们回到这个可组合函数，如果他的父级可组合函数由于某种原因触发了重组，那么Compose就会尝试调用MyScreen()来完成刷新，如果title参数没有发生变化的话，Compose实际上就会略过MyScreen的刷新。

@Composable
fun MyScreen(
    title:String
){
    Column{
        Text(title)
    }
}

三、Compose的生命周期

组合中可组合项的生命周期。 进入组合，执行 0 次或多次重组，然后退出组合。

每一次composable（重组）就是调用一次可组合函数

四、remember与状态

由于 Compose 是声明式工具集，因此更新它的唯一方法是通过新参数调用同一可组合项。这些参数是界面状态的表现形式。每当状态更新时，都会发生重组。

1.remember

remember 会将对象存储在组合中，当调用 remember 的可组合项从组合中移除后，它会忘记该对象

为什么需要remember，是因为Compose使用了纯函数的形式表达UI（与flutter等框架使用对象不同），可组合函数本身可能会被多次调用，如果我们直接在方法体中声明属性，这个属性就会因为方法本身被多次调用从而丢失，因此我们需要一种让变量“持久化”的能力，remember就提供了这种能力，让某个变量从“Enter the Compotision”阶段一直保存到“leave the Composition”阶段。

被remember包裹住的变量，每一次组合的时候，取的都是同一个变量。

有时候，我们希望某个remember变量在恰当的时候发生变化，例如int类型的变量num变化的时候，自动生成对应的字符串，我们可以使用remember的key，当key发生变化的时候，remember的变量会重新生成。

var num by remember { mutableStateOf(0) }
val numString = remember(key1=num) {"我是数字$num"}

上述案例中，numString是受num影响的，如果num不变的情况下，numString取的值永远都是上一次生成的值，一旦num发生了变化，即remember中的key值变化，那么remember的lambda会重新执行来获取新值。

2.MutableState

mutableStateOf 会创建可观察的 MutableState，后者是与 Compose 运行时集成的可观察类型

interface MutableState<T> : State<T> {
    override var value: T
}

如果 value 有任何变化，系统就会为用于读取 value 的所有可组合函数安排重组。

在可组合项中声明 MutableState 对象的方法有三种：

• val mutableState = remember { mutableStateOf(default) }
• var value by remember { mutableStateOf(default) }（实际中最多使用）
• val (value, setValue) = remember { mutableStateOf(default) }

这些声明是等效的，以语法糖的形式针对状态的不同用法提供。您选择的声明应该能够在您编写的可组合项中生成可读性最高的代码。

简单来说，MutableState对象的作用就是一种可以被Compose观察其变化的对象，当一个MutableState变化的时候，这个对象所在的所有重组作用域都会进入重组。

*关于重组作用域的概念此处不展开，你可以大致理解为MutableState所在的那个可组合函数

通常MutableState是和remember一起出现的，下面演示一个组件：

@Composable
fun MyButton(){

    var num:Int by remember{ mutableStateOf(0) }

    Column{
        Button(onClick = { num++ }) {
            Text("点我加一")
        }
        Text("当前点击次数：$num")
    }
    

}

很容易看出来，这是一个竖向的布局，上面是一个按钮，点击之后，会让num变量+1，然后触发重组，导致其下面的Text的显示内容也+1。

可能很多初学者看到num的类型是Int很奇怪，会奇怪为什么Int的类型变化会导致重组，不是说只有MutableState变化才会触发重组吗，这是由于使用了by这个操作符对MutableState进行了委托，num的get和set方法本质上是修改了MutableState的内部的value。

我们可以去除掉by操作符，代码会变成这样，本质是一样的：

@Composable
fun MyButton(){

    val num: MutableState<Int> = remember{ mutableStateOf(0) }

    Column{
        Button(onClick = { num.value++ }) {
            Text("点我加一")
        }
        Text("当前点击次数：${num.value}")
    }


}

可以看出来，num的类型变成了MutableState，不能再对num修改，而是修改起内部的value，这样会导致Compose进行重组（也许你会好奇为什么会进行重组，这里大致的原理是每个重组作用域都会监听它内部所有的MutableState的value的变化，一旦他们发生了变化就会触发重组，是一个观察者模式的设计）。

实际开发中基本都是使用by的方式委托调用MutableState，因为不需要额外写.value。

五、解决附带效应

附带效应是指发生在可组合函数作用域之外的应用状态的变化，例如当进入页面的时候更新一下当前的位置，亦或者修改一下全局变量，如果直接在可组合函数里面引入这些附带效应的话，会让逻辑出现严重的问题，下面是两种常见的错误的附带效应的使用案例：

/**
 * 手机位置更新服务
 */
object PhoneLocationUpdateService{
    //...
    fun updateMyLocation(){
        // TODO: 更新当前的位置
    }
    //...
}

/**
 * 全局变量、可组合函数以外的变量
 */
var globalParams:Int=0

@Composable
fun TestScreen(){

    //❎的做法一
    PhoneLocationUpdateService.updateMyLocation()
    //❎错误的做法二
    globalParams++

    Column{
        //...
    }

}

为什么附带效应在Compose中存在问题？

这要结合Compose的生命周期来说，回归到生命周期的这张图中

如果我们希望可组合函数显示的时候，都让某个全局变量增加1的话，确实很容易直接在可组合函数的开头几句中直接让全局变量+1，但是需要重视的是，可组合函数会在生命周期期间多次重组的，也就是自身会被多次调用，这样就和我们需要的业务相违背了。

相似地，如果我们在AndroidView中的onLayout中插入某些访问全局变量的代码的话，可想而知会出现多大的问题（因为onLayout会频繁被调用而且次数未知）。

var globalParams:Int=0

class CrazyView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
        super.onLayout(changed, left, top, right, bottom)
        //让人疯狂！！！
        globalParams++
    }
    
}

解决附带效应利器——SideEffect Api

如 Compose 编程思想 文档中所述，可组合项应该没有附带效应。如果您需要更改应用的状态，您应该使用 Effect API，以便以可预测的方式执行这些附带效应。

换句话说，我们的可组合函数确实有些情况需要带一点附带效应，但是我们希望以"可预测的方式"的执行。

注：SideEffect较多，属于最难上手的部分，但是只要你搞懂了他们的使用场景和解决的问题，就可以大胆使用了。

1.LaunchedEffect：在某个可组合项的作用域内运行挂起函数

使用场景：希望在一个组合内进行异步操作

LaunchedEffect会提供一个协程作用域，这个作用域不会随着重组消失，它只会在该组合销毁的时候停止。

LaunchedEffect和remember一样，使用key作为是否重启的标志，当key发生变化的时候，会重新启动运行挂起函数

下图展示了一个组件显示3秒之后会弹出一个"我显示了"的文字的可组合函数

图中的key1传入了Unit，也就是LaunchedEffect不会重启，你可以通过改变key的方式让它重启，具体得看业务需要。

2.rememberCoroutineScope：获取组合感知作用域，以便在可组合项外启动协程

使用场景：希望在非重组作用域启动协程任务

Compose中并不都是重组作用域，有一些诸如点击回调的地方，我们也希望启动协程任务，这样LaunchedEffect就无法满足我们的需求了，因为LaunchedEffect是一个可组合函数，他无法在重组作用域以外的地方调用。

下面看看案例，我们在重组作用域使用rememberCoroutineScope()方法生成一个scope，这个scope的生命周期和组合的生命周期也是一致的，从组合出现到销毁，中间的重组并不会影响它，同时我们根据名字也可以知道，这个scope内部是被remember处理过，我们不用担心重组之后又生成一个Scope。

接着我们就可以在非重组作用域（图中是onClick回调）中使用协程来完成异步操作。

你看懂了吗，点击按钮的3秒后，Text就会显示一段文字。

3.rememberUpdatedState：在效应中引用某个值，该效应在值改变时不应重启

使用场景：LaunchedEffect中执行了一段异步操作之后，希望取到最新的方法参数的值

假设我们拥有这样一个可组合函数，他的逻辑希望是：3秒后显示传入的num。

实际上，当你在3秒内传入了不同的num，在3秒后显示的结果是第一次传入的num。

这是什么情况呢，还记得LaunchedEffect的设计吗，它的设计就是避免异步逻辑遭受重组的干扰，因此只有第一次传入的num会真正被LaunchedEffect的lambda拿走，其余的num都被LaunchedEffect自身的设计忽视了。

这个时候会有人想起，LaunchedEffect的key是可以让它重启的，于是会改造成这样：

每次num发生变化的时候，都重启LaunchedEffect，这样不就可以在3秒倒计时之后，取到的都是最新的num吗，最终结果来说这是没问题的，显示的也是最新的值，但是问题是：倒计时也重启了。

在这种场景下，就需要使用rememberUpdatedState()了，它本质上非常简单，让我们看看源码：

@Composable
fun <T> rememberUpdatedState(newValue: T): State<T> = remember {
    mutableStateOf(newValue)
}.apply { value = newValue }

实际上就是把一个值缓存在一个MutableState里面而已，这样有什么用呢，我们看看改造后的代码：

我们继续看代码，使用rememberUpdatedState()把num缓存在一个MutableState中，当LaunchedEffect内部的delay结束时，通过MutableState访问到了最新的值。

等等，为什么这个时候获取到的是最新的值呢，不是说LaunchedEffect不是不会受到重组影响吗，当然不会，还记得MutableState的by使用方式吗，我们访问rememberUpDatedNum实际上是访问了MutableState内部的value变量，MutableState自始至终都没发生过变化，而是它内部的value发生了变化，因此我们可以取到最新的值。

4.DisposableEffect：需要清理的效应

使用场景：当前可组合函数去订阅某些信息，而且可组合函数销毁的时候取消订阅

假设我们有一个这样的天气服务，可以通知所有的订阅者当前的天气。

interface WeatherListener{

    fun onUpdate(weather:String)

}

object WeatherService{

    private val observerList=mutableListOf<WeatherListener>()

    fun addObserver(observer:WeatherListener)= observerList.add(observer)

    fun remove(observer: WeatherListener)=observerList.remove(observer)

    fun update(){
        observerList.forEach {
            it.onUpdate("下雨了")
        }
    }

}

我们希望在一个组合中订阅实时的天气，可以这样做：

@Composable
fun Weather(){

    var weatherString by remember{ mutableStateOf("") }

    DisposableEffect(Unit){
        val listener=object:WeatherListener{
            override fun onUpdate(weather: String) {
                weatherString=weather
            }
        }
        WeatherService.addObserver(listener)
        onDispose {
            WeatherService.remove(listener)
        }
    }
    
    Text("当前的天气:${weatherString}")

}

DisposableEffect和LaunchedEffect很类似，都有key作为重启的标识，只是必须调用onDispose方法结尾，在onDispose中进行解绑操作。

5.derivedStateOf：将一个或多个状态对象转换为其他状态

使用场景：订阅可观察的列表变化、观察多个状态的变化等

有时候我们希望某个状态发生改变的时候，会改变另外一个状态的值，通常可以使用remember的key来完成这个业务，例如下图，showText的值会在num改变的时候重新生成。

但是有些可观察的状态我们是无法使用为remember的key的，因为变化并不是发生在它自身的值的变化，而是其内部的值发生了变化，例如常见的mutableListOf()生成的列表。

为什么会没用呢，因为remember比较的额是对象自身，而不是对象内部的内容，对于list来说，它从来没有改变为其他引用，我们只改变它内部的元素，因此remember是无法感知到list的变化的，这时候我们就需要使用derivedStateOf来感知。

derivedStateOf传入的lambda里面的任意一个MutableState发生变化的时候，就会重新生成一个新值。

其他类内部包含了其他State的也可以通过这种方式来观察其变化。

总结

笔者大致讲了一下Compose的基础概念和入门难点，希望大家在入门Compose的过程中少走弯路，多理解不同api在合适的场景下的作用，

---

为了帮助大家更好的熟知Jetpack Compose 这一套体系的知识点，这里记录比较全比较细致的《Jetpack 入门到精通》(内含Compose) 学习笔记！！！ 对Jetpose Compose这块感兴趣的小伙伴可以参考学习下……

Jetpack 全家桶（Compose）

Jetpack 部分

1. Jetpack之Lifecycle
2. Jetpack之ViewModel
3. Jetpack之DataBinding
4. Jetpack之Navigation
5. Jetpack之LiveData

Compose 部分
1.Jetpack Compose入门详解
2.Compose学习笔记
3.Compose 动画使用详解