这都是来到 2022 Kotlin 中一段文字幕搭建者年会 中面临的其中一个分享图片，过后有朋友反馈建议期盼将 PPT 相关方式收集成一段文字简单方便阅续，故此就得到本篇文。大伙要要认知此前年会更加多难忘相关方式，也都可以去 JetBrains 官方正品视频图片号如何查看年会的值播回放。

前言

Compose 不止有得用于 Android 软件研发，借着其分块的组织软件架构的及其 Kotlin 的跨游戏网络平台网站优缺点，也就是一个具有前景的 Kotlin 跨游戏网络平台网站层次结构。本诗就让们从 Compose Runtime 的视域去往，了解下 Compose 完成跨游戏网络平台网站研发的常规工作原理。

Compose Architecture Layers

Compose 成为某个前端框架，在架构设计上从下到上划分出小高层： Compose Compiler：Kotlin 编译器插件，负责对 Composable 函数的静态检查以及代码生成等。Compose Runtime：负责 Composable 函数的状态管理，以及执行后的渲染树生成和更新Compose UI: 基于渲染树进行 UI 的布局、绘制等 UI 渲染工作Compose Foundation: 提供用于布局的基础 Composable 组件，例如 Column，Row 等。Compose Material：提供上层的面向 Material 设计风格的 Composable 组件。
各层的职责明确，其中 Compose Compiler 和 Runtime 是支撑整个声明式 UI 运转的基石。

Compose Compiler

企业先选了解 Compose Compiler 的角色：

左侧的源码有的是个无比简略的 Composable 数学函数，基本概念了个圈红携带形态的 Button，点击率按钮图片，Button 中表明的 count 数增强。 源码经 Compose Compiler 编译后转换成左上方这类，转成了许多码。先是数学涵数亲笔签名上多了些运作值，格外是多了 %composer 运作值。随后数学涵数体中加上了许多对 %composer 的调节，比如 startRestartGroup/endRestartGroup，startReplaceGroup/endReplaceGroup 等。等转成码是用来做好 Compose Runtime 这一楼的工作任务。收起来他们深入分析一下吧 Runtime 明确在做甚么

Group & SlotTable

Composable 方程即便是找不到载入值，有时候完成流程中要转化成产品于 UI 宣传的货物，自己叫 Composition。主要参数 %composer 就算 Composition 的维系者，中用组建和更新软件 Composition。Composition 中主要包括两棵树，一株壮态树和一株宣传树。 就两棵树：但要是要了解 React，就可以将这两棵树的有关举例成 React 中的 VIrtual DOM Tree 与 Real DOM Tree。Compose 中的这棵 “Virtual DOM” 当做计录 UI 现示需要要的方式企业信息， 这些我们大家称它作方式树。 情形树顶上的子域單元是 Group，编译器转化成的 startXXXGroup 客观实在上都是在搭建 Group 單元， startXXXGroup 与 endXXXGroup 当中生成的数据库情形都隶属当今 Group；生成的 Group 就拥有子 Group，以至于跟随 Composable 的强制执行，来源于 Group 的树型设备构造就被在校园营销推广活动的环节之中所构建而来临。 相关 Group：Group 有的是其他用途單元式，造问 RestartGroup 是个可从组的最窄單元式，ReplaceableGroup 是也就能够真实伤害态复制到的最窄單元式等，以 Group 为政府部门企业的壮态，也就能够更轻松的的更新的壮态树。代码是什么怎么用中有这些地点复制到有这些样的 startXXXGroup 可以由 Compose Compiler 智慧的替他们制成，他们在写代码是什么怎么用时从不造成这地方的逻辑思维。 阶段树合理是采用的被通称 Slot Table 的线形数据库机构确保的，需要把他解读为的数组，数据库着阶段树深层次遍历的没想到，数组的每个时间数据库着相对应 UI 连接点上的阶段。

Comopsable 首次执行时，产生的 Group 以及所瞎的状态会以此填充到 Slot Table 中，填充时会附带一个编译时给予代码位置生成的不重复的 key，所以 Slot Table 中的记录也被称作基于代码位置的存储（Positional Memoization）。当重组发生时， Composable 会再次遍历 SlotTable，并在 startXXXGroup 中根据 key 访问当前代码所需的状态，比如 count 就可以通过 remember 在重组中获取最近的值。

Applier & Node Tree

Slot Table 中的的情况无法随便用作突出，UI 的突出依赖性 Composition 中的另一类棵树 - 突出树。Slot Table 能够 Applier 装改为突出树。突出树是真真正意义的树形空间结构体 Node Tree。

Applier 不是个电源数据接口，从电源数据接口表述很容易查出，它适用于对那棵 Node 类行接点树参与增删改等定期维护业务。以一两个 UI 的嵌入来说，我国在 Compoable 中的一小段 if 语句就应该改变一两个 UI 场面的嵌入。if 代碼块在编译期会转化成一两个 ReplaceGroup，当合拼中八字命中 if 环境完成到 startReplaceGroup 时，发觉 Slot Table 中少 Group 相对 key 的的企业信息，往往应该辨认出不是个嵌入方法，第二嵌入新的 Group 与所辖的 Node 的企业信息，并按照 Applier 转化成成 Node Tree 中新嵌入的接点。 SlotTable 中进到这一领域新无素后，后面无素会根据 Gap Buffer 逻辑使用右移，而是不简单误删。这样子就可以确认后面无素在 Node Tree 中的各自点位的恢复，进行 Node Tree 的增减不断更新，进行局布清空，改善能力。

Compose Phases

.我构建前的说，建筑体看下吧 Compose 从源码到上屏的全的过程： Composable 源码经 Compiler 办理后放了使用于的更新 Composition 的代码怎么用。一区域作业由 Compose Compiler 达到。 当 Compose 架构上传到到软件系统侧上传的帧网络信号后，从上层逐渐开始实施 Composable 变量，实施步骤中按序发布 Composition 中的睡眠状态树和宣传树，在这个步骤即其实的“结合”。电视剧剧情分工作上由 Compose Runtime 结束。 Compose 在 Android 机构的烧杯是 AndroidComposeView，当传输到装置发的 disptachDraw 时，便已经驱动器 Composition 的3D效果图渲染树并且实现 Measure，Lyaout，Drawing 实现 UI 的3D效果图渲染。整区域本职工作由 Compose UI 责任实现。

Comopse 渲染一帧的三个阶段 : Composition -> Layout -> Drawing。
传统视图开发中，渲染树（View Tree）的维护需要我们在代码逻辑中完成；Compose 渲染树的维护则交给了框架，所以多了 Composition 这一阶段。这也是 Compose 相对于自定义 View 代码更简单的根本原因。

把这全部整个整个过程本文间3分为二了解，Compose Compiler 与 Compose Runtime 责任驱动软件安装每棵时间树的内容更新，这一组成部分与工作品台无光，时间树也能够 是容易多种类型的时间树或是不是颗实时草图大师渲染无光的树。不一样工作品台的实时草图大师渲染策略不一样，于是 Compose UI 与工作品台涉及。 让我们一定在 Compoe UI 这四层，根据不一样工作品台推动自个儿的 Node Tree 和使用的 Applier，就能够 在 Compose Runtime 的驱动软件安装下推动 UI 的宣称式开发设计。

Compose for Android View

通过这有一个报告的格式，我们的做有一个实验报告：采用 Compose Runtime 驱动包 Android 安卓原生系统 View 的实时渲染。 .我关键在于定位这个依据 View 形式接点的 Applier ：ViewApplier

class ViewApplier(val view: FrameLayout) : AbstractApplier<View>(view) {
    override fun onClear() {
        (view as? ViewGroup)?.removeAllViews()
    }

    override fun insertBottomUp(index: Int, instance: View) {
        (current as? ViewGroup)?.addView(instance, index)
    }

    override fun insertTopDown(index: Int, instance: View) {
    }

    override fun move(from: Int, to: Int, count: Int) {
        // NOT Supported
        TODO()
    }

    override fun remove(index: Int, count: Int) {
        (view as? ViewGroup)?.removeViews(index, count)
    }
}

如果，我们的创立3个 Android View 对照的 Composable，TextView 和 LinearLayout：

@Composable
fun TextView(
    text: String,
    onClick: () -> Unit = {}
) {
    val context = localContext.current
    ComposeNode<TextView, ViewApplier>(
        factory = {
            TextView(context)
        },
        update = {
            set(text) {
                this.text = text
            }
            set(onClick) {
                setOnClickListener { onClick() }
            }
        },
    )
}

@Composable
fun LinearLayout(children: @Composable () -> Unit) {
    val context = localContext.current
    ComposeNode<LinearLayout, ViewApplier>(
        factory = {
            LinearLayout(context).apply {
                orientation = LinearLayout.VERTICAL
                layoutParams = ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.MATCH_PARENT,
                )
            }
        },
        update = {},
        content = children,
    )
}

ComposeNode 是 Compose Runtime 提供数据的 API，平常像 Slot Table “添加一家 Node 信心。Slot Tabl 可以按照 Applier 撰写由于 View 的结点树时，会可以按照 Node 的 factory 撰写各自的 View 结点。 到了给出实验室，让我们就就能够采用 Compose 建设 Android View 了，另外就能够在 Compose 的 SnapshotState 驱动下载 View 的刷新：

@Composable
fun AndroidViewApp() {

    var count by remember { mutableStateOf(1) }

    LinearLayout {
        TextView(
            text = "This is the Android TextView!!",
        )
        repeat(count) {
            TextView(
                text = "Android View!!TextView:$it $count",
                onClick = {
                    count++
                }
            )
        }

    }
}

继续执行效用以下的：

类似，各位可以系统设计 Compose Runtime 为任何网站建设系统设计 Compose 的宣称式 UI 前端框架。

Compose for Desktop & Web

JetBrains 在 Compose 多游戏平台选用这方面来进行了好多试试看，并弄出了好多重大成就。JetBrains 立于goolge Jetpack Compose 的 fork 依次披露了 Compose for Desktop 及 Compose for Web。

Compose Desktop 与 Android 相同采用 LayoutNode 的实时草图大师草图大师渲染树，采用 Skia 模块成功跨app平台实时草图大师草图大师渲染。那么鸟卵在实时草图大师草图大师渲染特效还有建设体念上面都确保角度相符。Compose Desktop 赖以生存 Kotlin/JVM 编译成字节码产品，并利用 Jpackage 和 Jlink 装进成各个win7桌面系统性的（ Linux/Mac/Windows）的配置包，可在脱落 JVM 的室内环境下直接的工作。 Compose Web 采用了特征提取 W3C 的标准的 DomNode 算作宣染树连接点，在 Compose Runtime 驱动包下自动生成 DOM Tree 。Compose Web 在 Kotlin/JS 编译成 JavaScript 结果在预览器中自动运行和宣染。Compose Web 中混凝土预制了更靠近 HTML 设计的 Composable API，故而 UI 码上与 Android/Desktop 不了马上复接。 用 compose-jb 游戏官方的事件，心得一些 Desktop & Web 的有差异 //github.com/JetBrains/compose-jb/tree/master/examples/todoapp

上方在使用 Compose 在各种品台实行的网站页面实际结果，Desktop 和 Android 的结果图渲染实际结果已经高度，Web 与前两种在现实社会实际结果上多种，它们的源代码分为正确提示：

Compose Desktop 与 Jetpack Compose 在编号上不能其别，而 Compose Web 实用 Div，Ul 这类与 HTML 标签纸从名的 Composable，还有实用 style { …} 这类面向于 CSS 的 DSL 实用 Modifier，开拓体验式更彻底符合最前端的陋习。只不过 UI 要素的编号在不一样的品台有之间的关系，所以在逻辑关系要素，能够保证 彻底多路复用，各品台的 Comopse UI 都实用 component.models.subscribeAsState() 窃听心态转化。

Compose for Multiplatform

JetBrains 将 Android，Desktop，Web 这几个平台网站的 Compose 优化组合成统一的 Group Id 的 Kotlin Multiplatform 库，便创造了 Comopse Multiplatform。

Compose Mutiplatform 是的 KM 库，让的 KMP （Kotlin Multiplatform Project） 中可电脑共享的代碼从 Data 层攀升到 UI 层并且 UI 相关内容的 Logic 层。

食用 IntelliJ IDEA 是可以創建一两个 Compose Multiplatform 建设项目模板，在的结构上与一两个普通的的 KMP 何异。 android/desktop/web 文件夹资料夹是所有公司的过程中文件夹资料，立于 gradle 编译成对象公司的货物。 common 信息夹是 KMP 的关键的。commonMain 中是是完全共享资源的 Kt 编号，使用 expect/actual 关键的字保证电商平台差异性化搭建。

自己先在 gradle 中信任 Comopse Multiplatform 库，后就是可以在 commonMain 中联合开发信息共享系统设计 Compose 的 UI 编号了。Comopse Multiplatform 的不同配件将 Jetpack Compose 相当于配件的 Group Id 中的 androidx 前缀更换为 org.jertbrains 前缀：

androidx.compose.runtime -> org.jetbrains.compose.runtime
androidx.compose.material -> org.jetbrains.compose.material
androidx.compose.foundation -> org.jetbrains.compose.foundation

最后:

最后，我们来思考一下 Compose for Multiplatform 与 Compose Multiplatform 这两个词的区别？在我看来，Compose Multiplatform 会让家将焦点放在 Multiplatform 上面，自然会拿来与 Flutter 等同类框架作对比。但是通过本文的介绍，大家已经知道了 Compose 并非一个专门为跨平台打造的框架，现阶段它并不追求渲染效果和开发体验完全一致，它的出现更像是 Kotlin 带来的增值服务。

而 Compose for Multiplatfom 的焦聚则更须得放置 Compose 上，它觉得 Compose 能够 功能于更加公司，衬托整体实力强大的 Compiler 和 Runtime 层，你们能够 为更加公司营造声明函式眼镜框架。缩小 Kotlin 的应运场合和 Kotlin 建设者的力边缘。期望规划未来再提起 Compose 跨公司式，大众能够 多从 Compose for Multiplatform 的角度来去认清他的社会价值和社会价值。