鸿蒙ArkUI：【从代码到UI显示的整体渲染流程】

ArkUI

方舟开发框架（简称ArkUI）是鸿蒙开发的UI框架，提供如下两种开发范式，我们 只学声明式开发范式

[基于ArkTS的声明式开发范式]
[兼容JS的类Web开发范式]
开发前请熟悉鸿蒙开发指导文档：gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。

整体架构图

我们使用ArkTS写完页面描述后，交给语言运行时进行语法解析，再之后由C++编写的后端引擎将UI转换为渲染指令交给渲染引擎绘制到屏幕上

ArkUI语法初见

ArkTS对TypeScript语言进行扩展，提供值类型结构struct。
struct定义自定义组件，必须搭配Component或者CustomDialog使用
ArkUI中组件定义和状态管理都是通过装饰器来做的。TS中的装饰器主要有类装饰器、属性装饰器、方法装饰器以及参数装饰器四种
事件方法和属性方法只是方法的入参不一样，一个是基本值或者表达式值，一个是函数。
在TS中函数我们就把函数当成变量来用就行，只不过普通变量是存储一个类型的值，而函数用来存储一个输入到输出的转变过程
还记得我们上面说的描述UI嘛，在这里就在build函数中描述。框架会自动调用build，不需要我们手动调用

从代码到UI显示的整体渲染流程

ArkUI的渲染分为两大情况

从创建到显示(①~⑤)

① 通过devEco将源码编译成带类型标识的字节码文件，同时携带创建这个结构所需信息的指令流

② 通过跨语言调用生成C++层的Component树。这一步只是把ArkTS描述转变成了使用C++描述

③ 通过Component树生成Element树，Element是Component的实例，用于表示一个具体的组件节点。界面在运行时的树形结构就是通过Element树来维持的，同时自动更新的diff算法也是依赖Element树来减少复杂度的

④ 对于每个可显示的Element都会为其创建对应的RenderNode。RenderNode负责一个节点的显示信息，它形成的Render树维护着整个界面渲染需要用到的信息，包括位置、大小、绘制命令等。后续的布局、绘制都是在Render树上进行的

⑤ 实现真正的渲染并显示绘制结果。HarmonyOS与OpenHarmony鸿蒙文档籽料：mau123789是v直接拿

搜狗高速浏览器截图20240326151547.png

按钮点击到更新显示(⑥~⑪)

⑥ 点击事件传递到组件，组件的onClick事件方法被触发执行

⑦ 由于onClick事件方法中@State注解过的变量改变了，相应getter/setter函数会被触发

⑧ 状态管理模块定位出关联的UI组件

⑨ 状态管理模块更新相应的Element树的信息

⑩ 更新相应的UI组件的渲染信息

⑪ 界面显示，与⑤类似

盒子模型

上面我们说的布局原理，子视图上报给父视图自身大小的值是指 组件内容区的大小

鸿蒙开发岗位需要掌握那些核心要领？

目前还有很多小伙伴不知道要学习哪些鸿蒙技术？不知道重点掌握哪些？为了避免学习时频繁踩坑，最终浪费大量时间的。

自己学习时必须要有一份实用的鸿蒙（Harmony NEXT）资料非常有必要。这里我推荐，根据鸿蒙开发官网梳理与华为内部人员的分享总结出的开发文档。内容包含了：【ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。

废话就不多说了，接下来好好看下这份资料。

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。鸿蒙OpenHarmony知识←前往。下面是鸿蒙开发的学习路线图。