鸿蒙 ArkTs初识

前提：基于官网3.1/4.0文档。参考官网文档
基于Android开发体系来进行比较和思考。（或有偏颇，自行斟酌）

吐槽：官网上的案例只有代码和文档解释，没有可以直接运行查看效果的模拟器，这一点上，Jetpack Compose是有的。

基本语法

1.结构

上面是官网上面的图，从结构来看，类似Jetpack Compose。 通过注解的方式来定义组件，这里给命名为了“装饰器”。
需要注意的是：@State表示组件中的状态变量，状态变量变化会触发UI刷新。类比livedata

2.引用的方式

// $r形式引入应用资源，可应用于多语言场景
Text($r('app.string.title_value'))
Image(this.imagePath)
Image('https://' + this.imageUrl)
Text(`count: ${
     
     this.count}`)// 这种方式在react中较为常见，应该是ts的写法

引用本地资源的方式是$r('app.string.title_value')。（感觉稍显复杂了）

3.this作用域

fn = () => {
   
   
  console.info(`counter: ${
     
     this.counter}`)
  this.counter++
}
Button('add counter')
  .onClick(this.fn)

可以看到，this作用域是整个文件，而不是Android中的闭包作用域。

4.组件

@Component
struct MyComponent {
   
   
 build() {
   
   
 }
}

自定义组件标准范式如上。加上注解@Entry装饰的自定义组件将作为UI页面的入口。（这句话比较难理解，可以认为是export之类的用法，一个文件只有一个export，React项目中的特点。）

@Entry可以接受一个可选的LocalStorage的参数。——>这点类似于Android中的bundle，用来进行UI页面的数据传递。不确定该LocalStorage是否是livedata特点。

build

//不能在build里声明变量，需要放在build外。
build() {
   
   
  // 反例：不允许声明本地变量
  let a: number = 1;
}

//不允许在UI描述里直接使用console.info，但允许在方法或者函数里使用——>可以理解为build{}是渲染作用域，不要添加打印
build() {
   
   
  // 反例：不允许console.info
  console.info('print debug log');
}

//不允许创建本地的作用域——>既然是渲染作用域，那就不必要再添加作用域，直接堆砌组件即可。（组件作用域里面可以调用方法）
build() {
   
   
  // 反例：不允许本地作用域
  {
   
   
    ...
  }
}

不允许switch语法，如果需要使用条件判断，请使用if——>这一点甚是奇怪，都是判断语句还做不一样的差异对待

build() {
   
   
  Column() {
   
   
    // 反例：不允许使用switch语法
    switch (expression) {
   
   
      case 1:
        Text('...')
        break;
      case 2:
        Image('...')
        break;
      default:
        Text('...')
        break;
    }
  }
}

build() {
   
   
  Column() {
   
   
    // 反例：不允许使用表达式——>实际上这种写法在React中很常见，不确定知道jetpack compose是否如此设计
    (this.aVar > 10) ? Text('...') : Image('...')
  }
}

生命周期

页面生命周期，即被@Entry装饰的组件生命周期，提供以下生命周期接口：
onPageShow：页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效。
onPageHide：页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景，仅@Entry装饰的自定义组件生效。
onBackPress：当用户点击返回按钮时触发，仅@Entry装饰的自定义组件生效。

组件生命周期，即一般用@Component装饰的自定义组件的生命周期，提供以下生命周期接口：
aboutToAppear：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行。
aboutToDisappear：在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。

生命周期相较于Android是做了减法。不确定是否有页面栈的设计模式，譬如说：栈顶复用之类，以及由此进行的bundle数据传递。

组件的销毁

组件的销毁是从组件树上直接摘下子树，所以先调用父组件的aboutToDisappear，再调用子组件的aboutToDisappear，然后执行初始化新页面的生命周期流程。

以下是官方示例：

// Index.ets
import router from