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

本文分享了作者学习鸿蒙开发的实践经验。内容涵盖ArkTS语言特点、声明式UI思维转变、组件生命周期等核心概念，并提供了布局系统、状态管理等具体代码示例。文章总结了从命令式到声明式编程的适应过程，强调了掌握装饰器和数据状态管理的重要性。最后，作者通过一个待办事项应用案例展示了实际开发过程，并给出持续学习建议，包括紧跟官方更新、参与社区讨论和多实践等。全文为鸿蒙开发者提供了实用入门指导，突出了思维转变

waeng_luo

518人浏览 · 2025-11-08 21:59:53

waeng_luo · 2025-11-08 21:59:53 发布

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

随着鸿蒙生态的快速发展，作为开发者不得不关注这个新兴的系统平台。我最初接触鸿蒙时，带着移动开发的经验，也带着许多疑问：鸿蒙开发到底有什么不同？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: string
  
  build() {
    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)
  }
}