3.2　声明式开发范式

ArkUI是一套开发极简、高性能、跨设备应用的UI开发框架，支持开发者高效地构建跨设备应用UI界面。

3.2.1　声明式开发范式与类Web开发范式

声明式开发范式是采用基于TypeScript的声明式UI语法扩展而来的ArkTS语言，从组件、动画和状态管理3个维度提供了UI绘制能力。声明式开发范式更接近自然语义的编程方式，让开发者更直观地描述UI界面，不必关心框架如何实现UI绘制和渲染，实现极简高效开发。因此，声明式开发范式适合复杂度较大、团队合作度较高的程序。

类Web开发范式采用经典的HTML、CSS、JavaScript三段式开发方式，使用HTML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发刷新。该开发方式更接近Web前端开发者的使用习惯，便于快速将已有的Web应用改造成ArkUI应用。因此，类Web开发范式适合界面较简单的中小型应用和卡片。

本书示例推荐采用声明式开发范式。

3.2.2　声明式开发范式的基础能力

声明式开发范式的开发框架不仅从组件、动效和状态管理3个维度来提供UI能力，还提供了系统能力接口，以实现系统能力的极简调用。

声明式开发范式具备以下基础能力。

·　开箱即用的组件：框架提供丰富的系统预置组件，可以通过链式调用的方式设置系统组件的渲染效果。开发者可以组合系统组件为自定义组件，通过这种方式将页面组件化为一个个独立的UI单元，以实现页面不同单元的独立创建、开发和复用，使页面具有更强的工程性。

·　丰富的动效接口：提供SVG标准的绘制图形能力，同时开放了丰富的动效接口，开发者可以通过封装的物理模型或者调用动画能力接口来实现自定义动画轨迹。

·　状态数据管理：状态数据管理作为基于ArkTS的声明式开发范式的特色，通过功能不同的装饰器为开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态，两者协作可以使开发者完整地构建整个应用的数据更新和UI渲染。

·　系统能力接口：ArkUI还封装了丰富的系统能力接口，开发者可以通过简单的接口调用实现从UI设计到系统能力调用的极简开发。

3.2.3　声明式开发范式的整体架构

声明式开发范式的整体架构如图3-3所示。

详细说明如下。

·　声明式UI前端：提供了UI开发范式的基础语言规范，并提供内置的UI组件、布局和动画，还提供了多种状态管理机制，为应用开发者提供一系列接口支持。

·　语言运行时：选用方舟语言运行时，提供了针对UI范式语法的解析能力、跨语言调用支持的能力和TS语言高性能运行环境。

·　声明式UI后端引擎：后端引擎提供了兼容不同开发范式的UI渲染管线，提供多种基础组件、布局计算、动效、交互事件，提供了状态管理和绘制能力。

·　渲染引擎：提供了高效的绘制能力，将渲染管线收集的渲染指令绘制到屏幕上的能力。

·　平台适配层：提供了对系统平台的抽象接口，具备接入不同系统的能力，如系统渲染管线、生命周期调度等。

3.2.4　声明式开发范式的基本组成

声明式开发范式的基本组成如图3-4所示。

详细说明如下。

·　装饰器：用来装饰类、结构体、方法以及变量，赋予其特殊的含义，图3-4中的@Entry、@Component、@State都是装饰器。具体而言，@Component表示这是一个自定义组件；@Entry表示这是一个入口组件；@State表示组件中的状态变量，此状态变化会引起UI变更。

·　自定义组件：可复用的UI单元，可组合其他组件，如图3-4中被@Component装饰的struct Hello。

·　UI描述：以声明式的方式来描述UI的结构，如上述build()方法内部的代码块。

·　内置组件：框架中默认内置的基础和布局组件，可直接被开发者调用，比如示例中的Column、Text、Divider、Button。

·　事件方法：用于添加组件对事件的响应逻辑，统一通过事件方法进行设置，如跟随在Button后面的onClick()。

·　属性方法：用于组件属性的配置，统一通过属性方法进行设置，如fontSize()、width()、height()、color()等，可通过链式调用的方式设置多项属性。 lM8y1BR/HQPG8iCszQWBMPUODq6+TxFr4FxIlVn863rDIPEfq2MmfEZk2dHXEF6e