作者：yuzhiqiang，UI 编程框架首席技术专家
在 Harmony 3.0.0 开发者预览版中，蕴含了新一代的申明式 UI 框架 ArkUI 3.0、多语言跨平台编译器 ArkCompiler 3.0、跨端开发工具 DevEco Studio3.0，以及基于 TS/JS 语言的 API 7，全面晋升开发者体验。
本期，咱们要为大家重点介绍 HarmonyOS 新一代申明式 UI 框架 ArkUI 3.0。
一、UI 编程框架
在介绍 ArkUI 3.0 之前，咱们先来简要理解一下什么是 UI 编程框架。
UI 编程框架，是为利用开发者提供的开发 UI 的基础设施，次要包含 UI 控件（按钮 / 列表等），视图布局（摆放 / 排列相应的 UI 控件），动画机制（动画设计以及成果出现），交互事件处理（点击 / 滑动等），以及相应的编程语言和编程模型等。从零碎运行的维度来看，UI 编程框架也包含一个运行时，负责利用在零碎中执行时所需的资源加载、UI 渲染和事件响应等。
总体而言，UI 编程框架提供了开发以及运行 UI 界面所须要的框架能力，次要架构如下图所示：
1.jpg
图 1 UI 编程框架
开发模型：对开发者提供开发范式、UI 控件 / 布局 / 动效 / 交互、编程语言等。它体现的是开发效率与难易水平。
运行框架：UI 界面渲染及交互的根底能力框架，包含相应的布局引擎、控件机制、动效引擎、事件机制、渲染管线等，并联合语言虚拟机和图形引擎，将开发者的程序运行在具体零碎平台上。它体现的是利用运行的性能体验。
平台适配：承载框架的具体操作系统或平台适配层。
UI 编程框架的要害需要，次要有以下两类：
开发效率：包含代码量、学习曲线、工具、社区、三方库齐备度等。
性能体验：包含启动速度、帧率、响应时延、酷炫成果、资源占用等。
另外，随着智能设施的急剧增长，UI 编程框架还须要思考如何更好地适配不同设施的差异性，包含设施状态差别（比方屏幕形态、尺寸、分辨率、交互模式等），以及设施能力差异（比方内存、CPU、GPU 等）。
二、ArkUI 框架的演进
为了更好地满足开发效率和性能体验等相干的需要，ArkUI 3.0 综合思考了 UI 渲染以及语言和运行时，围绕着极简开发、高性能、跨设施跨平台进一步演进。下图形容了 ArkUI 整体架构的演进：
2.jpg
图 2 ArkUI 框架演进
图的左侧是 2020 年公布的 JS UI 框架的架构示意图。它次要反对类 Web 的前端开发范式，通过 DSL（domain-specific language，畛域特定语言）转换层，跨语言对接到申明式 UI 后端引擎，并联合 JS 引擎实现整体 UI 渲染。图的右侧是新的 ArkUI 3.0 框架，次要有以下几个要害的变动：
（1）引入了新一代的申明式 UI 开发范式，实现极简的 UI 形容语法。
（2）设计了对立的前后端扁平化渲染机制，进一步晋升 UI 渲染的性能并升高内存耗费。
（3）深度联合 ArkCompiler 3.0 的方舟编译器和方舟运行时，晋升语言的执行性能和跨语言通信能力。
（4）在工具方面，针对新一代的申明式 UI 开发范式构建了新的编译工具链和预览引擎，提供了所见即所得的实时预览机制。
另外，在 ArkUI 3.0 框架中，类 Web 范式会持续保留，即类 Web 范式和新一代的申明式 UI 范式都能够反对，能够各自独立应用，但不能混用。
三、ArkUI 3.0 的要害个性
接下来咱们开展具体介绍一下 ArkUI 3.0 的要害个性。
- 新一代的申明式 UI 开发范式
具体而言，ArkUI 3.0 中的新一代申明式 UI 开发范式，次要特色如下：
（1）基于 TypeScript 扩大的申明式 UI 形容语法，提供了类自然语言的 UI 形容和组合。
（2）开箱即用的多态组件。多态是指 UI 形容是对立的，UI 出现在不同类型设施上会有所不同。比方 Button 组件在手机和手表会有不同的款式和交互方式。
（3）多维度的状态管理机制，反对灵便的数据驱动的 UI 变更。
上面咱们以一个具体的示例来阐明新一代申明式 UI 开发范式的根本组成。如图 3 所示的代码示例，UI 界面会显示一个“Hello World”的文本和一个“Click me”按钮。当用户点击“Click me”按钮时，字符串变量 myText 的值会从“World”变为“ACE”，文本最终显示为“Hello ACE”。
3.jpg
图 3 申明式 UI 开发范式的基本概念
以上示例中所蕴含的申明式 UI 开发范式的根本组成阐明如下：
装璜器：用来装璜类、构造体、办法以及变量，赋予其非凡的含意，如上述示例中 @Entry、@Component、@State 都是装璜器。@Component 示意这是个自定义组件；@Entry 则示意这是个入口组件；@State 示意组件中的状态变量，这个状态变动会引起 UI 变更。
自定义组件：可复用的 UI 单元，可组合其它组件，如上述被 @Component 装璜的 struct Hello。
UI 形容：申明式的形式来形容 UI 的构造，如上述 build()办法外部的代码块。
内置组件：框架中默认内置的根底和布局组件，可间接被开发者调用，比方示例中的 Column、Text、Divider、Button。
事件办法：用于增加组件对事件的响应逻辑，对立通过事件办法进行设置，如追随在 Button 前面的 onClick()。
属性办法：用于组件属性的配置，对立通过属性办法进行设置，如 fontSize()、width()、height()、color()等，可通过链式调用的形式设置多项属性。
上述示例中，用 @State 装璜过的变量 myText，蕴含了一个根底的状态管理机制，即 myText 的值的变动，会引起相应的 UI 变更（Text 组件）。ArkUI 3.0 还提供多维度的状态管理机制。和 UI 相关联的数据，不仅仅在组件内应用，还能够在不同组件层级间传递，比方父子组件之间，爷孙组件之间，也能够是全局范畴内的传递，还能够是跨设施传递。另外，从数据的传递模式来看，能够分为只读的单向传递和可变更的双向传递。开发者能够灵便的利用这些能力来实现数据和 UI 的联动。
ArkUI 采纳嵌入式畛域特定语言（embedded Domain Specific Language，eDSL）的模式，联合宿主语言能力实现 UI 开发。通过 eDSL，联合语法糖或者语言原生的元编程能力，设计了对立的 UI 开发范式，并可能联合不同语言来实现利用的逻辑解决局部。
- 要害渲染性能
上面通过一个简略的示例代码，为大家讲述从代码到 UI 显示的整体渲染流程。如图 4 所示，此示例会在 UI 界面显示一个“Click me”按钮，按钮上面同步显示按钮的点击次数。当用户点击按钮时，上面的点击次数会相应减少。
4.jpg
图 4 整体渲染流程
整个渲染过程分为两个阶段：
（1）初始显示流程（步骤①~⑤）
① 源代码通过相应的工具链，编译为带有类型标记的指标文件，同时也蕴含了如何创立 UI 构造信息的指令流。
② 通过跨语言调用并生成了 C ++ 层 Component 树（UI 形容层）。
③ 通过 Component 树进一步生成 Element 树。Element 是 Component 的实例，示意一个具体的组件节点，它造成的 Element 树负责维持界面在整个运行时的树形构造，不便计算更新时的部分更新算法等。
④ 对于每个可显示的 Element 都会为其创立对应的 RenderNode。RenderNode 负责一个节点的显示信息，它造成的 Render 树保护着整个界面渲染须要用到的信息，包含地位、大小、绘制命令等。后续的布局、绘制都是在 Render 树上进行的。
⑤ 实现真正的渲染并显示绘制后果。
（2）按钮被点击后的显示流程（步骤⑥~⑪）
⑥ 点击事件传递到组件，组件的 onClick 事件办法被触发执行。
⑦ 因为 onClick 事件办法中 @State 注解过的变量扭转了，相应 getter/setter 函数会被触发。
⑧ 状态治理模块定位出关联的 UI 组件。
⑨ 状态治理模块更新相应的 Element 树的信息。
⑩ 更新相应的 UI 组件的渲染信息。
⑪ 界面显示，与⑤相似。
整个渲染过程中所需的要害能力，除了极简的开发范式自身，次要蕴含以下三个局部：
编译优化以及跨语言调用。联合指标文件中的类型信息标记，ArkCompiler 会实现相应的代码优化。另外，ArkCompiler 也提供了高效的 JS/TS -> C++ 跨语言调用机制。
扁平化渲染机制以及小对象组合机制。组件信息的构造在前后端有基本一致的示意，进一步缩小了转换开销，实现了扁平化的渲染。同时，UI 组件外部都是通过轻量化对象来按需组合，内存耗费也进一步升高。
状态管理机制。通过监听变量的存取操作，实现数据变动的自动化感知并计算出相应的最小化 UI 组件更新范畴，实现高效的 UI 变更。
除此之外，长列表渲染是一种典型的利用场景，外面可能会波及到大量的数据，如果处理不当，会引起极大影响性能以及资源占用。ArkUI 3.0 针对这类罕用的场景，提供了一种 LazyForEach 懒加载机制，会主动依据具体情况计算出适合的渲染数据，实现数据的按需加载，从而晋升 UI 刷新效率。LazyForEach 能够联合罕用的列表类组件（比方 List、Grid 等）灵便配合应用。
- 高级 UI 组件库
高级的 UI 组件库能够进一步助力高效的利用开发。HarmonyOS 的欧洲研发团队基于 ArkUI 3.0，构建了一些高阶组件示例，比方：罕用的图表类组件、瀑布流布局组件等。开发者能够通过几行代码就能够实现简单酷炫的 UI 成果，比方自适应的图片增删、行列变动，以及相应的酷炫动效成果。
示例如下：
https://v.qq.com/x/page/o3309…
图 5 图表组件
https://v.qq.com/x/page/t3309…
图 6 瀑布流布局组件
- 多设施开发
除了 UI 开发套件，ArkUI 3.0 围绕着多设施开发，还提供了多维度的计划，进一步简化开发：
（1）根底能力层：包含根底的分层参数配置（比方色调、字号、圆角、间距等），栅格零碎，原子化布局能力（比方拉伸、折行、暗藏等）。
（2）零部件组件层：包含多态控件，对立交互能力，以及在此基础上的组件组合。
（3）面向典型场景：提供分类的页面组合模板以及示例代码。
对于多设施开发，前面咱们会有更具体的文章介绍，请大家继续关注。
- 实时预览机制
整个开发流程中还有一个很重要的方面——预览能力，即能够在 PC 上通过 IDE（集成开发环境）就能够实时看到利用的渲染成果，而无需通过具体设施来部署运行。预览的要害需要次要包含：
（1）一致性渲染：和指标设施统一的 UI 出现成果。
（2）实时预览 & 双向预览：改变相应的代码，实时呈现出相应 UI 成果。另外，代码可能和 UI 双向联动，代码改变的同时 UI 也实时变更，UI 改变的同时代码也相应地变更。
（3）多维度预览：页面级预览、组件级预览、多设施预览。
以上这些能力都须要 UI 编程框架具备相应的基础设施能力达成。ArkUI 3.0 的预览器的整体架构如下图所示：
图 7 ArkUI 3.0 的预览器架构
ArkUI 3.0 基于底层的画布通过自绘制实现了不同平台上统一化的渲染体验，并通过渲染侧的跨平台对接层实现了整体渲染成果。另外，ArkUI 3.0 通过实时代码变化检测和增量编译机制，再配合后面所提到的高效渲染性能，实现了实时编写预览。
通过 ArkUI 3.0 的基础设施，联合 IDE 可视化工具（即预览器前端），就实现了下面的实时预览、双向预览等能力，进一步晋升了开发者的开发效率。
四、结束语
总体而言，UI 编程框架在利用开发中起了至关重要的作用。目前，领有全新开发范式的新一代的 UI 框架——ArkUI 3.0 走出了松软的第一步，并已开始撑持更多的要害利用。接下来，除了基础设施的继续欠缺，咱们会重点反对生态扩大，次要包含高级 UI 能力的晋升，比方三方地图，游戏的交融，以及 Web 能力加强等。同时，咱们也会围绕跨设施、性能体验继续地翻新。欢送宽广的开发者退出进来，一起摸索，一起改良，共建万物互联的利用生态！将来，有迹可循！