HarmonyOS ArkUI 组件化编程：UI封装思想·适合新手推敲

​

在鸿蒙开发中，组件化思想是提升开发效率、降低维护成本的关键。如果你还在为重复修改页面、代码冗余头疼，这篇文章会从思想到实战，帮你彻底掌握组件化开发的核心逻辑。

一、组件化开发思想：告别 "牵一发而动全身"​

❶ 传统开发的痛点​

以前开发鸿蒙页面时，通常一个页面对应一个.html 文件。一旦遇到全局修改（比如统一更换字体、调整图标样式、修改公共文案），需要逐个打开页面文件修改，工作量大且容易遗漏，维护成本极高：

❷ 鸿蒙组件化的解决方案​

鸿蒙倡导 "拆分 - 复用 - 组合" 的组件化思想：将页面拆分为一个个独立的小模块（即组件或者理解为小页面），通过 "导出 - 导入" 的方式拼接成完整页面。后续修改时，只需调整对应的组件文件，所有引用该组件的页面都会同步更新，彻底解决重复劳动问题。​

核心操作流程（.ets 文件场景）：​

封装组件并导出：export TabBar.ets（以 TabBar 组件为例）​
其他页面导入使用：import { TabBar } from '组件路径及文件名'

二、组件简介：鸿蒙开发的 "积木块"​

组件是鸿蒙开发的核心概念，本质是可独立运行、可复用的布局或功能模块。通过组合这些 "积木块"，可以快速搭建复杂页面，核心价值体现在：​

提高代码复用性：避免重复编写相同布局 / 逻辑​
降低维护成本：修改一处，全局生效​
提升开发效率：组件可跨页面、跨项目复用​
简单说：组件就是一块布局单独另出来封装，然后界面导入展示

三、UI 组件库 / 框架：站在巨人的肩膀上开发​

❶ 什么是 UI 组件库？​

是第三方或官方提前封装好的 "常用组件集合"，涵盖项目开发中高频出现的公共布局（如导航栏、标签栏、弹框等），相当于现成的 "高级积木"。​

❷ 核心作用​

统一开发规范：避免团队协作时页面风格不一致​
减少重复开发：无需从零封装基础组件，直接复用​
降低维护成本：组件库已经过兼容性、性能优化，无需自行调试​
❸ 鸿蒙常用组件库获取​

官方组件库市场：OHPM OpenHarmony 包管理中心​

使用方式：直接搜索需要的组件（如 TabBar、NavBar、Dialog），按照文档导入项目即可。​

ps. 项目开发经常有上拉下拉，自己写要考虑的较多小编就封装成了公共组件大家就可以直接使用啦 https://ohpm.openharmony.cn/#/cn/detail/@open%2Fpull-to-refresh

还有日期格式化的

https://ohpm.openharmony.cn/#/cn/detail/@open%2Fdate

等等 （如果你不会使用点个关注私信我就ok 🌹）

四、组件关系：理清层级与封装逻辑（实战重点）​

组件化开发的核心是理清 "谁调用谁"、"如何封装"，这直接影响代码的可读性和维护性。​

❶ 层级思想：父组件与子组件的判定规则​

核心结论（必记）：​

被其他组件调用的组件 = 子组件（公共组件一定是子组件）​
调用子组件且传递数据的组件 = 父组件（父传子的核心场景）​

ps. 面试官必问组件之间如何数据共享 也就是组件通信     就是因为90%的场景下 调用组件都会传递数据   而且是父组件传递给子组件  （新手值得推敲理解下）

❷ 封装思想

实战中，组件封装至少分为 公共组件 和 逻辑/页面组件 这二个类别，切记切记切记它两的封装语法都是一样的。

公共组件价值：增加代码【复用性】，便于后期维护

逻辑/页面组件价值：增加代码【可读性】，便于后期维护

❸ 选型思考：公共组件、逻辑组件、@Builder 怎么选？​🤔

很多开发者会纠结三者的使用场景，这里给出实战优先级建议（新手先掌握前 2 条）：​

优先原则：​
多个页面使用 → 公共组件​（增加代码复用性）
仅当前页面使用 → 逻辑组件​（增加代码可读性）
   2. @Builder 替代场景（可选，简化代码）：​

公共组件：代码量极少时（如简单弹框）​
逻辑组件：代码量少且无网络请求时
​

鸿蒙开发者班级