HarmonyOS学习（二） ArkTS 基础知识
HarmonyOS学习（二） ArkTS 基础知识
一、ArkTS介绍
ArkTS是HarmonyOS应用的开发语言，在TypeScript的基础上拓展了声明式UI、状态管理等相应的能力，让开发者以更简洁自然的方式开发高性能应用。TypeScript是JavaScript的拓展，ArkTS是TypeScript的拓展。
二、声明式UI规范
下图为 ArkTS 声明式开发规范的主要内容
1、装饰器
用来装饰类、结构、方法以及变量，赋予其特殊的含义。如上图中的 @Entry、@Component、@State 都是装饰器。多个装饰器可以叠加到目标元素上，定义在同一行或多行分开。
@Entry ：表示当前是个入口组件
@Component：表示这个是个自定义组件
@State：表示组件中的状态变量，次状态变化会引起UI的变化
2、自定义组件
可复用的UI组件，可组合其他的组件。也可以被其他组件调用。
自定义组件可以基于struct实现，不能有继承关系，对于struct的实例化，可以省略new。如上图的 struck Hello 就是一个自定义组件。
自定义组件的生命周期：
aboutToAppear
aboutToAppear 函数在创建自定义组件的新实例后，在执行其build()函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build()函数中生效。
aboutToDisappear
aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。
onPageShow
页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效。
onPageHide
页面每次隐藏时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry装饰的自定义组件生效。
onBackPress
当用户点击返回按钮时触发，仅@Entry装饰的自定义组件生效。
2、UI描述
声明式的方式来描述UI的结构，如上图中的 build() 方法内的代码块。自定义组件必须定义 Build() 函数，并且禁止自定义构造函数。
4、内置组件
框架中默认内置的基础和布局组件，可直接被开发者调用，如上图示例中的 Column、Text、Divider、Button，另外还有Row、Image等内置组件。内置组件又可以区分为基础组件和容器组件
无参数构造配置
如果组件的接口定义中不包含必选构造参数，组件后的“()”中不需要配置任何内容。如 Divider组件
Column() { Text('item 1') Divider() Text('item 2')
Image('xxx.jpg')
}
必选参数构造配置
如果组件的接口定义中包含必选构造参数，则在组件后面的“()”中必须配置响应的参数，参数可以使用常量进行赋值。如上面代码中的 Text、Image。
5、事件配置
用于添加组件对事件的响应逻辑，统一通过事件方法进行设置，如跟随在Button后面的onClick()，通过"."运算符连接。
使用lambda表达式配置组件事件方法
Button("add") .onClick(() => { this.counter ++ })
使用匿名函数表达式配置组件的事件方法，要求使用bind，以确保匿名函数体重的this引用包含的组件
Button("add") .onClick(function() { this.counter ++ }.bind(this))
使用组件的成员函数配置组件的事件方法
addClick(): void { this.counter ++ } Button("add") .onClick(this.addClick)
6、属性配置
用于组件属性的配置，统一通过属性方法进行设置，如fontSize()、width()、height() 等，可通过链式调用的方式设置多项属性。
配置 Text 组件的字体大小：
Text('test') .fontSize(12)
除了使用常量参数外，还可以传递变量或表达式：
Image("paly.jpg") .width(this.count % 2 === 0 ? 100 : 200) .height(this.offset + 10)
同时框架还内置了一些枚举类型供开发人员使用，如颜色和字体粗细。
Text('test') .fontSize(12) .fontWeight(FontWeight.Bold) .fontColor(Color.Blue)
7、子组件配置
对于支持子组件配置的组件，例如容器组件，在“{...}”里为组件添加组件的UI描述。Column、Row、Stack、Grid、List等都是容器组件。
以最简单的Column为例
Column() { Text("Hello") .fontSize(20) Divider() Text(this.ame) .fontSize(24) fontColor(Color.Red) }
容器组件之间也可以相互嵌套
Column() { Row() { Text("MyName") .fontSize(20) Divider() Text(this.ame) .fontSize(24) fontColor(Color.Red) } Diveder() Row() { Text("Age") .fontSize(20) Divider() Text(this.age) .fontSize(24) fontColor(Color.Blue) } }
三、组件状态管理装饰器和@Buiklder装饰器
组件状态管理装饰器用来管理组件中的状态，他们分别是：@State、@Prop、@Link
@State装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用做在组建的build方法进行UI刷新。
@Prop与@State有着相同的语义，但初始化方式不同。@Prop装饰的变量必须使用其父组件提供的@State变量进行初始化，允许组件内部修改@Prop变量，但更改不会通知给父组件，即@Prop属于单向数据绑定。
@Link装饰的变量可以和父组件的@State变量建立双向数据绑定，需要注意的是：@Link变量不能在组件内部进行初始化。
@State、@Prop和@Link 三者关系图
@Builder 装饰的函数称为自定义构建函数，装饰的方法用于定义组件的声明式UI描述，在一个自定义组件内快速生成多个布局内容。
