HarmongOS开发（2）：页面和组件的生命周期和参数传递

游码笔记2023-11-22 18:00

前言：自定义组件是@Component装饰的UI单元。@Entry装饰的自定义组件为页面的入口组件，1个页面仅有一个@Entry，可以有多个自定义组件，页面只有调用@Entry的组件，生命周期才能开启。

生命周期

页面生命周期（@Entry装饰的组件生命周期）

onPageShow：页面每次显示时触发。
onPageHide：页面每次隐藏时触发一次。
onBackPress:当用户点击返回按钮时触发。

组件生命周期（@Component装饰的自定义组件的生命周期）

aboutToApper：组件即将出现时回调该接口;引用组件实例后，执行其build函数之前。
aboutToDisapper：在自定义组件即将销毁时执行

参数传递

参数传递原则：

参数类型和参数声明类型一致，不能为null、undefined、undefined或者null的表达式。
在函数内部，参数值不可修改，如要修改，可以采取同步回调

参数传递分为按引用传递参数和按值传递。

特别注意：传递的参数为状态变量时，按值传递不能引起UI刷新，引用传递可以UI刷新。

引用传递函数：

CiteData($$: {name: string,age: number}) {}//创建函数

{$$.name} //使用参数

this.CiteData({ name:this.title,age: 10 }) //使用函数

按值传递函数：

ValueData(name: string, age: number){}//创建函数

name //使用参数

this.ValueData("xxx",10)//使用函数

typescript 复制代码

@Component
struct child {
  @State title: string = "无名氏"

  build() {
    Row() {
      Column() {
        this.ValueData(this.title,10)//按值传递 调用方式
        this.CiteData({ name:this.title,age: 10 })// 引用传递 调用方式
        Button("点击改变值").onClick(()=>{
          this.title = '张三'
          //结果：引用传递的name的UI刷新了，按值传递的name的UI没变化
        })
      }
      .width('100%')
    }
    .height('100%')
  }

  @Builder CiteData($$: {
    name: string,
    age: number
  }) { //引用传递
    Text(`引用传递：${$$.name}的年龄是${$$.age}`) //使用方式
  }

  @Builder ValueData(name: string, age: number) { //按值传递
    Text(`按值传递：${name}的年龄是${age}`) //使用方式
  }