Jetpack Compose - Effect与协程（十五）

SideEffect

大家都知道在Compose中有一个重组的概念，也就是Recompose，一般是因为数据源发生了变化，界面跟随要发生变化的场景，但是有时候我们要考虑两种场景：

1.某个Composable函数在执行的过程中，因为数据源发生了变化，所以执行到一半又重新执行了但是在这个Composable函数中，我们还有其他的一些代码，跟ui无关的，这样这些代码会执行多次，有时候这个执行多次的代码也许并不符合我们的需求

2.在某个Composable函数中，我们有一段代码，这个代码我就是仅仅想让他在生命周期内只执行一次，不想他因为Recompose的缘故会执行多次

这个时候我们就可以使用SideEffect

Row() {
    var count=0
    Column() {
        SideEffect {
            println("hello side Effect")
        }

        var names= arrayOf("111","222","333","444")
        for (name in names){
            Text(text = name)
            count++
        }
        Text(text = "count:$count")

    }

}

他的作用就是有2点：

被SideEffect包裹起来的代码只会执行一次
在重组的过程中，SideEffect 只会在重组结束之后被执行

DisposableEffect

这个effect的作用主要就是可以监听组件的是否展示中，也就是组件在界面内展示出来了，还是在界面外没有展示

setContent {

    var flag = remember {
        mutableStateOf(true)
    }


    Column {
        if (flag.value){
            Text(text = "hello", modifier = Modifier.clickable {
                flag.value = !flag.value
            })
            DisposableEffect(Unit) {
                Log.v("wuyue", " coming ")
                onDispose {
                    Log.v("wuyue", "leave")
                }
            }
        }


        Text(text = "change flag", modifier = Modifier.clickable {
            flag.value = !flag.value
        })
    }
}

可以运行一下代码看一下，hello的这个text 每次展示都会打印coming，同样的每次不展示消失的时候也会打印leave

其实到这里也能猜到了，这些SideEffect，以及DisposableEffect中的onDispose函数本质上都是回调函数在重组的生命周期的各个阶段会走这些回调函数，仅此而已

另外要注意的是，如果可见性没有发生变化，那么Disposable 也是不会有变化的比如下面的代码

setContent {

    var flag by remember {
        mutableStateOf("hello")
    }


    Column {
        Log.v("wuyue", " compose ")
        Text(text = flag, modifier = Modifier.clickable {
                flag = "$flag:${Math.random()}"
            })
            DisposableEffect(Unit) {
                Log.v("wuyue", " coming ")
                onDispose {
                    Log.v("wuyue", "leave")
                }
            }
        }

}

这里就是只会改变text的内容，text组件虽然改变了，触发了Column这个组件的recompose，但是因为text组件的可见性没有发生变化，所以DisposableEffect 只会执行coming这行代码，而且只执行一次 leave 是不会执行的

同样的我们也可以看到，这个effect是有一个key参数的，这个参数的作用就是当key发生变化的时候 DisposableEffect 也会得到执行，不管可见性有没有发生变化

还是上面的例子，我们稍微改一下：

setContent {

    var flag by remember {
        mutableStateOf("hello")
    }


    Column {
        Log.v("wuyue", " compose ")
        Text(text = flag, modifier = Modifier.clickable {
                flag = "$flag:${Math.random()}"
            })
            DisposableEffect(flag) {
                Log.v("wuyue", " coming ")
                onDispose {
                    Log.v("wuyue", "leave")
                }
            }
        }

}

这个时候你就会发现，每次点击的时候，先触发了重组，然后触发了leave回调，再触发了coming回调

LaunchedEffect

这个东西和上面2个小节的effect 作用就不太一样了，这个effect主要的作用主要是在Compose中启动一个协程 而且具有2个特点

在重组过程完成以后才会启动协程
key 发生变化的时候也会启动协程

同样的，这个Effect的参数和DisposableEffect 其实是一样的

这里就不演示具体的代码了，因为和上一个小节的内容是差不多的，唯一的区别其实就是这个effect是专门为协程准备的，仅此而已

首先看下下面这段代码

setContent {
    Column {
        Log.v("wuyue"," Recompose ")
        var text by remember {
            mutableStateOf("custom")
        }
        Text(text = "hello", Modifier.clickable {
            text = "${Math.random()}"
        })
        LaunchedEffect(Unit) {
            delay(3000)
            Log.v("wuyue"," text: $text ")
        }
    }

}

这个3s之后的打印应该能猜到打印的值应该是随机数了，但是我如果稍微改一下

@Composable
fun printlnCompose(text:String){
    LaunchedEffect(Unit) {
        delay(3000)
        Log.v("wuyue"," text: $text ")
    }
}

setContent {
    Column {
        Log.v("wuyue"," Recompose ")
        var text by remember {
            mutableStateOf("custom")
        }
        Text(text = "hello", Modifier.clickable {
            text = "${Math.random()}"
        })
        printlnCompose(text)
    }

}

这个时候你就会发现，3s之后的打印还是custom，而不会是随机数了。这是为啥？

其实问题出在这个函数参数这里：

这个函数参数是一个普通类型的String，这会导致我们的LanunchedEffect 感知不到我们的 text发生了变化

所以要改一下：

@Composable
fun printlnCompose(text: String) {
    var rememeberText by remember {
        mutableStateOf(text)
    }
    rememeberText = text

    LaunchedEffect(Unit) {
        delay(3000)
        Log.v("wuyue", " text: $rememeberText ")
    }
}

我们只要稍微的手动进行转换一下即可，将这个text 手动转换成一个remember类型的变量即可

上述的写法也可以用一个简便的写法：

@Composable
fun printlnCompose(text: String) {
    var rememeberText = rememberUpdatedState(newValue = text)
    LaunchedEffect(Unit) {
        delay(3000)
        Log.v("wuyue", " text: $rememeberText ")
    }
}

看下源码，其实底层和我们的代码是以一样的美

为什么不能在Compose中随意启动一个协程？

有人要问了，为啥在compose中启动一个协程这么麻烦？可以看下面截图的报错信息

她告诉你，这个协程必须要在Lanunedeffect中使用，直接用是不行的，为什么？因为Kotlin中所有的协程都需要一个Scope，这个Scope主要的作用就是在某一个时刻将你的协程取消我们的lifeCycleScope 是和activity的生命周期绑定在一起的，并没有和compose绑定在一起，所以如果Compose 不加这个限制，那么协程运行在compose中就会出错了

所以我们在Compose中使用协程的前提条件是必须得有一个和Compose生命周期绑定在一起的scope

一看图，还是错了，还是不给我们用吗，为嘛？

因为这里compose中有重组的概念，所以你必须要用一个remember去包裹一下，否则每次重组你的协程都要执行一次那不是乱套了嘛

所以其实你看LanunchedEffect 也是类似的封装思路

有人可能会奇怪，既然如此，为啥还要对外暴露这个rememberScope的回调？，直接private 这个remember不行吗，反正单独调用她也没用

可以看一下下面这行代码：

val scope = rememberCoroutineScope()
Text(text = "hello", Modifier.clickable {
   scope.launch {

   }
})

在这个点击事件里面，他其实并不属于Compose的环境了，所以我们只需要一个scope 即可完成协程的启动，你甚至可以在这里直接启动一个lifeCycleScope的协程

唯一的区别仅仅在于你到底希望你的协程在哪个scope的生命周期里被结束掉。

Compose状态转换

在Compose中，一个界面组件要响应一个变量的变化，这个变量必须是一个state类型的对象

通常而言，我们会使用MutableState这个state的子接口，因为state是可读，而MutableState是可读可写在有时候，我们变化的数据源如果不是一个MutableState 那怎么办？怎么让Compose的页面来感知我们的数据源变化？

例如，我们要感知用户的地理位置，这个不断变化的地理位置怎么让Compose的界面可以感知到？因为地址位置的变更显然返回的是一个坐标，而不是一个state

可以参考如下代码

var address by remember {
    mutableStateOf(Point(0, 0))
}

Text(text = address.toString())

DisposableEffect(Unit){
    val callBack = object : GetAddressInfo {
        override fun getAddressInfo(p: Point) {
            address = p
        }

    }
    // register callback
    onDispose {
        //unregister callback
    }
}

同样的对于livedata来说我们想感知界面的变化，那也是需要转成state的，好在runtime库帮我们把这个操作做了

注意要引入新的依赖

implementation "androidx.compose.runtime:runtime:$compose_version"
implementation "androidx.compose.runtime:runtime-livedata:$compose_version"
implementation "androidx.compose.runtime:runtime-rxjava2:$compose_version"

对于flow来说也有对应的转换方式

val flow: StateFlow<Point> = MutableStateFlow(Point(0, 0))
val flowState = produceState(Point(0, 0)) {
    flow.collect {
        value = it
    }
}

同样的也有更加简便的写法：

flow.collectAsState()

snapshotflow

前面一个小节我们介绍了各种数据类型向Compose的state转换的方法，这一小节来简单介绍一下 state如何向flow去转换，简单来说就是把state的变化，利用flow 通知出去

Column {
    var text by remember {
        mutableStateOf("hello")
    }
    var flow = snapshotFlow {
        text
    }
    LaunchedEffect(key1 = Unit){
       flow.collect{
           Log.v("wuyue","it:$it")
       }
    }
    Text(text = text, Modifier.clickable {
        text = "${Math.random()}"
    })

}

注意了 snapshotFlow 是可以感知多个state的变化的

Column {
    var text by remember {
        mutableStateOf("hello")
    }

    var age by remember {
        mutableStateOf(18)
    }
    var flow = snapshotFlow {
        "$text $age"
    }
    LaunchedEffect(key1 = Unit){
       flow.collect{
           Log.v("wuyue","it:$it")
       }
    }
    Text(text = text, Modifier.clickable {
        text = "${Math.random()}"
    })

    Text(text = "age:$age", Modifier.clickable {
        age = (Math.random() * 100).toInt()
    })

}

Jetpack Compose - Effect与协程 （十五）