Jetpack Compose Side Effect：如何处理副作用

2022-05-27 459

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 副作用与纯函数程序开发中的副作用是伴随函数式编程产生的重要概念。用一句话概括副作用：一个函数的执行过程中，除了返回函数值之外，对调用方还会带来其他附加影响，例如修改全局变量或修改参数等。

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从组件树移除时

07432c8e4f5c4492baff11f3f1fb4802~tplv-k3u1fbpfcp-zoom-1.image

大多数围绕着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.onBackPressedDispatcher

  val backCallback = remember {
      object : OnBackPressedCallback(enabled) {
          override fun handleOnBackPressed() {
              onBackPressed()
          }
      }
  }

  DisposableEffect(dispatcher) { // dispose/relaunch if dispatcher changes
    dispatcher.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 effects
    onDispose{/*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 ExpandingCard
    var expanded by remember { mutableStateOf(false) }

    Card {
        Column() {
            Text(text = title)

            // content of the card depends on the current value of expanded
            if (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 varies
    speakers = 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.current
    val 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。

4. 结语

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

Jetpack Compose Side Effect：如何处理副作用

1. 副作用与纯函数

Composable是纯函数

合理的副作用

2. 处理Effect的API

Composable的生命周期

DisposableEffect

SideEffect

remember

rememberCoroutineScope

LaunchedEffect

produceState

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

LiveData

RxJava

Coroutine Flow

invalidate

4. 结语

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Jetpack Compose Side Effect：如何处理副作用

1. 副作用与纯函数

Composable是纯函数

合理的副作用

2. 处理Effect的API

Composable的生命周期

DisposableEffect

SideEffect

remember

rememberCoroutineScope

LaunchedEffect

produceState

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

LiveData

RxJava

Coroutine Flow

invalidate

4. 结语

热门文章

最新文章

相关电子书