满心欢喜地学习HarmonyOS生命周期 + 组件传值，它却出奇的简单！！！！！

Virtual09
174 阅读3分钟

前言

我们学习任何一门框架都需要学习它的生命周期,近日纯血鸿蒙的来临，小编也学习了下HarmonyOS开发的ArkTs,发现它的生命周期真的很简单！！！.让我们一起来学习吧!.

HarmonyOS的生命周期

HarmonyOS有两种生命周期,一个是页面周期,另一个是组件周期.那么如何区分组件和页面呢？

组件:@Component装饰器修饰的一个UI单元.

页面:@Entry装饰器装饰的自定义组件为页面,且配置了路由.一个页面有且只能有一个@Entry.

那么我们在创建一个空项目时,创建的index.ets有两个装饰器@Component和@Entry.那岂不是这个页面同时具有页面的生命周期也具有组件的生命周期.

页面的生命周期

  • onPageshow:页面每次显示时触发一次,包括路由过程,应用进入前后台等场景.
  • onPageHide:页面每次隐藏时触发一次，包括路由过程,应用进入后台等场景.
  • onBackPress:当用户点击返回按钮时触发.

组件的生命周期

  • aboutToAppear:组件即将数显时回调该接口,在build()函数之间执行
  • onDidBuild:组件build()函数执行完成之后回调该接口.
  • aboutToDisappear:aboutToDisappear函数在自定义组件析构销毁之前执行.不允许在aboutToDisappear函数中改变状态变量.

现在我们创建了两个页面demo1.ets和demo2.ets,在demo1中我们写了onPageshow，onPageHide，onBackPress，aboutToAppear，aboutToDisappear这五个生命周期

image.png

创建了子组件Child并在Demo1中使用

image.png

当我们启动,检查日志输出

image.png

我们可以发现子组件加载会比父组件加载要早,这一点在vue的生命周期也是一样的.我们这里创建了一个页面跳转的按钮，跳转后就会显示页面1隐藏了.

image.png

image.png

创建一个按钮,用于控制子组件的显示

image.png

当我们点击时,子组件就不会展示.说明这个子组件就被卸载了.

image.png

这里需要注意一点的是,这里页面之间跳转时不算成组件卸载的,这中间有一个组件缓存的过程。

组件传值

@Prop装饰器

@Prop装饰器变量允许变量在本地修改，但修改后的变化不会同步到父组件.也就是说当数据源更改时,@Prop装饰的变量都会更新,并且会覆盖本地所有更改。@Prop装饰的变量和父组件建立单向的同步关系. 这是一个父组件:

@Entry
@Component
struct Page1 {
  @State message: string = 'Page 1';
  @State parentSelectedDate:Date = new Date('2020-1-1');

  build() {
    Column() {
      Text(this.message)
        .id('Page1HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })

      Child({selectedDate:this.parentSelectedDate})
      Row(){
        DatePicker({
          start:new Date('2000-1-1'),
          end:new Date('2050-1-1'),
          selected:this.parentSelectedDate
        }).onDateChange((value)=>{
          this.parentSelectedDate = value
        })
      }
    }
    .height('100%')
    .width('100%')
  }
}

子组件:

@Component
struct Child{
  @Prop selectedDate:Date = new Date()
  build(){
    Text(`${this.selectedDate}`)
      .fontSize(30)
      .onClick(()=>{
        this.selectedDate = new Date('2025-1-1')
      })
  }
}

我们使用的是一个HarmonyOS 自带的日历组件

image.png

当我们滑动日历的时间,子组件的值也需要跟着变化.我们初始变量 @State parentSelectedDate:Date = new Date('2020-1-1');为一个响应式变量,我们将这个值传给子组件 Child({selectedDate:this.parentSelectedDate})这里我们需要注意的是,我们给子组件传一个变量为selectedDate那么我们在子组件中也必须存在这个变量.然后给子组件定义一个点击事件,当我们点击子组件时,这个时间会被修改.由于我们是单向传递的,我们子组件的值改变,但是不会引起父组件的值改变.

1727422147722.gif

@Link装饰器

@Link则是和@Prop相反,是可以实现双向同步关系的.

@Component
struct Child2{
 @Link selectedDate:Date
 build(){
   Text(`${this.selectedDate}`)
     .fontSize(30)
     .onClick(()=>{
       this.selectedDate = new Date('2025-1-1')
     })
 }
}

而是使用@Link装饰的变量是不可以给初始值的.

1727422580768.gif

本文到此就结束了,希望对您有所帮助,感谢阅读！！

avatar
文章
阅读
粉丝