#HarmonyOS NEXT体验官# 鸿蒙应用开发- ArkTS必知必会 原创

ArkTS简介

ArkTS围绕应用开发在TS生态基础上做了进一步扩展，继承了TS的几乎所有特性，是TS的超集，新增状态管理、条件渲染等。

在基本保持着TS语法风格的基础上进一步规范强化静态类型检查和分析，同时提供TS没有的内置容器对象、线程并发能力等，可以在编译期间提前暴露错误，减少运行期间报错的概率，代码更健壮可维护性更好。

ArkTS语言基础类库能力示意图：

从TypeScript到ArkTS的适配规则

基础语法

TS基础

关于TypeScript的基础，可以参考我这篇笔记进行入门：https://blog.csdn.net/hzw2017/article/details/131670711

UI架构图

参考于：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-ui-development-overview-0000001820879765

鸿蒙应用层开发是声明式UI，系统内置丰富的UI组件、布局和动画，提供了多种状态管理机制，相对传统的命令式UI开发体验、效率更高。

AOT（运行前编译）与JIT（运行时编译，边运行边编译）的区别： https://www.cnblogs.com/linghu-java/p/10577515.html

UI开发基本知识

任务	简介	相关指导
学习ArkTS	介绍了ArkTS的基本语法、状态管理和渲染控制的场景。	基础语法、状态管理 、渲染控制
开发布局	介绍了几种常用的布局方式。	常用布局
添加组件	介绍了几种常用的内置组件、自定义组件以及通过API方式支持的界面元素。	常用组件、自定义组件、气泡和菜单
设置页面路由和组件导航	介绍了如何设置页面路由以及组件间的导航。	页面路由、组件导航
显示图形	介绍了如何显示图片、绘制自定义几何图形以及使用画布绘制自定义图形。	图片、几何图形、画布
使用动画	介绍了组件和页面使用动画的典型场景。	属性动画、转场动画、组件动画、动画曲线、动画衔接、动画效果
绑定事件	介绍了事件的基本概念和如何使用通用事件和手势事件。	通用事件、手势事件

声明UI描述规范

装饰器： 用于装饰类、结构、方法以及变量，并赋予其特殊的含义。@Entry、@Component和@State都是装饰器。

• @Component表示自定义组件
• @Entry表示该自定义组件为入口组件
• @State表示组件中的状态变量，状态变量变化会触发UI刷新。

自定义组件及其生命周期

页面的默认入口组件：

自定义组件的生命周期：

aboutToAppear(){
  // 页面创建时，即将显示时被调用，通过初始化数据
 LogUtils.d("aboutToAppear")
}

onPageShow(){
  // 页面显示时被调用
  // 初次创建页面时、从后台进入前台时
  // 类似Android的onResume
  LogUtils.d("onPageShow")
}

onBackPress(){
  // 返回
  LogUtils.d("onBackPress")
}

onPageHide(){
  // 页面消失时被调用
  // 頁面銷毀時或進入后台
  // 类似Android的onPause
  LogUtils.d("onPageHide")
}

aboutToDisappear(){
  // 页面被销毁时调用，通过用于回收对象，避免内存泄漏
  LogUtils.d("aboutToDisappear")
}

组件的状态管理

状态管理概述

鸿蒙是声明式ui，是通过状态数据来驱动ui的变化。
状态管理就是对数据的管理，当数据发生变化时ui也随着变化。
页面级组件的状态有如下：

在父组件声明的状态，是要初始化的，比如@State和@Provide。

@State

@State 是组件内的状态管理装饰器，当这些状态数据被修改时，将会调用所在组件的build方法进行UI刷新。

基本使用：

@Prop

@Prop装饰的变量必须使用其父组件提供的@State变量进行初始化，子组件内部用@Prop修饰变量，但变量的更改不会通知给父组件，父组件变量的更改会同步到@prop装饰的变量，即@Prop属于单向数据绑定。

简单地讲：父可传子，但子不可传父。

基本使用：@Prop修饰在子组件中的变量 ，@State修饰在父组件中的变量。

@Link

子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。

基本使用：

tips：在List组件需要特别注意，其中的key参数。

List() {
  // 会自动观察子组件的@Link修饰的变量
  ForEach(this.isSwitchDataSource ? this.list2 : this.list1,
    (item: RankData, index: number) => {
    // list item组件
    ListItem() {
      ListItemComponent({ index: index + 1,
        name: item.name,
        vote: item.vote,
        isSwitchDataSource: this.isSwitchDataSource })
    }
// keyGenerator类似vue的for语句中的key,标志是否更新，若key是一样的可不更新
  }, (item, index) =>  JSON.stringify(item)) 
}

要确保keyGenerator函数返回值是唯一的，不然列表可能会不更新，即使数据源发生了变化，但key没有发生变化，也是不会刷新列表ui。

@Provide和@Consume

@Provide和@Consume装饰器：应用于与后代组件的双向数据同步，应用于状态数据在多个层级之间传递的场景。不同于上文提到的父子组件之间通过命名参数机制传递，@Provide和@Consume摆脱参数传递机制的束缚，实现跨层级传递。

当子组件使用@Consume变量时，没有找到对应的变量名/alias（别名）对应的@Provide的变量，框架会抛出JS ERROR。

场景如下，组件的关系：

SimpleVideoPlay
|
|- VideoPlayer
|- |
   |- VideoSlider

在SimpleVideoPlay组件声明了@Provide的变量isPlay：

@Component
@Entry
struct SimpleVideoPlay {
 @Provide isPlay: boolean = false
}

在VideoPlayer组件中，用@Consume声明一个同样的变量isPlay

@Preview
@Component
export struct VideoPlayer {
  @Provide currentTime: number = 0;
  @Provide durationTime: number = 0;
  @Provide currentStringTime: string = "00:00";
  @Provide durationStringTime: string = "00:00";
  @Consume isPlay: boolean;
}

VideoSlider组件同样也用@Consume声明了isPlay变量。

@Component
@Preview
export struct VideoSlider {
 @Consume currentTime: number;
  @Consume durationTime: number ;
  @Consume currentStringTime: string ;
  @Consume durationStringTime: string ;
  @Consume isPlay: boolean;
}

只要其中任何一个组件的isPlay变量发生了状态变化，其他组件对应的变量也会随之变化，是双向性的。

渲染控制

https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-rendering-control-overview-0000001543911149-V3?catalogVersion=V3

渲染条件控制：

• if/else：条件渲染
• ForEach：循环渲染
• LazyForEach：数据懒加载

参考

• https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-state-management-overview-0000001524537145-V3?catalogVersion=V3
• https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-rendering-control-overview-0000001543911149-V3?catalogVersion=V3