Compose中的附带效应（五）derivedStateOf

---

前言

阅读本文需要一定compose基础，如果没有请移步Jetpack Compose入门详解（实时更新）

本文介绍Compose中derivedStateOf的基本概念。根据官网教程总结，如有不对请在评论区指教

---

一、derivedStateOf是什么？

**derivedStateOf的官方解释为用于将一个或多个状态对象转换为其他状态，如果某个状态是从其他状态对象计算或派生得出的，就使用 derivedStateOf。使用此函数可确保仅当计算中使用的状态之一发生变化时才会进行计算。**有点拗口，我承认第一次看的时候是蒙的

二、举例

我们通过下面这个例子就能更容易的理解，出自优化Jetpack Compose 中的常见性能问题的视频中的derivedStateOf例子，根据我自己的理解梳理一遍，案例中，我们需要展示一个列表，当列表往下滑动时展示一个button

package com.zyf.electronicwoodfish.view

/**
 * @author zengyifeng
 * @date createDate:2023-07-22
 * @brief description derivedStateOf状态的使用
 */

@Preview(showBackground = true ,showSystemUi = true)
@Composable
fun DerivedStateOfView() {
    val items = (1..100).toList()
    val lazyState = rememberLazyListState()

    LazyColumn(modifier = Modifier.padding(10.cdp), state = lazyState){
        items(items.size) {
           Text("$items[it]")
        }
    }

    val showButton = lazyState.firstVisibleItemIndex > 0

    AnimatedVisibility(visible = showButton){
        ScrollToTopButton()
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

上面的代码实现了一个0-100的列表，创建了一个showButton变量，lazyState.firstVisibleItemIndex > 0代表当列表的第一个可见索引大于0时，我们展示button，但是这其中会遇到一个问题，那就是其实我们事实上只关心lazyState.firstVisibleItemIndex > 0或者=0时不展示button的情况，但是在我们知道，在列表每一次滑动的时候lazyState都会变化，这导致showButton变量一直在变化，从而导致我们的页面每一帧都在进行重组。

有人就要说了你怎么不加remember呢？你真的是个大聪明，当然要加，但是不是只加remember，因为只加remember的话当lazyState变化时还是会重组，不会有变化，这时就有了我们今天的猪脚derivedStateOf出场了,我们将上诉部分代码进行修改

//val showButton = lazyState.firstVisibleItemIndex > 0

    val showButton by remember{
        derivedStateOf{
            lazyState.firstVisibleItemIndex > 0
        }
    }
1
2
3
4
5
6
7

这样，我们的可组合项就只会在lazyState.firstVisibleItemIndex > 0实际发生变化时进行重组，也就是在lazyState.firstVisibleItemIndex > 0或lazyState.firstVisibleItemIndex = 0的时候

---

总结

所以derivedStateOf是一个搭配remenber使用的函数，它可以将几个状态组合成为一个布尔值状态来控制可组合项的重组，从而起到一个性能优化的作用