Compose 中的附带效应-六虎

顺便效应是指发生在可组合函数效果域之外的运用状况的改动。因为可组合项的生命周期和属性（例如不可猜测的重组、以不同顺序履行可组合项的重组或能够舍弃的重组），可组合项在抱负情况下应该是无顺便效应的。但凡回影响外界的操作都属于副效果，比方弹toast，保存本地文件，拜访长途或本地数据等。在Compose中常用的以及介绍的一共有8种，本篇将具体介绍其运用。

`LaunchedEffect`：在某个可组合项的效果域内运转挂起函数

常用的构造函数如下

fun LaunchedEffect(
    key1: Any?,
    block: suspend CoroutineScope.() -> Unit
) {
    val applyContext = currentComposer.applyCoroutineContext
    remember(key1) { LaunchedEffectImpl(applyContext, block) }
}

用于处理异步使命，在Composable进入组件树时或许key发生改动时启动协程履行block中的内容，能够在其间启动子协程或许调用挂起函数。假如key发生改动，当时协程会主动结束并敞开新的协程，Composable进入onDispose（脱离组件树）时，协程会主动撤销。运用时的demo如下

@Composable
fun ScaffoldSample(
    state: MutableState<Boolean>,
    scaffoldState: ScaffoldState = rememberScaffoldState()
) {
    //这种写法第一次也会弹出，每次更新state值时（改动key值）
    //都会从头调用LaunchedEffect中的block函数
    /*   LaunchedEffect(state.value) {
           scaffoldState.snackbarHostState.showSnackbar(
               message = "Error msg",
               actionLabel = "Retry message"
           )
       }*/
    //这种写法是组件添加或从组件树上移除
    if(state.value){
        LaunchedEffect(Unit) {
            scaffoldState.snackbarHostState.showSnackbar(
                message = "Error msg",
                actionLabel = "Retry message"
            )
        }
    }
    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                title = { Text(text = "脚手架示例") })
        },
        content = {
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                Button(onClick = {
                    state.value = !state.value
                }) {
                    Text(text = "Error occurs")
                }
            }
        }
    )
}
@Composable
fun LaunchedEffectSample() {
    val state = remember { mutableStateOf(false) }
    ScaffoldSample(state)
}

`rememberCoroutineScope`：获取组合感知效果域，以便在可组合项外启动协程

在非Composable环境中运用协程，比方在Button的onClick中运用协程显示SnackBar，并希望在onDispose（脱离组件树）时主动撤销，此时能够运用rememberCoroutineScope。它能够在当时Composable进入onDispose时主动撤销，简略的示例如下

@Composable
fun RememberCoroutineScopeSample() {
    val scaffoldState = rememberScaffoldState()
    //创立协程效果域，在多个地方运用（floatingActionButton，IconButton中的onClick）
    val scope = rememberCoroutineScope()
    Scaffold(
        scaffoldState = scaffoldState,
        //标题栏区域
        topBar = {
            TopAppBar(
                title = {
                    Text(
                        text = "脚手架示例"
                    )
                },
                navigationIcon = {
                    IconButton(onClick = {
                        scope.launch {
                            scaffoldState.drawerState.open()
                        }
                    }) {
                        Icon(imageVector = Icons.Filled.Menu, contentDescription = null)
                    }
                })
        },
        //屏幕内容区域
        content = {
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                Text(text = "屏幕内容区域")
            }
        },
        //左边抽屉
        drawerContent = {
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                Text(text = "抽屉中的内容")
            }
        },
        //悬浮按钮
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text(text = "悬浮按钮") },
                onClick = {
                    scope.launch { scaffoldState.snackbarHostState.showSnackbar("我是msg") }
                })
        },
        floatingActionButtonPosition = FabPosition.End,
        snackbarHost = {
            SnackbarHost(hostState = it) { data ->
                Snackbar(
                    snackbarData = data,
                    backgroundColor = MaterialTheme.colors.surface,
                    contentColor = MaterialTheme.colors.onSurface,
                    shape = CutCornerShape(10.dp)
                )
            }
        }
    )
}

`rememberUpdatedState`：在效应中引证某个值，该效应在值改动时不该重启

假如key值有更新，那么LaunchedEffect在重组时就会被从头启动，可是有时分需求在LaunchedEffect中运用最新的参数值，可是又不想从头启动LaunchedEffect，此时就需求运用rememberUpdateState。它的效果便是给某个参数创立一个引证，并确保其值被运用时是最新值，并且参数改动时不重启effect。比方对生命周期的监听

@Composable
fun LifeAwareScreen(
    lifecycleOwner: LifecycleOwner = LocalLifecycleOwner.current,
    onStart: () -> Unit,
    onStop: () -> Unit
) {
    val currentOnStart by rememberUpdatedState(onStart)
    val currentOnStop by rememberUpdatedState(onStop)
    DisposableEffect(lifecycleOwner) {
        val observer = LifecycleEventObserver { _, event ->
            //回调onStart或许onStop
            when (event) {
                Lifecycle.Event.ON_START -> {
                    currentOnStart()
                }
                Lifecycle.Event.ON_STOP -> {
                    currentOnStop()
                }
                else -> {}
            }
        }
        lifecycleOwner.lifecycle.addObserver(observer)
        onDispose {
            lifecycleOwner.lifecycle.removeObserver(observer)
        }
    }
}

在上面的代码中，当LifecycleOwner改动时，需求停止对当时LifecycleOwner的监听，并从头注册Observer，因此有必要将其添加为调查参数。而currentOnStart和currentOnStop只要确保在回调它们的时分能够获取最新值即可，所以应该经过rememberUpdateState包装后在副效果中运用，不该该因为他们的改变停止副效果。

`DisposableEffect`：需求清理的效应

它能够感知Composable的onActive（进入组件树）和onDispose（脱离组件树），允许经过副效果完结一些预处理和收尾处理，比方注册监听和注销体系回来键。

@Composable
fun BackHandler(backDispatcher: OnBackPressedDispatcher, onBack: () -> Unit) {
    val backCallback=object :OnBackPressedCallback(true){
        override fun handleOnBackPressed() {
            onBack()
        }
    }
    DisposableEffect(backDispatcher) {
        backDispatcher.addCallback(backCallback)
        onDispose {
            Log.e("tag", "onDispose")
            backCallback.remove()
        }
    }
}
@Composable
fun DisposableEffectSample(backDispatcher: OnBackPressedDispatcher) {
    var addBackCallback by remember {
        mutableStateOf(false)
    }
    Row {
        Switch(checked = addBackCallback, onCheckedChange = { addBackCallback = !addBackCallback })
        Text(text = if (addBackCallback) "Add Back Callback" else "Not Add Back Callback")
    }
    if (addBackCallback) {
        BackHandler(backDispatcher = backDispatcher) {
            Log.e("tag", "onBack")
        }
    }
}

DisposableEffect的key不能为空

假如key为Unit或许true这样的常量，则block只在onActive时履行一次
假如key为其他变量，则block在onActive以及参数改动时的onUpdate中履行，比方这里的backDispatcher改动时，block会再次被履行，也便是注册新的backCallback。当有新的副效果到来时，前一次的副效果会履行onDispose，此外当Composable进入onDispose时也会履行。

`SideEffect`：将 Compose 状况发布为非 Compose 代码

SideEffect是简化版的DisposableEffect，sideEffect并未接收任何key，所以每次重组都会履行其block。因此它不能用来处理耗时或许异步的副效果逻辑。示例如下

@Composable
private fun SideEffectDemo() {
    val requestCount = remember {
        mutableStateOf(0)
    }
    SideEffect {
        requestCount.value++
    }
}

`produceState`：将非 Compose 状况转换为 Compose 状况

它能够将非Compose（如Flow、LiveData或RxJava）状况转化为Compose状况，它接收一个λ表达式作为函数体，能将这些入参经过一系列操作后生成一个State类型的变量回来，

@Composable
fun ProduceStateSample() {
    val imagesList = listOf(
        "https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=3&spn=0&di=7117150749552803841&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=1640548213%2C2648418637&os=1565653820%2C2209507028&simid=1640548213%2C2648418637&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%87&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-1-1200.jpg%26refer%3Dhttp%3A%2F%2Fimg.jj20.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Dauto%3Fsec%3D1665726682%26t%3D89dfc4d6812ed1e2223be4848d5e3225&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B33da_z%26e3Bv54AzdH3FkzAzdH3Fz6u2AzdH3Fxfx3AzdH3Fd9camm_z%26e3Bip4s&gsm=4&islist=&querylist=&dyTabStr=MCwzLDEsNiw0LDUsMiw3LDgsOQ%3D%3D",
        "https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=7&spn=0&di=7117150749552803841&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=4091970494%2C846758848&os=2320783045%2C207549810&simid=4091970494%2C846758848&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%87&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210F2130512J47-0-lp.jpg%26refer%3Dhttp%3A%2F%2Fimg.jj20.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Dauto%3Fsec%3D1665726682%26t%3D20d9ada72306354f601e4a3fd5428f0e&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B33da_z%26e3Bv54AzdH3FprAzdH3Fnnc0nm_z%26e3Bip4s&gsm=4&islist=&querylist=&dyTabStr=MCwzLDEsNiw0LDUsMiw3LDgsOQ%3D%3D",
        "https://xxximage.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=10&spn=0&di=7117150749552803841&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=392156243%2C1688163758&os=3522723729%2C1775037553&simid=3419262904%2C298030006&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%87&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fwww.pptbz.com%2Fd%2Ffile%2Fp%2F201708%2Fb92908f5427aaa3dc10aea19c06e013d.jpg%26refer%3Dhttp%3A%2F%2Fwww.pptbz.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Dauto%3Fsec%3D1665726682%26t%3D2bc65a633c82cd88b77a329cfbe0d2fc&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Brrpkz_z%26e3Bv54AzdH3Frrp15ogAzdH3F8cm8l0_z%26e3Bip4s&gsm=4&islist=&querylist=&dyTabStr=MCwzLDEsNiw0LDUsMiw3LDgsOQ%3D%3D"
    )
    var index by remember { mutableStateOf(0) }
    val imageRepository = ImageRepository(LocalContext.current)
    val result = loadNetworkImg(url = imagesList[index], imageRepository = imageRepository)
    Column {
        Button(
            onClick = {
                index %= imagesList.size
                if (++index == imagesList.size) index = 0
            }) {
            Text(text = "挑选第 $index 张图片")
        }
        when (result.value) {
            is Result.Success -> {
                Image(
                    bitmap = (result.value as Result.Success).image.imageBitmap,
                    contentDescription = "image load success"
                )
            }
            is Result.Error -> {
                Image(
                    imageVector = Icons.Rounded.Warning,
                    contentDescription = "image load error",
                    modifier = Modifier.size(200.dp,200.dp)
                )
            }
            is Result.Loading -> {
                CircularProgressIndicator()
            }
        }
    }
}
@Composable
fun loadNetworkImg(url: String, imageRepository: ImageRepository): State<Result<Image>> {
    return produceState(
        initialValue = Result.Loading as Result<Image>,
        url,
        imageRepository
    ) {
        val image = imageRepository.load(url)
        value = if (image == null)
            Result.Error
        else Result.Success(image)
    }
}

`derivedStateOf`：将一个或多个状况对象转换为其他状况

derivedStateOf用来将一个或多个State转换成另一个state。derivedStateOf{...}的block中能够依靠其他State创立并回来一个DerivedState，当block中依靠的State发生改动时，会更新此DerivedState，依靠此DerivedState的一切Composable会因其改动而重组。比方完成本地数据检索，在输入框中的内容发生改动时，列表数据会主动改写。

//ViewModel的定义
class MainVM : ViewModel() {
    val state = mutableStateOf(0)
    val list = mutableListOf<String>()
    val keyword = mutableStateOf("")
    init {
        for (i in 0 until 10) {
            list.add("test:$i")
        }
    }
    fun onValueChanged(text:String){
        keyword.value=text
    }
}
//页面逻辑
@Composable
fun DerivedStateOfDemo() {
    val vm: MainVM = viewModel()
    val result by remember {
        derivedStateOf {
            vm.list.filter { it.contains(vm.keyword.value, false) }
        }
    }
    //调用方处理监听逻辑
    val onTextChanged: (String) -> Unit = { vm.onValueChanged(it) }
    //创立状况容器
    val editableUserInputState = rememberEditableUserInputState(initialText = "")
    //确保重组时运用最新的onTextChanged办法
    val currentOnDestinationChanged by rememberUpdatedState(onTextChanged)
    Box(modifier = Modifier.fillMaxSize()) {
        Column {
            CustomInput(state = editableUserInputState)
            LazyColumn {
                items(result) {
                    Text(text = it)
                }
            }
        }
    }
    //状况中的text值改动时调用回调函数
    LaunchedEffect(key1 = editableUserInputState) {
        snapshotFlow { editableUserInputState.text }.collect {
            currentOnDestinationChanged(it)
        }
    }
}
@Composable
fun CustomInput(state: EditableUserInputState = rememberEditableUserInputState(initialText = "")) {
    BasicTextField(
        value = state.text,
        onValueChange = { state.text = it },
        decorationBox = { innerTextField ->
            Row(
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier.padding(vertical = 2.dp)
            ) {
                Box(
                    modifier = Modifier
                        .padding(horizontal = 10.dp)
                        .weight(1f),
                    contentAlignment = Alignment.CenterStart
                ) {
                    if (state.text.isEmpty()) {
                        Text(text = "输入点东西吧", style = TextStyle(color = Color(0, 0, 0, 128)))
                    }
                    innerTextField()
                }
//                if (text.isNotEmpty()) {
//                    IconButton(onClick = { onValueChanged("") }) {
//                        Icon(
//                            imageVector = Icons.Filled.Close, contentDescription = "删去"
//                        )
//                    }
//                }
            }
        },
        modifier = Modifier
            .padding(horizontal = 10.dp)
            .background(Color.White, CircleShape)
            .height(30.dp)
            .fillMaxWidth(),
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Text, imeAction = ImeAction.Done
        ),
        keyboardActions = KeyboardActions(onDone = {
            Log.e("tag", "onDone")
        })
    )
}
//创立状况容器
class EditableUserInputState(initialText: String) {
    //以便 Compose 跟踪值的更改，并在发生更改时重组
    var text by mutableStateOf(initialText)
    companion object {
        val Saver: Saver<EditableUserInputState, *> =
            listSaver(save = { listOf(it.text) }, restore = {
                EditableUserInputState(initialText = it[0])
            })
    }
}
//保存状况
@Composable
fun rememberEditableUserInputState(initialText: String): EditableUserInputState =
    rememberSaveable(initialText, saver = EditableUserInputState.Saver) {
        EditableUserInputState(initialText)
    }

`snapshotFlow`：将 Compose 的 State 转换为 Flow

LauchedEffect在状况发生改动时第一时间收到告诉，假如经过改动调查参数key来告诉状况的改动，这回中断当时履行中的使命。snapshotFlow能够解决这一问题，它能够将状况转化成一个CoroutineFlow。snapshotFlow{...}内部对State拜访的同时，经过“快照”体系订阅起改动，每逢State发生改动时，flow就会发送新数据，并且只有在collect之后，block才开始履行。也便是说当一个LaunchedEffect中依靠的State会频繁变换时，不该该运用State的值作为key，而应该将State自身作为key，然后在LaunchedEffect内容运用snapshotFlow依靠状况，运用State作为key是为了当State对象自身改动时重启副效果。

@Composable
fun SnapshotFlowSample() {
    val listState = rememberLazyListState()
    LazyColumn(state = listState) {
        items(1000) { index ->
            Text(text = "Item is $index")
        }
    }
    LaunchedEffect(key1 = listState) {
        //将state转化成flow
        snapshotFlow {
            listState.firstVisibleItemIndex
        }
            .filter { it > 20 }
            .distinctUntilChanged()
            .collect {
                Log.e("tag", "firstVisibleIndex = $it")
            }
    }
}

Compose 中的附带效应

LaunchedEffect：在某个可组合项的效果域内运转挂起函数

rememberCoroutineScope：获取组合感知效果域，以便在可组合项外启动协程

rememberUpdatedState：在效应中引证某个值，该效应在值改动时不该重启

DisposableEffect：需求清理的效应

SideEffect：将 Compose 状况发布为非 Compose 代码

produceState：将非 Compose 状况转换为 Compose 状况

derivedStateOf：将一个或多个状况对象转换为其他状况

snapshotFlow：将 Compose 的 State 转换为 Flow

相关文章

组件化开花，就问你香不香

【Flutter&Flame 游戏 – 贰肆】pinball 源码分析 – 项目结构介绍.md

客户端日志&埋点&上报的柔性生产线

Android如何远程ADB连接以及相关适配

作者信息