鸿蒙语言基础学习经验分享：从困惑到渐入佳境

news/2025/11/8 22:02:20/文章来源:https://www.cnblogs.com/waeng-luo/p/19203161

前言：为什么学习鸿蒙语言？

随着鸿蒙生态的快速发展，作为开发者不得不关注这个新兴的系统平台。我最初接触鸿蒙时，带着移动开发的经验，也带着许多疑问：鸿蒙开发到底有什么不同？ArkTS和Java/JS有什么区别？分布式能力如何实现？经过一段时间的学习和实践，我积累了一些经验，希望能为正在入门的同学提供参考。

一、 ArkTS语言：TypeScript的鸿蒙进化

1.1 初识ArkTS的困惑与理解

刚开始学习ArkTS时，我最深的感受是：既熟悉又陌生。

// 这是一个简单的ArkTS组件
@Component
struct MyComponent {@State message: string = 'Hello HarmonyOS'build() {Column() {Text(this.message).fontSize(20).onClick(() => {this.message = 'Hello ArkTS!'})}.width('100%').height('100%')}
}

学习心得：

如果你有TypeScript基础，ArkTS上手会很快
装饰器@Component、@State是核心概念，需要重点掌握
声明式UI的编写方式与Flutter/SwiftUI类似

1.2 状态管理的核心：装饰器的理解

我的学习路径：

先掌握@State：组件内状态管理
再学习@Prop：父子组件单向同步
理解@Link：父子组件双向同步
最后掌握@Provide和@Consume：跨组件状态管理

// 装饰器使用示例
@Component
struct ParentComponent {@State parentMessage: string = '来自父组件'build() {Column() {ChildComponent({ message: this.parentMessage })Button('修改消息').onClick(() => {this.parentMessage = '父组件修改的消息'})}}
}@Component
struct ChildComponent {@Prop message: stringbuild() {Text(this.message)}
}

二、声明式UI：思维模式的转变

2.1 从命令式到声明式的适应过程

命令式UI（传统Android）：

TextView textView = findViewById(R.id.text_view);
textView.setText("新内容");
textView.setVisibility(View.VISIBLE);

声明式UI（鸿蒙ArkTS）：

// UI是状态的函数，状态改变UI自动更新
@State isVisible: boolean = true
@State content: string = '新内容'build() {if (this.isVisible) {Text(this.content)}
}

适应技巧：

忘记直接操作UI组件的方式
把重点放在数据状态的管理上
理解"UI = f(State)"的概念

2.2 布局系统的学习心得

鸿蒙的布局系统相对直观，但需要理解其排列规则：

build() {Column() {          // 纵向排列Row() {           // 横向排列Text('第一个').layoutWeight(1)  // 权重布局Text('第二个').layoutWeight(2)}.height(100)Stack() {         // 层叠布局Text('底层文本')Text('上层文本').align(Alignment.Top)}}.justifyContent(FlexAlign.SpaceBetween)  // 主轴对齐方式
}

布局学习建议：

先从Column、Row、Stack这三个基础容器开始
掌握主轴和交叉轴的对齐概念
多练习各种布局场景，理解排列规则

三、核心概念：重点与难点突破

3.1 组件生命周期的理解

组件的生命周期是鸿蒙开发的重点，我通过这张图来记忆：

@Component
struct MyComponent {aboutToAppear() {// 组件即将出现：初始化数据console.log('组件即将创建')}build() {// 构建UI}aboutToDisappear() {// 组件即将销毁：清理资源console.log('组件即将销毁')}
}

生命周期学习心得：

aboutToAppear ≈ Android的onCreate
aboutToDisappear ≈ Android的onDestroy
但理念不同：鸿蒙组件可能被频繁创建和销毁

3.2 渲染控制的条件掌握

条件渲染和循环渲染是日常开发中的高频功能：

@Component
struct ControlRendering {@State isLogin: boolean = false@State userList: Array<string> = ['用户1', '用户2', '用户3']build() {Column() {// 条件渲染if (this.isLogin) {Text('欢迎回来！')} else {Button('点击登录').onClick(() => {this.isLogin = true})}// 循环渲染ForEach(this.userList, (item: string) => {ListItem({ content: item })}, (item: string) => item)}}
}

四、学习资源与实操建议

4.1 我的学习资源路径

官方文档（必看）：
- ArkTS语言官方文档
- 声明式UI开发指南
- 组件参考文档
实践平台：
- DevEco Studio：一定要熟练使用
- 本地模拟器：调试很方便
- 真机调试：体验真实效果
学习项目：
- 官方Sample：理解最佳实践
- 自己重构小项目：从简单到复杂

4.2 实操建议：避免我走过的弯路

新手常见误区：

❌ 一开始就想做复杂项目
❌ 不重视基础语法和概念
❌ 忽略官方示例代码
❌ 不习惯查阅官方文档

正确学习路径：

✅ 搭建环境，创建Hello World项目
✅ 学习基础组件：Text、Button、Image等
✅ 掌握布局：Column、Row、Stack
✅ 理解状态管理：@State、@Prop、@Link
✅ 实践页面导航和数据传递
✅ 尝试分布式能力开发

五、实战案例：我的第一个鸿蒙应用

分享我学习时做的一个简单待办事项应用：

// 简单的待办应用
@Entry
@Component
struct TodoApp {@State tasks: Array<string> = []@State inputText: string = ''build() {Column({ space: 10 }) {// 输入区域Row() {TextInput({ text: this.inputText, placeholder: '输入新任务' }).onChange((value: string) => {this.inputText = value}).layoutWeight(1)Button('添加').onClick(() => {if (this.inputText) {this.tasks.push(this.inputText)this.inputText = ''}})}.width('100%')// 任务列表List({ space: 5 }) {ForEach(this.tasks, (task: string, index?: number) => {ListItem() {Row() {Text(task).layoutWeight(1)Button('删除').onClick(() => {this.tasks.splice(index!, 1)})}}}, (task: string) => task)}.layoutWeight(1)}.padding(10)}
}