--- highlight: androidstudio theme: juejin --- > 这是我参与更文挑战的第7天，活动详情查看： [更文挑战](https://juejin.cn/post/6967194882926444557) **目前有一个正在进行的 [Jetpack Compose中文手册](https://github.com/compose-museum/WithCompose) 项目，旨在帮助开发者更好的理解和掌握Compose框架，目前仍还在开荒中，欢迎大家关注与加入！本文已经收录到该手册中，欢迎查阅** # compose.runtime > Jetpack Compose 不只是一个 UI 框架，更是一个通用的 NodeTree 管理引擎。本文介绍 `compose.runtime` 如何通过 `NodeTree` 为`compose.ui` 提供支持。大家知道 Jetpack Compose 不仅限于在 Android 中使用，Compose For Desktop、 Compose For Web 等项目也已相继发布，未来也许还会出现 Compose For iOS 。Compose 能够在不同平台上实现相似的声明式UI开发体验，这得益于其分层的设计。 Compose 在代码上自下而上依次分为6层： | Modules| Description | | :--- | :--- | | compose.compiler | 基于 Kotlin compiler plugin 对 @Composable 进行编译期代码生成和优化| | compose.runtime | 提供 NodeTree管理、State管理等，声明式UI的基础运行时| | compose.ui | Android设备相关的基础UI能力，例如 layout、measure、drawing、input 等| | compose.foundation | 通用的UI组件，包括 Column、Row 等容器、以及各种 Shape 等 | | compose.animation | 负责动画的实现、提升用户体验 | | compose.material | 提供符合 Material Design 标准的UI组件 | ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0cc64a9871164d2e94f1f654c8490945~tplv-k3u1fbpfcp-zoom-1.image) 其中 `compose.runtime` 和 `compose.compiler` 最为核心，它们是支撑声明式UI的基础。 Jake Wharton 在他的博客提到 : > What this means is that Compose is, at its core, a general-purpose tool for managing a tree of nodes of any type. Well a “tree of nodes” describes just about anything, and as a result Compose can target just about anything.
- https://jakewharton.com/a-jetpack-compose-by-any-other-name/ `compose.runtime` 提供了 NodeTree 管理等基础能力，此部分与平台无关，在此基础上各平台只需实现UI的渲染就是一套完整的声明式UI框架。而 `compose.compiler` 通过编译期的优化，帮助开发者书写更简单的代码调用 runtime 的能力。
# 从 Composable 到 NodeTree > “Compose 也好，React、Flutter 也好，其代码本质上都是对一颗树形结构的描述。” 所谓“数据启动UI"，就是当state变化时，重建这颗树型结构并基于这棵NodeTree刷新UI。当然，处于性能考虑，当 NodeTree 需要重建时，各框架会使用 VirtualDom 、GapBuffer（或称SlotTable）等不同技术对其进行“差量”更新，避免“全量”重建。`compose.runtime` 的重要工作之一就是负责 NodeTree 的创建与更新。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8701530be4dd429c894d05d735bfc29b~tplv-k3u1fbpfcp-zoom-1.image) 如上，React 基于 VDOM "差量" 更新右侧的DOM树。 ## Compose 中的 NodeTree 对于 OOP 语言，我们通常使用如下方式描述一颗树： ```kotlin fun TodoApp(items: List): Node { return Stack(Orientation.Vertical).apply { for (item in items) { children.add(Stack(Orientation.Horizontal).apply { children.add(Text(if (item.completed) "x" else " ")) children.add(Text(item.title)) }) } } } ``` `TodoApp` 返回 `Node` 对象，可以被父 Node 继续 add，循环往复构成一棵完整的树。但是 OOP 的写法模板代码多，不够简洁，且缺乏安全性。返回值 Node 成为句柄被随意引用甚至修改，这破坏了声明式UI中 “不可变性” 的原则，如果 UI 可以随意修改，diff 算法的准确性将无法保证。因此，为了保证 UI 的不可变性，我们设法抹去返回值 Node： ```kotlin fun Composer.TodoApp(items: List) { Stack(Orientation.Vertical) { for (item in items) { Stack(Orientation.Horizontal) { Text(if (item.completed) "x" else " ") Text(item.title) } } } } fun Composer.Stack(orientation:Int, content: Composer.() -> Unit) { emit(StackNode(orientation)) { content() } } fun Composer.Text() { ... } ``` 通过 `Composer` 提供的上下文, 将创建的 Node `emit` 到树上的合适位置。 ```kotlin interface Composer { // add node as a child to the current Node, execute // `content` with `node` as the current Node fun emit(node: Node, content: () -> Unit = {}) } ``` `Composer.Stack()` 作为一个无返回值的函数，使得 NodeTree 的构建从 OOP 方式变为了 FP(函数式编程) 方式。 ## Compose Compiler 的加持 `compose.compiler` 的意义是让 FP 的写法进一步简单，添加一个 `@Composable` 注解， TodoApp 不必定义成 `Composer` 的扩展函数，但是在编译期会修改 TodoApp 的签名，添加 Composer 参数。 ```kotlin @Composable fun TodoApp { Stack { for (item in items) { Stack(Orientation.Horizontal){ Text(if (item.completed) "x" else " ") Text(item.title)) }) } } } ``` 在 Compiler 的加持下，我们可以使用 @Composable 高效地写代码。抛开语言上的差异不讲，Compose 比 Flutter 写起来要舒服得多。但无论写法上有多少差别，其归根结度还是会转换为对 NodeTree 的操作
# NodeTree操作：Applier、ComposeNode、Composition Compose 的 NodeTree 管理涉及 `Applier`、`Composition` 和 `Compose Nodes` 的工作： **Composition** 作为起点，发起首次的 composition，通过 Composalbe 的执行，填充 Slot Table，并基于 Table 创建 NodeTree。渲染引擎基于 **Compose Nodes** 渲染 UI，每当 recomposition 发生时，都会通过 **Applier** 对 NodeTree 进行更新。因此 > “Composable 的执行过程就是创建 Node 并构建 NodeTree 的过程。 ” ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e512fa77b2744b68291b7b1847097c3~tplv-k3u1fbpfcp-zoom-1.image) ## Applier：变更 NodeTree 的节点前文提到，出于性能考虑，NodeTree 会使用 “差量” 方式自我更新，而这正是基于 `Applier` 实现的。 Applier 使用 Visitor 模式遍历树上的 Node ，每种 NodeTree 的运算都需要配套一个 `Applier`。 `Applier` 提供回调，基于回调我们可以对 NodeTree 进行自定义修改： ```kotlin interface Applier { val current: N // 当前处理的节点 fun onBeginChanges() {} fun onEndChanges() {} fun down(node: N) fun up() fun insertTopDown(index: Int, instance: N) // 添加节点（自顶向下） fun insertBottomUp(index: Int, instance: N)// 添加节点（自底向上） fun remove(index: Int, count: Int) //删除节点 fun move(from: Int, to: Int, count: Int) // 移动节点 fun clear() } ``` `insertTopDown` 与 `insertBottomUp` 都用来添加节点，针对不同的树形结构选择不同的添加顺序有助于提高性能。参考: [insertTopDown](https://developer.android.com/reference/kotlin/androidx/compose/runtime/Applier?hl=TR&skip_cache=true#insertTopDown(kotlin.Int,kotlin.Any)) | insertTopDown（自顶向下） | insertBottomUp（自底向上） | | --- | --- | | ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c2fead247bc74396ac6b78808f5338ca~tplv-k3u1fbpfcp-watermark.image) | ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7f54c9395f18419f85227e8fd393bce5~tplv-k3u1fbpfcp-watermark.image) | 我们可以实现自定义的 `NodeApplier`，如下： ```kotlin class Node { val children = mutableListOf() } class NodeApplier(node: Node) : AbstractApplier(node) { override fun onClear() {} override fun insertBottomUp(index: Int, instance: Node) {} override fun insertTopDown(index: Int, instance: Node) { current.children.add(index, instance) // `current` is set to the `Node` that we want to modify. } override fun move(from: Int, to: Int, count: Int) { current.children.move(from, to, count) } override fun remove(index: Int, count: Int) { current.children.remove(index, count) } } ``` `Applier` 需要在 composition/recomposition 过程中被调用。composition 是通过 `Composition` 中对 Root Composable 的调用发起的，进而调用全部 Composalbe 最终形成NodeTree。 ## Composition：Composalbe 执行的起点 `fun Composition(applier: Applier<*>, parent: CompositionContext)` 创建 Composition对象，参数传入 `Applier` 和 `Recomposer` ```kotlin val composition = Composition( applier = NodeApplier(node = Node()), parent = Recomposer(Dispatchers.Main) ) composition.setContent { // Composable function calls } ``` `Recomposer` 非常重要，他负责 Compose 的 recomposiiton 。当 NodeTree 首次创建之后，与 state 建立关联，监听 state 的变化发生重组。这个关联的建立是通过 Recomposer 的 “快照系统” 完成的。重组后，Recomposer 通过调用 Applier 完成 NodeTree 的变更。关于 “快照系统” 以及 Recomposer 的原理可以参考： - [https://compose.net.cn/principle/snapshot/](https://compose.net.cn/principle/snapshot/) - [https://compose.net.cn/principle/recompose_working_principle/](https://compose.net.cn/principle/recompose_working_principle/) `Composition#setContent` 为后续 Compodable 的调用提供了容器： ```kotlin interface Composition { val hasInvalidations: Boolean val isDisposed: Boolean fun dispose() fun setContent(content: @Composable () -> Unit) } ``` ## ComposeNode：创建 UiNode 并进行更新理论上每个 Composable 的执行都对应一个 Node 的创建，但是由于 NodeTree 无需全量重建，所以也不是每次都需要创建新 Node。大多的 Composalbe 都会调用 `ComposeNode()` 接受一个 factory，仅在必要的时候创建 Node。以 `Layout` 的实现为例， ```kotlin @Composable inline fun Layout( content: @Composable () -> Unit, modifier: Modifier = Modifier, measurePolicy: MeasurePolicy ) { val density = LocalDensity.current val layoutDirection = LocalLayoutDirection.current ComposeNode>( factory = ComposeUiNode.Constructor, update = { set(measurePolicy, ComposeUiNode.SetMeasurePolicy) set(density, ComposeUiNode.SetDensity) set(layoutDirection, ComposeUiNode.SetLayoutDirection) }, skippableUpdate = materializerOf(modifier), content = content ) } ``` - **factory**：创建 Node 的工厂 - **update**：接受 receiver 为 `Updater`的 lambda，用来更新当前 Node 的属性 - **content**：调用子 Composable `ComposeNode()` 的实现非常简单： ```kotlin inline fun > ComposeNode( noinline factory: () -> T, update: @DisallowComposableCalls Updater.() -> Unit, noinline skippableUpdate: @Composable SkippableUpdater.() -> Unit, content: @Composable () -> Unit ) { if (currentComposer.applier !is E) invalidApplier() currentComposer.startNode() if (currentComposer.inserting) { currentComposer.createNode(factory) } else { currentComposer.useNode() } Updater(currentComposer).update() SkippableUpdater(currentComposer).skippableUpdate() currentComposer.startReplaceableGroup(0x7ab4aae9)//在编译期决定真正的GroupId content() currentComposer.endReplaceableGroup() currentComposer.endNode() } ``` 在 composition 过程中，通过 Composer上下文，更新 SlotTable, `content()`递归创建子 Node SlotTable 在更新过程中，通过 diff 决定是否需要对 Node 进行 add/update/remove 等操作。此处的 `startNode`，`useNode`，`endNode` 等就是对 SlotTable 的遍历过程。有关 SlotTable（GapBuffer）的介绍，可以参考文章：[https://compose.net.cn/principle/gap_buffer/](https://compose.net.cn/principle/gap_buffer/) SlotTable 的 diff 结果通过 `Applier` 的回调处理 NodeTree 结构的变化；通过调用 `Updater.update()` 来处理 Node 属性的变化
# Jake wharton 的实验项目 Mosica 基于 `compose.runtime` 可以实现任意一套声明式UI框架。 J神有一个实验性的项目 **Mosica**，就很好地展示了这一点：https://github.com/JakeWharton/mosaic ```kotlin fun main() = runMosaic { var count by mutableStateOf(0) setContent { Text("The count is: $count") } for (i in 1..20) { delay(250) count = i } } ``` 上面是 Mosica 中的一个 Counter 的例子。 ## Mosica Composition `runMosaic()` 创建 Composition、Recomposer 和 Applier ```kotlin fun runMosaic(body: suspend MosaicScope.() -> Unit) = runBlocking { //... val job = Job(coroutineContext[Job]) val composeContext = coroutineContext + clock + job val rootNode = BoxNode() //根节点Node val recomposer = Recomposer(composeContext) //Recomposer val composition = Composition(MosaicNodeApplier(rootNode), recomposer) //Composition coroutineScope { val scope = object : MosaicScope, CoroutineScope by this { override fun setContent(content: @Composable () -> Unit) { composition.setContent(content)//调用@Composable hasFrameWaiters = true } } //... val snapshotObserverHandle = Snapshot.registerGlobalWriteObserver(observer) try { scope.body()//CoroutineScope中执行setContent{} } finally { snapshotObserverHandle.dispose() } } } ``` 而后，在 Composition 的 `setContent{}` 中，调用 @Composable。 ## Mosaic Node 看一下 Mosaic 中的 @Composalbe 和其对应的 Node ```kotlin @Composable private fun Box(flexDirection: YogaFlexDirection, children: @Composable () -> Unit) { ComposeNode( factory = ::BoxNode, update = { set(flexDirection) { yoga.flexDirection = flexDirection } }, content = children, ) } ``` ```kotlin @Composable fun Text( value: String, color: Color? = null, background: Color? = null, style: TextStyle? = null, ) { ComposeNode(::TextNode) { set(value) { this.value = value } set(color) { this.foreground = color } set(background) { this.background = background } set(style) { this.style = style } } } ``` ComposeNode 通过泛型关联对应的 Node 和 Applier 类型 Box 和 Text 内部都使用 `ComposeNode()` 创建对应的 Node 对象。其中 Box 是容器类的 Composalbe，在 conent 中进一步创建子 Node。 Box 和 Text 在`Updater.update()`中更新 Node 属性。看一下 `BoxNode`: ```kotlin internal class BoxNode : MosaicNode() { val children = mutableListOf() override fun renderTo(canvas: TextCanvas) { for (child in children) { val childYoga = child.yoga val left = childYoga.layoutX.toInt() val top = childYoga.layoutY.toInt() val right = left + childYoga.layoutWidth.toInt() - 1 val bottom = top + childYoga.layoutHeight.toInt() - 1 child.renderTo(canvas[top..bottom, left..right]) } } override fun toString() = children.joinToString(prefix = "Box(", postfix = ")") } internal sealed class MosaicNode { val yoga: YogaNode = YogaNodeFactory.create() abstract fun renderTo(canvas: TextCanvas) fun render(): String { val canvas = with(yoga) { calculateLayout(UNDEFINED, UNDEFINED) TextSurface(layoutWidth.toInt(), layoutHeight.toInt()) } renderTo(canvas) return canvas.toString() } } ``` `BoxNode` 继承自 `MosaicNode`， MosaicNode 在 `render()` 中，通过 `yoga` 实现UI的绘制。通过调用 `renderTo()` 在 Canvas中递归绘制子 Node，类似 AndroidView 的绘制逻辑。理论上需要在首次 composition 或者 recomposition 时，调用 Node 的 `render()` 进行 NodeTree 的绘制，为简单起见，Mosica 只是使用了定时轮询的方式调用 `render()` ```kotlin launch(context = composeContext) { while (true) { if (hasFrameWaiters) { hasFrameWaiters = false output.display(rootNode.render()) } delay(50) } } //counter的state变化后，重新setContent，hasFrameWaiters更新后，重新render coroutineScope { val scope = object : MosaicScope, CoroutineScope by this { override fun setContent(content: @Composable () -> Unit) { composition.setContent(content) hasFrameWaiters = true } } } ``` ## MosaicNodeApplier 最后看一下 `MosaicNodeApplier`: ```kotlin internal class MosaicNodeApplier(root: BoxNode) : AbstractApplier(root) { override fun insertTopDown(index: Int, instance: MosaicNode) { // Ignored, we insert bottom-up. } override fun insertBottomUp(index: Int, instance: MosaicNode) { val boxNode = current as BoxNode boxNode.children.add(index, instance) boxNode.yoga.addChildAt(instance.yoga, index) } override fun remove(index: Int, count: Int) { val boxNode = current as BoxNode boxNode.children.remove(index, count) repeat(count) { boxNode.yoga.removeChildAt(index) } } override fun move(from: Int, to: Int, count: Int) { val boxNode = current as BoxNode boxNode.children.move(from, to, count) val yoga = boxNode.yoga val newIndex = if (to > from) to - count else to if (count == 1) { val node = yoga.removeChildAt(from) yoga.addChildAt(node, newIndex) } else { val nodes = Array(count) { yoga.removeChildAt(from) } nodes.forEachIndexed { offset, node -> yoga.addChildAt(node, newIndex + offset) } } } override fun onClear() { val boxNode = root as BoxNode // Remove in reverse to avoid internal list copies. for (i in boxNode.yoga.childCount - 1 downTo 0) { boxNode.yoga.removeChildAt(i) } } } ``` `MosaicNodeApplier` 实现了对 Node 的 add/move/remove, 最终都反映到了对 `YogaNode` 的操作上，通过 YogaNode 刷新 UI
# 基于 AndroidView 的声明式UI 参考 Mosaic 的示范，我们可以使用 `compose.runtime` 打造一个基于 Android 原生 View 的声明式 UI 框架。 ## LinearLayout & TextView Node ```kotlin @Composable fun TextView( text: String, onClick: () -> Unit = {} ) { val context = localContext.current ComposeNode( factory = { TextView(context) }, update = { set(text) { this.text = text } set(onClick) { setOnClickListener { onClick() } } }, ) } @Composable fun LinearLayout(children: @Composable () -> Unit) { val context = localContext.current ComposeNode( factory = { LinearLayout(context).apply { orientation = LinearLayout.VERTICAL layoutParams = ViewGroup.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT, ) } }, update = {}, content = children, ) } ``` ## ViewApplier ViewApplier 中只实现 `add` ```kotlin class ViewApplier(val view: FrameLayout) : AbstractApplier(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) } } ``` ## 创建 Composition 创建 Root Composable： `AndroidViewApp` ```kotlin @Composable private 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++ } ) } } } ``` 最后在 content 调用 `AndroidViewApp` ```kotlin fun runApp(context: Context): FrameLayout { val composer = Recomposer(Dispatchers.Main) GlobalSnapshotManager.ensureStarted() val mainScope = MainScope() mainScope.launch(start = CoroutineStart.UNDISPATCHED) { withContext(coroutineContext + DefaultMonotonicFrameClock) { composer.runRecomposeAndApplyChanges() } } mainScope.launch { composer.state.collect { println("composer:$it") } } val rootDocument = FrameLayout(context) Composition(ViewApplier(rootDocument), composer).apply { setContent { CompositionLocalProvider(localContext provides context) { AndroidViewApp() } } } return rootDocument } ``` 效果展示： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/512a54268872404bbacc0f62f01373aa~tplv-k3u1fbpfcp-zoom-1.image) # TL;DR ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8677e176bd1e4d8f824b7fdd4f941e81~tplv-k3u1fbpfcp-zoom-1.image) - 当 State 变化时触发 recomposition，Composable 重新执行 - Composable 在执行中，通过 SlotTable 的 diff，找出待变更的 Node - 通过 Applier 更新 TreeNode，并在 UI 层渲染这棵树。 - 基于 compose.runtime ，我们可以实现自己的声明式UI