一文看懂ArkUI的两种开发范式，前端开发新思路

目录

一、ArkUI 是什么

二、两种开发范式详解

2.1 声明式开发范式

2.2 类 Web 开发范式

三、不同应用模型与开发范式的对应关系

3.1 Stage 模型

3.2 FA 模型

四、开发范式选择建议

五、总结与展望

---

一、ArkUI 是什么

ArkUI，即方舟 UI 框架，为应用的 UI 开发提供了一整套完整的基础设施。它有着简洁的 UI 语法，让开发者能更轻松地描述界面结构；具备丰富的 UI 功能，涵盖组件、布局、动画以及交互事件等各个方面，无论是构建简单的界面，还是实现复杂的交互效果，都能轻松应对；还提供了实时界面预览工具，方便开发者随时查看界面效果，及时调整，大大提高了开发效率。

在 ArkUI 的世界里，有两个重要的概念：UI 和组件。UI，也就是用户界面，开发者可以将应用的用户界面设计成多个功能页面，每个页面单独进行文件管理，并通过页面路由 API 实现页面间的跳转、回退等调度管理操作，从而实现应用内的功能解耦 ，为用户带来清晰、流畅的使用体验。而组件则是 UI 构建与显示的最小单位，像我们常见的列表、网格、按钮、单选框、进度条、文本等都属于组件。开发者就像是一位神奇的设计师，通过将多种组件巧妙地组合在一起，就能构建出满足各种应用诉求的完整界面 ，为用户呈现出丰富多彩的视觉效果和便捷的交互方式。

针对不同的应用场景及技术背景，方舟 UI 框架提供了两种开发范式，分别是基于 ArkTS 的声明式开发范式（简称 “声明式开发范式”）和兼容 JS 的类 Web 开发范式（简称 “类 Web 开发范式”）。这两种开发范式各有特点，适用于不同的开发需求，接下来就让我们深入了解一下它们。

二、两种开发范式详解

2.1 声明式开发范式

声明式开发范式采用基于 TypeScript 声明式 UI 语法扩展而来的 ArkTS 语言 ，从组件、动画和状态管理三个维度提供 UI 绘制能力。在组件方面，开发者可以像搭积木一样，轻松地将各种组件组合在一起，构建出独特的界面。例如，想要创建一个登录界面，只需要简单地组合文本输入框组件、密码输入框组件以及登录按钮组件，就能快速实现界面的初步搭建，而无需繁琐地编写大量底层代码来控制组件的显示和交互逻辑。

在动画效果的实现上，声明式开发范式同样表现出色。通过简单的配置和属性设置，就能为组件添加各种炫酷的动画效果，如淡入淡出、旋转、缩放等。比如，为一个图片组件添加淡入动画，只需要设置几个简单的动画属性，就能让图片在加载时以优雅的淡入方式呈现给用户，大大提升了用户体验。

状态管理也是声明式开发范式的一大亮点。在开发过程中，界面的状态变化是不可避免的，比如用户点击按钮后，界面的显示内容需要相应地改变。在声明式开发范式中，开发者可以通过简洁的方式管理这些状态变化。以一个计数器应用为例，当用户点击 “增加” 按钮时，只需要更新计数器的状态值，