Android Jetpack Compose之确定重组范围并优化重组

这篇具有很好参考价值的文章主要介绍了Android Jetpack Compose之确定重组范围并优化重组。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.概述

Compose的重组是智能的,Composable函数在进行重组时会尽可能的跳过不必要的重组,只对需要变化的UI进行重组。那Compose是如何认定UI需要变化呢?或者换句话说Compose是如何确定重组的范围呢。如果重组随意的发生,那么对UI的性能会是一个很不稳定的状态,时而好,时而坏。而且如果编写的UI代码有问题,那么重组将会带来状态的混乱,导致UI显示出错。所以弄清楚Compose重组的范围确定才能更好的避免重组的坑,并且可以针对具体的范围做优化,所以本文将介绍如何确定Compose重组的范围以及重组性能的优化。

2.确定Composable重组的范围

确定重组的范围有助于我们更好的理解ComposeUI的性能优化,下面我们先看一个例子:

    @Composable
    fun CounterDemo(){
        Log.d("zhongxj","范围1=>运行")
        var counter by remember { mutableStateOf(0) }
        Column {
            Log.d("zhongxj","范围2=>运行")
            Button(onClick = {
                Log.d("zhongxj","onButtonClick:点击按钮")
                counter ++
            }){
                Log.d("zhongxj","范围3=>运行")
                Text(text = "+")
            }

            Text(text = "$counter")
        }
    }

在上面的代码中,我们依然使用计数器的例子来验证重组的范围,我们在各个可能发生重组的地方都打上了Log,当点击Button时,计数器counter的状态更新会触发CounterDemo的重组,日志如下图所示:

Android Jetpack Compose之确定重组范围并优化重组,Android,Jetpack compose,移动开发,android jetpack,android,移动开发,安卓,compose

从图中我们可以看到, Log.d("zhongxj","范围3=>运行") 这行Log并没有打,没有打这行log的原因需要我们了解Compose重组的底层原理:

在Compose中,经过Compose编译器处理后的Composable函数在对State进行读取的同时,能够自动建立关联,在运行过程中,当State变化时Compose会找到关联的代码块并将其标记为Invalid.在下一个渲染帧到来之前,Compose会触发重组并且执行invalid代码块,而Invalid代码块即为下一次重组的范围。能够被标记为Invalid的代码有2个两个要求,一是被标记为Invalid的代码必须时非inline且没有返回值的Composable函数,二是无返回值的Lambda。

那么为啥参与重组的代码块必须是非inline的无返回值函数呢?因为inline函数在编译期会在调用处展开,因此无法在下次重组时找到合适的调用入口,只能共享调用方的重组范围。而有返回值的函数由于返回值会影响调用方,所以必须联通调用方一起参与重组。因此inline的有返回值的函数不能作为Invalid代码块。

而了解了Compose的底层重组原理,我们就可以清楚的知道了只有受到State变化影响的代码块,才会参与到重组。不依赖State的代码则不参与重组,这就是重组的最小化原则。

基于重组最小化原则,我们可以分析下我们计数器例子中的输出结果,其实看了日志发现 Log.d("zhongxj","范围3=>运行")这行日志没有打,也就是说这行日志所在的代码块并没有参与重组,在范围2的作用域中,我们看到了这行代码Text(text = "$counter"),很明显这行代码依赖了counter状态,需要注意的是这行代码并不是读取counter值的意思,它的意思是在范围2的作用域中读取counter的值并传入Text,所以范围2是会参与重组的,日志就输出了Log.d("zhongxj","范围2=>运行"),这时有读者可能会发现,按照重组最小化原则,那么访问counter的最小范围应该是:范围2的作用域呀,为啥范围1的日志也会被打印呢?这里需要回想下咱们之前讲的:最小化范围的定义必须是非inline的composable函数或者lambda。而Column组件是一个inline声明的高阶函数:

Android Jetpack Compose之确定重组范围并优化重组,Android,Jetpack compose,移动开发,android jetpack,android,移动开发,安卓,compose

所以content内部也会被展开在调用处,所以范围1和范围2就共享了重组的范围,所以输出了Log.d("zhongxj","范围1=>运行")日志,假设将Column换成非inline的Composable,那么Log.d("zhongxj","范围1=>运行")将不会输出,比如换成一个Card组件,读者可以自行试一下。

需要注意的是,Button虽然没有依赖counter,但是范围2的重组会触发Button的重新调用,所以 Log.d("zhongxj","onButtonClick:点击按钮") 也会输出,但是其content内部并没有依赖counter,所以范围3的日志: Log.d(“zhongxj”,“范围3=>运行”) 不会输出。

补充说明: Composable 函数观察State变化并触发重组是在被称为”快照“的系统中完成的,所谓”快照“就是将被访问的状态像拍照一样保存下来,当状态变化时,通知相关的Composable应用的最新状态。”快照“有利于对状态管理进行线程隔离,在多线程场景下的重组有重要的应用

3.优化重组的性能

经过前面的分析,我没了解到了Compose的重组是智能的,遵循范围最小化原则,重组中执行到的Composable只有在其参数发生变化时,才会参与本次重组。

Compose 在执行后会生成一棵视图树,每个Composable对应树上的一个节点,因此Composable 智能重组的本质其实是从树上寻找对应位置的节点并与之进行比较,如果节点未发生变化则不用更新

另外需要注意的是,视图树的实际构建过程比较复杂,Composable执行过程中,先将生成的Composition状态存入SlotTable,然后框架基于SlotTable生成LayoutNode树,并完成最终的界面渲染。所以谨慎的说,Composable的比较逻辑是发生在SlotTable中的。

3.1 Composable 位置索引

在重组的过程中,Composition上的节点可以完成增、删、移动、更新等多种变化,Compose编译器会根据代码调用位置,为Composable生成索引key,并且存入Composition,Composable在执行过程中通过与Key的对比可以知道当前应该执行何种操作。例如下面的示例代码:

    Box {
            if (state) {
                val str = remember(Unit) { "call_site_1" }
                Text(text = str) // Text_of_call_site_1
            } else {
                val str = remember(Unit) { "call_site_2" }
                Text(text = str) // Text_of_call_site_2
            }
        }

如上面代码所示:Composable中遇到if/else等条件语句时,会插入startXXXGroup类似的代码,并且通过添加索引Key识别节点的增减,上面的代码中会根据state的不同显示不同的Text,编译器会为if和else分支分别建立索引,当state由true变为false时,Box发生重组,通过key的判断可知,else内的代码需要插入逻辑执行,而if内生成的节点需要被移除。

假设没有编译期的位置索引,而仅仅靠运行时比较,首先执行到 remember(Unit)时,由于缓存原因仍然会返回当前树上存放的str,即call_site_1,接着执行到Text_of_call_site_1,发现与当前树上的节点类型一样,参数str也没有变化,因此会判断为无须重组,那么文本就无法得到更新

所以,综上所述:Composable 在编译期建立索引是保证其重组能够智能且正确执行的基础。这个索引是根据Composable在静态代码中的被调用位置决定的。但是在某些场景中,Composable无法通过静态代码位置进行索引,这时我们需要手动添加索引,便于在重组中进行比较

3.2 通过Key添加索引信息

假设我们现在需要给一个电影列表,然后展示电影的大致信息,代码如下所示:

@Composable
    fun MoviesScreen(movies:List<Movie>){
        Column { 
            for (movie in movies){
                // showMoveCardInfo 无法在编译期间进行索引,只能根据运行时的index进行索引
                showMoveCardInfo(movie)
            }
        }
    }

如上面的代码所示,基于Movie的名字展示电影的信息,此时无法基于代码中的位置进行索引,只能在运行时基于index进行索引。这样的话索引会根据item的数量发生变化,导致无法准确进行比较。在这种情况下,当重组发生时,新插入的数据会和以前的第一个数据比较,以前的第一个数据会和第二个数据比较,然后以前的第二个数据会被当作新数据插入。结果是所有的item都会发生重组,但是我们期望的行为是,只有新插入的数据需要重组,其他没有变化的数据不应该发生重组,所以我们可以使用key的方法为Composable在运行时手动添加一个索引,如下所示:

@Composable
    fun MoviesScreen(movies:List<Movie>){
        Column { 
            for (movie in movies){
               key(movie.id){ // 使用movie的唯一ID作为Composable的索引
                showMoveCardInfo(movie)
                }
            }
        }
    }

使用movie的ID传入Composable做为唯一索引,当插入新数据时,之前对象的索引没有被打乱,仍然可以发挥比较时的锚定作用,所以其他没有发生变化的item就可以不用参与重组

3.3 使用注解@Stable优化重组

Composable是基于参数的比较结果来决定是否重组,也就是说,只有当参与比较的参数对象是稳定的且equals返回true,才认为是相等的。Kotlin中常见的基本类型(Boolean、Int、Long、Float、Char) String,Lambda表达式都可以认为式稳定的,因为都是不可变类型。所以他们的参数比较的结果都式可信的。但是假如参数是可变类型,那么比较的结果将是不可信的。

data class Mutabledata(var data:String)

    @Composable
    fun MutableDemo(){
        var mutable = remember { Mutabledata("walt") }

        var state by remember { mutableStateOf(false) }
        if(state){
            mutable.data = "zxj"
        }

        Button(onClick = {state = true}){
           showText(mutable)
        }
    }
    @Composable
    fun ShowText(mutable:MutableData){
     Text(text = mutable.data) // 会随着state的变化而变化
    }

在上面的代码中,MutableData是一个不稳定的对象,因为它有一个Var类型的变量data,当点击按钮改变状态时,mutable会修改data,对于ShowText来说,参数mutable在状态改变前后都指向同一个对象,因此仅仅靠equals判断会认为参数没有发生变化,但实际上测试发现ShowText函数发生了重组,所以Mutabledata参数类型是不稳定的,equals结果不可信。

所以对于一些默认不被认为是稳定类型的,比如interface或者list等集合类,如果能够确保其在运行时的稳定,可以为其添加@State注解,编译器会将这些类型视为稳定类型,从而发挥只能重组的作用,提升性能。代码如下所示:

@Stable
interface UiState<T>{
    val value:T?
    val exception:Throwable?
    val hasError:Boolean
        get() = exception != null
}

注意: 被添加为@Statble的普通父类、密封类、接口等其派生子类也会被认为时稳定的

Android 学习笔录

Android 性能优化篇:https://qr18.cn/FVlo89
Android Framework底层原理篇:https://qr18.cn/AQpN4J
Android 车载篇:https://qr18.cn/F05ZCM
Android 逆向安全学习笔记:https://qr18.cn/CQ5TcL
Android 音视频篇:https://qr18.cn/Ei3VPD
Jetpack全家桶篇(内含Compose):https://qr18.cn/A0gajp
OkHttp 源码解析笔记:https://qr18.cn/Cw0pBD
Kotlin 篇:https://qr18.cn/CdjtAF
Gradle 篇:https://qr18.cn/DzrmMB
Flutter 篇:https://qr18.cn/DIvKma
Android 八大知识体:https://qr18.cn/CyxarU
Android 核心笔记:https://qr21.cn/CaZQLo
Android 往年面试题锦:https://qr18.cn/CKV8OZ
2023年最新Android 面试题集:https://qr18.cn/CgxrRy
Android 车载开发岗位面试习题:https://qr18.cn/FTlyCJ
音视频面试题锦:https://qr18.cn/AcV6Ap文章来源地址https://www.toymoban.com/news/detail-729033.html

到了这里,关于Android Jetpack Compose之确定重组范围并优化重组的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android Jetpack Compose — Slider滑动条

            在Android Jetpack Compose中,Slider(滑动条)是一个常用的用户界面控件,它允许通过滑动条来选择一个范围或数值。Slider控件非常适用于调整音量、亮度、进度等需要连续调整的场景。 一、Slider的属性         Slider是Android Jetpack Compose中的一个控件,用于实现滑动条

    2024年02月11日
    浏览(52)
  • 探索Android Jetpack Compose的Surface组件

    随着声明性 UI 框架 Jetpack Compose 的出现,Android 开发变得更加简洁和直观。在这篇博客中,我们将深入探讨其中的一项基本构建块 —— Surface 组件,了解它如何影响 UI 的显示和设计。 一、Jetpack Compose和Surface组件 二、Surface组件的基本使用 三、影响Surface的属性 一、Jetpack Co

    2024年02月11日
    浏览(58)
  • Android Jetpack Compose之RadioGroup的使用

    Android Jetpack Compose是一个现代化的UI工具包,帮助开发者以声明式的方式构建出美观且功能强大的Android应用。在本文中,我们将详细介绍其中的一个重要组件—— RadioGroup 。 一. RadioGroup简介 Jetpack Compose中并没有像传统View系统中那样直接提供 RadioGroup ,但我们可以很方便地通

    2024年02月06日
    浏览(56)
  • 对于Android开发,我们为何要学Jetpack Compose?

    Jetpack Compose 是用于构建原生 Android 界面的新工具包。它可简化并加快 Android 上的界面开发,使用更少的代码、强大的工具和直观的 Kotlin API,快速让应用生动而精彩。Compose 使用全新的组件——可组合项 (Composable) 来布局界面,使用修饰符 (Modifier) 来配置可组合项。 为何Jetp

    2024年02月10日
    浏览(54)
  • Android Jetpack Compose中使用字段验证的方法

    数据验证是创建健壮且用户友好的Android应用程序的关键部分。随着现代UI工具包Jetpack Compose的引入,处理字段验证变得更加高效和直观。在这篇文章中,我们将探讨如何在Android应用中使用Jetpack Compose进行字段验证。 字段验证是确保用户在各种输入字段中输入的数据符合特定

    2024年02月11日
    浏览(54)
  • Android Jetpack Compose实现轮播图效果

    在最近思索如何使用Compose方式改进我的开源TMDB电影列表应用程序的主屏幕时,一个激动人心的概念浮现在我的脑海中——为什么不整合一个吸引人的轮播图来展示即将上映的电影呢?在本文中,我将分享我的开发和实现自定义轮播图的经历,提供涉及不同步骤的见解。 首先

    2024年02月08日
    浏览(106)
  • 现代化 Android 开发:Jetpack Compose 最佳实践

    作者:古哥E下 如果一直关注 Compose 的发展的话,可以明显感受到 2022 年和 2023 年的 Compose 使用讨论的声音已经完全不一样了, 2022 年还多是观望,2023 年就有很多团队开始采纳 Compose 来进行开发了。不过也有很多同学接触了下 Compose,然后就放弃了。要么使用起来贼特么不顺手

    2024年02月17日
    浏览(71)
  • Android 在xml 布局中如何嵌套 Jetpack Compose

    最近在项目开发的过程中需要用到 Jetpack Compose,之前没有接触过Compose,所以项目一直没有用到Compose。通过查看官网发现Compose上手比较快,但是准备比较复杂的布局要转换成Compose 不是一件容易的事情。那有没有可能只是对成熟的项目中的xml 布局中的某一部分进行改造,让其

    2024年04月10日
    浏览(51)
  • Android笔记(六):JetPack Compose常见的UI组件

    Text显示的文本来源可以引用res-values-strings.xml中的资源,如第一个显示文本所示。 点击按钮前: 点击按钮后: 点击第一个圆角按钮不放时,显示为按钮:true Button有两方面需要注意: (1) Buttton有一个参数interactionSource,用来监听组件状态的事件源,通过它获取组件的状态来

    2024年02月04日
    浏览(55)
  • Android Jetpack Compose 中的分页与缓存展示

    在几乎任何类型的移动项目中,移动开发人员在某个时候都会处理分页数据。如果数据列表太大,无法一次从服务器检索完毕,这就是必需的。因此,我们的后端同事为我们提供了一个端点,返回分页数据列表,并期望我们知道如何在客户端处理它。 在本文中,我们将重点介

    2024年02月13日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包