【木棉花】学习笔记——ArkUI组件的生命周期函数（eTS） 原创 精华

春节不停更，此文正在参加「星光计划-春节更帖活动」

前言

我们在学习harmonyOS开发的过程中自然是会遇到不少生命周期函数的问题的。生命周期这不仅仅是在js和java开发中会涉及，在eTS开发中也会涉及。在js中我们接触得比较多的应该是onCreate，在java中接触得比较多的应该是onStart这个生命周期，那在eTS中我们又将需要接触那些生命周期函数又需要掌握哪些生命周期的函数呢？
我们今天要学的eTS的生命周期相对于js或者java是有一些不同的，后者是ability或者是abilityslice的生命周期，而今天学的eTS开发的生命周期是自定义组件的一个生命周期。

正文

接下来我们来写一个简单的demo来好好加深印象。我们先写一个也包含一个按钮的组件，点击按钮就会创建一个计算器组件，再点击一个按钮就会销毁计算器组件，并且在这两个组件中添加生命周期函数，并在这些函数中输出一下哪个函数被调用了。
当程序被运行之后，显示到主页面是就会有按钮对应的组件的aboutToDisappear、onPageShow这两个函数被调用，注意是先创建实例调用aboutToDisappear函数之后才是页面显示调用onPageShow函数。


当我们点击开始计时时，计时器就会启动并显示出来。当计时器被创建一个实例时，会调用计时器组件的一个aboutToAppear函数，但是不会调用计时器的onPageShow函数。这是因为onPageShow函数仅对被@Entry修饰的自定义组件生效。


当然，当我们点击取消计时器按钮时，计时器组件会先调用aboutToDisappear函数之后再析构计时器实例。

但当我们点击返回按钮销毁该页面时，会先调用页面组件的onBackPress函数，再当页面消失时去调用页面组件的onPageHide函数，最后先调用页面组件的aboutToDisappear函数再析构页面组件的实例。

那为什么点击返回时，不会调用计时器组件的onPageHide、onBackPress这两个函数呢，是因为计时器实例事先已经被析构了吗？这只是一部分原因，但当计时器组件还在计时时点击返回按钮仍然不会调用这两个函数。这是因为onPageHide、onBackPress这两个函数仍然仅对被@Entry修饰的自定义组件生效。

@Entry
@Component
struct Index {
  @State isVisual: boolean = false
  title:string = '开始计时'
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button(this.title)
        .onClick(()=>{
          if(!this.isVisual)
            this.title = '取消计时器'
          else
            this.title = '开始计时'
          this.isVisual = !this.isVisual
        })
      if(this.isVisual){
        timer({time:-1,count:0})
      }
    }
    .width('100%')
    .height('100%')
  }
  aboutToAppear(){
    console.info('页面组件调用aboutToDisappear函数')
  }
  aboutToDisappear(){
    console.info('页面组件调用aboutToDisappear函数')
  }
  onPageShow(){
    console.info('页面组件被显示，并调用onPageShow函数')
  }
  onPageHide(){
    console.info('页面组件调用消失，并onPageHide函数')
  }
  onBackPress(){
    console.info('用户点击返回按钮，页面组件调用onBackPress函数')
  }
}
@Component
struct timer{
  private time : number = -1
  @State count: number = 0
  build(){
      Text(this.count + ' s have passed')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
  }
  aboutToAppear(){
    console.info('计时器组件 调用aboutToAppear,计时开始')
    this.time = setInterval(()=>{
      this.count++
    },1000)
  }
  aboutToDisappear(){
    console.info('计时器组件调用aboutToDisappear,计时结束')
  }
  onPageShow(){
    console.info('计时器组件显示，并调用onPageShow')
  }
  onPageHide(){
    console.info('计时器组件消失，并调用aboutToDisappear')
  }
  onBackPress(){
    console.info('用户点击返回按钮，计时器组件调用onBackPress')
  }
}

相信通过这例子的学习你已经是了解到了组件的生命周期了吧。如果有什么问题还在文章有什么不足之处请及时反馈。

更多资料请关注我们的项目 : Awesome-HarmonyOS_木棉花

本项目会长期更新 ，希望随着鸿蒙一同成长变强的既有我们，也有正在看着这个项目的你。明年3月，深大校园内的木棉花会盛开，那时，鸿蒙也会变的更好，愿这花开，有你我的一份。