1. 副作用与纯函数

程序开发中的副作用是伴随函数式编程产生的重要概念。

In computer science, an operation, function or expression is said to have a side effect if it modifies some state variable value(s) outside its local environment, that is to say has an observable effect besides returning a value (the main effect) to the invoker of the operation.
– wikipedia

用一句话概括副作用：一个函数的执行过程中，除了返回函数值之外，对调用方还会带来其他附加影响，例如修改全局变量或修改参数等。

Composable是纯函数

与之相对的就是纯函数，纯函数即没有副作用的函数，纯函数只能通过返回值对外产生影响。此外，纯函数是幂等的，唯一输入（参数）决定唯一输出（返回值），不会因为运行次数的增加导致返回值的不同。

这对于React、Compose这类的声明式UI框架至关重要，因为它们都是通过函数（组件）的反复执行来渲染UI的，函数执行的时机和次数都不可控，但是函数的执行结果必须可控，因此，我们要求这些函数组件必须用纯函数实现。

合理的副作用

虽然我们不希望函数执行中出现副作用，但现实情况是有一些逻辑只能作为副作用来处理。例如一些IO操作、计时、日志埋点等，这些都是会对外界或收到外界影响的逻辑，不能无限制的反复执行。所以React、Compose等框架需要能够合理地处理一些副作用：

副作用的执行时机是明确的，例如在Recomposition时，或者在onMount时等
副作用的执行次数是可控的，不应该随着函数反复执行。
副作用不会造成泄露，例如对于注册要提供适当的时机进行反注册

2. 处理Effect的API

Composable的生命周期

副作用必须在合适的时机执行，首先需要明确一个Composable的生命周期：

onActive（or onEnter）：当Composable首次进入组件树时
onCommit（or onUpdate）：UI随着recomposition发生更新时
onDispose（or onLeave）：当Composable从组件树移除时

大多数围绕着Composable的副作用会在其生命周期内执行和结束，当然也有一些与具体Comosable无关的副作用不受生命周期的限制。

DisposableEffect

副作用译自Side Effect或简称Effect，当看到带有Effect关键字API一般就是处理副作用的了，例如React Hook的useEffect。 Compose中最常用的API就是DisposableEffect与SideEffect了。

Compose目前还处于alpha版（当前最新版本1.0.0-alpha12），API仍然在不断调整中。DisposableEffect相当于早期API中的 onCommit + onDispose，顾名思义，DisposableEffect可以感知onCommit和onDipose的生命周期回调，在里面进行Effect处理。

@Composable
fun backPressHandler(onBackPressed: () -> Unit, enabled: Boolean = true) {val dispatcher = BackPressedDispatcherAmbient.current.onBackPressedDispatcherval backCallback = remember {object : OnBackPressedCallback(enabled) {override fun handleOnBackPressed() {onBackPressed()}}}DisposableEffect(dispatcher) { // dispose/relaunch if dispatcher changesdispatcher.addCallback(backCallback)onDispose {backCallback.remove() // avoid leaks!}}
}

如上，我们通过Effect对外部的回调进行注册和反注册：

DisposableEffect在onCommit的时候调用
仅当参数dispatcher发生变化时，block内容才会执行，避免无效的多次执行
DisposableEffect需要一个onDispose的block作为结尾，例子中在onDispose的时候注销回调，避免泄露

DisposableEffect默认在每次onCommit时都会执行，我们还可以通过添加参数，让其仅在onActive时执行：DisposableEffect(true)或DisposableEffect(Unit)

SideEffect

SideEffect相当于DisposableEffect的简化版，当不需要onDispose、不需要参数控制（即每次onCommit都执行）时使用，等价于

DisposableEffect() {// TODO：handle some side effectsonDispose{/*do nothing*/}
}

SideEffect可以用来更新外部的状态，如下当drawerState发生变化时，通知到外部TouchHandler，由于TouchHandler是进程唯一单例，所以不需要考虑泄露的问题。

@Composable
fun MyScreen(drawerTouchHandler: TouchHandler) {val drawerState = rememberDrawerState(DrawerValue.Closed)SideEffect {drawerTouchHandler.enabled = drawerState.isOpen}// ...
}

remember

remember{...}是Compose中的重要API，用来包装一些计算成本较高的逻辑或一些state数据，避免随函数反复执行。

remember存储那些跨越函数栈存在的state数据，所以也可以当做处理Effect的工具使用。state本身就是一种副作用

@Composable
fun ExpandingCard(title: String, body: String) {// expanded is "internal state" for ExpandingCardvar expanded by remember { mutableStateOf(false) }Card {Column() {Text(text = title)// content of the card depends on the current value of expandedif (expanded) {// TODO: show body & collapse icon} else {// TODO: show expand icon}}}
}

mutableStateOf创建的初始状态false后，放入remember中就可以避免跟随函数多次执行而反复初始化（下图中蓝色部分不会随绿色反复执行）

remember经常配合state的创建一起使用，remember { mutableStateOf(false) } 相当于React的useState

rememberCoroutineScope

Compose中有很多remember开头的API，底层都是基于remember实现，用来创建并获取某个跨越函数栈存在的数据。rememberCoroutineScope便是这样一个API：

@Composable
fun SearchScreen() {val scope = rememberCoroutineScope()var currentJob by remember { mutableStateOf<Job?>(null) }var items by remember { mutableStateOf<List<Item>>(emptyList()) }Column {Row {TextInput(afterTextChange = { text ->currentJob?.cancel()currentJob = scope.async {delay(threshold)items = viewModel.search(query = text)}})}Row { ItemsVerticalList(items) }}
}

rememberCoroutineScope创建CoroutineScope，CoroutineScope不会随函数的执行反复创建
Scope与Composable生命周期一致，随着onDispose而cancel，避免泄露
currentJob保存Coroutine的句柄，并在适当的实际cancel
Dispatcher通常为AndroidUiDispatcher.Main

上面是一段常见逻辑：我们希望在输入变化时，立即开启新的查询，终止前面的结果回调。以往是使用Handler#postDelayed配合View实现，如今在Compose中我们使用remember配合Coroutine可以实现同样的功能。

LaunchedEffect

LaunchedEffect对rememberCoroutineScope+launch组合的简化，顾名思义，可以用来处理包含suspend调用的Effect

@Composable
fun SpeakerList(eventId: String) {var speakers by remember { mutableStateOf<List<Speaker>>(emptyList()) }LaunchedEffect(eventId) { // cancelled / relaunched when eventId variesspeakers = viewModel.loadSpeakers(eventId) // suspended effect}ItemsVerticalList(speakers)
}

LaunchedEffect在onCommit时执行
LaunchedEffect提供CoroutineScope便于处理带有suspend调用的Effect
仅当eventId变化时才会进行cancel/relaunch，有助于跨越recomposition使用

produceState

produceState基于LaunchedEffect实现，进一步简化了state的初始化和更新逻辑

@Composable
fun SearchScreen(eventId: String) {val uiState = produceState(initialValue = emptyList<Speaker>(), eventId) {viewModel.loadSpeakers(eventId) // suspended effect}ItemsVerticalList(uiState.value)
}

当eventId变更时，会重新loadSpeakers并更新state

3. 借助Effect处理三方库适配

状态的订阅/注销是Compose的核心概念，也是最常见的Effect。Compose除了提供State，也可以配合常见的三方库（LiveDat、RxJava、Coroutine Flow等）实现状态订阅逻辑：

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

Compose提供了对三方库的适配，让订阅最终转化为State来处理

LiveData

class MyComposableVM : ViewModel() {private val _user = MutableLiveData(User("John"))val user: LiveData<User> = _user//...
}@Composable
fun MyComposable() {val viewModel = viewModel<MyComposableVM>()val user by viewModel.user.observeAsState()Text("Username: ${user?.name}")
}

observeAsState自动订阅LiveData并转换成State，实现如下：

@Composable
fun <R, T : R> LiveData<T>.observeAsState(initial: R): State<R> {val lifecycleOwner = AmbientLifecycleOwner.currentval state = remember { mutableStateOf(initial) }DisposableEffect(this, lifecycleOwner) {val observer = Observer<T> { state.value = it }observe(lifecycleOwner, observer)onDispose { removeObserver(observer) }}return state
}

在DisposableEffect中实现LiveData的订阅和注销

RxJava

class MyComposableVM : ViewModel() {val user: Observable<ViewState> = Observable.just(ViewState.Loading)//...
}@Composable
fun MyComposable() {val viewModel = viewModel<MyComposableVM>()val uiState by viewModel.user.subscribeAsState(ViewState.Loading)when (uiState) {ViewState.Loading -> TODO("Show loading")ViewState.Error -> TODO("Show Snackbar")is ViewState.Content -> TODO("Show content")}
}

susbcribeAsState()的实现就不赘述了，参考observeAsState

Coroutine Flow

class MyComposableVM : ViewModel() {val user: Flow<ViewState> = flowOf(ViewState.Loading)//...
}@Composable
fun MyComposable() {val viewModel = viewModel<MyComposableVM>()val uiState by viewModel.user.collectAsState(ViewState.Loading)when (uiState) {ViewState.Loading -> TODO("Show loading")ViewState.Error -> TODO("Show Snackbar")is ViewState.Content -> TODO("Show content")}
}

collectAsState的实现如下：

@Composable
fun <T : R, R> Flow<T>.collectAsState(initial: R,context: CoroutineContext = EmptyCoroutineContext
): State<R> = produceState(initial, this, context) {if (context == EmptyCoroutineContext) {collect { value = it }} else withContext(context) {collect { value = it }}
}

collect的执行依靠CoroutineScope，所以基于produceState实现（便于在CoroutineScope中直接设置state）而没有使用LaunchedEffect。

invalidate

基于订阅者的逻辑多使用在MVVM架构中，但也有一些使用MVP的架构项目使用接口回调的方式更新UI。Compose可以使用currentRecomposeScope.invalidate()，在不借助state的情况下刷新UI。

常规Android开发中，invalidate用来触发layout和draw的再执行以刷新UI（常用来处理动画），Compose中的作用也是类似的，可以触发当前Composable的recomposition

interface Presenter {fun loadUser(after: @Composable () -> Unit): User
}@Composable
fun MyComposable(presenter: Presenter) {val user = presenter.loadUser { invalidate() } // not a State!Text(text = "The loaded user: ${user.name}")
}

我们可以在Presenter的回调中调用invalidate。作为state的替换方案，你知道有这个东西就好了，但是不推荐过多的使用，声明式UI框架更适合使用订阅者逻辑刷新UI。

FIN

Compose提供了一系列处理Effect的APIs，能够进行suspend调用、state管理、以方便地进行三方库适配，关联Composable的生命周期还能有效避免内存泄漏。作为开发者，我们力求以纯函数的方式实现Composable，同时也要面对各种可能出现的副作用并合理处置。

Jetpack Compose SideEffect：副作用及相关API相关推荐

Jetpack Compose 深入探索系列一：Composable 函数
Composable 函数的含义如果我们只专注于简单的语法,任何标准的Kotlin函数都可以成为一个可组合函数,只需将其注解为@Composable: 通过这样做,我们实际上是在告诉编译器,该函数打 ...
深入理解 Jetpack Compose 内核：SlotTable 系统
引言 Compose 的绘制有三个阶段,组合 > 布局 > 绘制.后两个过程与传统视图的渲染过程相近,唯独组合是 Compose 所特有的.Compose 通过组合生成渲染树,这是 Com ...
Jetpack Compose 架构比较：MVP MVVM MVI
本次 I/O 大会上曝出了 Compose 1.0 即将发布的消息,虽然 API 层面已趋于稳定,但真正要在项目中落地还少不了一套合理的应用架构.传统 Android 开发中的 MVP.MVVM 等架 ...
使用Jetpack Compose竟能做出如此漂亮的倒计时APP
Compose开发者挑战赛二周目迎合Jetpack Compose beta版的发布,Google官方发起了Compose开发者挑战赛活动,目前已经入二周目 android-dev-challeng ...
Jetpack Compose 深入探索系列四： Compose UI
通过 Compose runtime 集成 UI Compose UI 是一个 Kotlin 多平台框架.它提供了通过可组合函数发出 UI 的构建块和机制.除此之外,这个库还包括 Android 和 ...
《Jetpack Compose 从入门到实战》带你踏上 Compose 开发之旅~
写书的契机 Jetpack Compose 首次亮相于 2019 年的 Google I/O 大会,彼时的我正在为抖音客户端研发一款基于原生视图渲染的声明式 UI 框架,由于声明式开发理念在当时还过于 ...
Jetpack Compose 深入探索系列二：Compose 编译器
Jetpack Compose由一系列的库组成,但我们需要重点关注三个特定的库:Compose compiler.Compose runtime 和 Compose UI. 其中 Compose编译器 ...
Jetpack compose 康奈尔笔记
快速上手条目内容是什么原生Android界面构建工具包优势 -更少的代码 -直观(状态变化,自动更新界面) -可以预览 -Material design 什么是可组合函数 -用函数描述外观和 ...
Jetpack Compose 中的架构思想
Jetpack Compose 中的架构总览如果应用打算使用 Jetpack Compose 来开发,那么就可以跟以前的MVC.MVP.MVVM等乱七八糟的架构全部说拜拜,这些名词也将在Androi ...
Jetpack Compose入门篇-简约而不简单
好文推荐: 作者:QiShare Compose简介 Jetpack Compose:利用声明式编程构建Android原生界面(UI)的工具包优势更少的代码.代码量锐减强大的工具/组件支持直 ...

Jetpack Compose SideEffect：副作用及相关API