企业官网建设流程全解析

鸿蒙应用开发从入门到实战（六）：ArkTS声明式UI和组件化

从“命令”到“声明”：UI开发思维的转变在传统的UI开发中，我们习惯用“命令式”的思维：要创建一个按钮，先创建Button对象，再设置它的颜色、文本，最后添加到页面中。这种模式就像写一个详细的“操作说明书”，每一步都要告诉计算机“做什么”和“怎么做”。而ArkTS带来的“声明式UI”完全不同。你只需要“声明”你想要的最终效果，系统会自动处理中间的渲染过程。这就像你去餐厅点餐：你只需要说“我要一份牛排”，而不是告诉厨师“先去冰箱拿肉，再开火，烤5分钟，然后装盘”。这种思维转变，让代码更简洁、更易于维护。## 什么是ArkTS声明式UI？ArkTS是鸿蒙应用开发的主力语言，它基于TypeScript，但加入了声明式UI的语法糖。它的核心思想是：UI是状态的函数。也就是说，UI的展现完全由数据（状态）决定，当数据变化时，UI会自动更新。我们来看一个最简单的例子：typescript@Entry@Componentstruct HelloWorld { // 声明状态变量，当它变化时UI会自动刷新 @State message: string = '你好，鸿蒙！' build() { Column() { Text(this.message) .fontSize(30) .fontColor(Color.Blue) .margin({ bottom: 20 }) Button('点击改变文字') .onClick(() => { // 修改状态，UI自动更新 this.message = '你点击了按钮！' }) } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) }}在这个示例中，@State装饰器告诉系统：这个message变量是“状态”，它的变化会触发UI刷新。当按钮被点击时，我们修改message的值，Text组件会自动显示新内容，无需手动操作DOM。## 组件化：搭积木式的开发组件化是声明式UI的孪生兄弟。在ArkTS中，每个UI单元都是一个组件，它们可以独立管理自己的状态，也可以接收外部传入的数据。这种设计让代码复用变得极其简单。### 创建第一个自定义组件typescript// 定义一个卡片组件，可以复用@Componentstruct InfoCard { // 组件接收外部传入的属性 private title: string = '' private content: string = '' // 组件自己的内部状态 @State isExpanded: boolean = false build() { Column() { // 卡片标题区域 Row() { Text(this.title) .fontSize(20) .fontWeight(FontWeight.Bold) Button(this.isExpanded ? '收起' : '展开') .margin({ left: 20 }) .onClick(() => { this.isExpanded = !this.isExpanded }) } // 卡片内容区域，根据状态决定是否显示 if (this.isExpanded) { Text(this.content) .fontSize(16) .fontColor(Color.Gray) .margin({ top: 10 }) } } .padding(20) .backgroundColor(Color.White) .borderRadius(10) .shadow({ radius: 5, color: '#D0D0D0' }) .width('90%') .margin({ bottom: 10 }) }}// 主页面使用自定义组件@Entry@Componentstruct MainPage { build() { Column() { // 像使用系统组件一样使用InfoCard InfoCard({ title: '鸿蒙介绍', content: 'HarmonyOS是面向全场景的分布式操作系统...' }) InfoCard({ title: 'ArkTS特点', content: '声明式UI、跨端开发、高效渲染...' }) } .width('100%') .height('100%') .padding(20) .backgroundColor('#F5F5F5') }}在这个例子中，InfoCard是一个可复用的组件，它通过private声明接收外部传入的title和content，同时内部维护自己的isExpanded状态。主页面可以像搭积木一样，多次使用这个组件，每次传入不同的数据。## 组件的生命周期和状态管理理解组件的生命周期对于开发复杂应用至关重要。ArkTS组件的生命周期包括：-aboutToAppear(): 组件创建后、构建前调用-build(): 构建UI树-aboutToDisappear(): 组件销毁前调用而状态管理除了@State，还有：-@Prop: 从父组件接收数据，但子组件不能修改-@Link: 与父组件双向绑定，修改会同步到父组件-@Provide/@Consume: 跨层级组件通信typescript@Entry@Componentstruct ParentComponent { @State parentCount: number = 0 build() { Column() { Text(`父组件计数: ${this.parentCount}`) .fontSize(24) .margin({ bottom: 20 }) // 传递状态给子组件，使用$符号实现双向绑定 ChildComponent({ count: $parentCount }) Button('父组件增加') .onClick(() => { this.parentCount++ }) } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) }}@Componentstruct ChildComponent { // @Link实现双向绑定 @Link count: number build() { Column() { Text(`子组件计数: ${this.count}`) .fontSize(20) .margin({ bottom: 10 }) Button('子组件增加') .onClick(() => { this.count++ // 修改会同步到父组件 }) } .padding(20) .backgroundColor('#E0F7FA') .borderRadius(10) }}## 实战技巧：性能优化声明式UI虽然方便，但如果不注意性能，可能会造成不必要的渲染。以下是一些优化技巧：1.合理使用@State：只有需要触发UI更新的变量才使用@State，普通变量用let声明即可2.使用LazyForEach：处理大量列表数据时，使用懒加载3.避免在build()中执行耗时操作：计算逻辑放在aboutToAppear()中typescript// 优化示例：使用LazyForEach处理长列表@Entry@Componentstruct LongListPage { @State items: number[] = Array.from({ length: 1000 }, (_, i) => i) build() { List() { LazyForEach(this.items, (item: number) => { ListItem() { Text(`第 ${item} 项`) .width('100%') .height(60) .backgroundColor(Color.White) .margin({ bottom: 2 }) .textAlign(TextAlign.Center) } }, (item: number) => item.toString()) } .width('100%') .height('100%') }}## 总结ArkTS的声明式UI和组件化开发模式，极大地简化了鸿蒙应用的构建过程。通过@State、@Prop、@Link等装饰器，我们可以轻松实现状态管理和组件通信；通过自定义组件，我们可以像搭积木一样快速构建复杂的UI界面。从本章的学习中，你应该掌握了：- 声明式UI的核心思想：UI是状态的函数- 如何创建和使用自定义组件- 组件间状态传递的几种方式- 性能优化的基本技巧下一章，我们将深入探讨鸿蒙的布局系统，学习如何用Flex、Grid、Stack等容器组件构建精美的用户界面。