頁面生命周期精刷,即被@Entry裝飾的組件生命周期拗胜,提供以下生命周期接口:
接口 | 描述 |
---|---|
onPageShow | 頁面每次顯示時觸發(fā)。 |
onPageHide | 頁面每次隱藏時觸發(fā)一次怒允。 |
onBackPress | 當(dāng)用戶點(diǎn)擊返回按鈕時觸發(fā)埂软。 |
組件生命周期,即一般用@Component裝飾的自定義組件的生命周期纫事,提供以下生命周期接口:
接口 | 描述 |
---|---|
aboutToAppear | 組件即將出現(xiàn)時回調(diào)該接口勘畔,具體時機(jī)為在創(chuàng)建自定義組件的新實(shí)例后所灸,在執(zhí)行其build()函數(shù)之前執(zhí)行。 |
aboutToDisappear | 在自定義組件即將析構(gòu)銷毀時執(zhí)行炫七。 |
代碼示例:
// Index.ets
import router from '@ohos.router';
// Page
@Entry
@Component
struct MyComponent {
@State showChild: boolean = true;
// 只有被@Entry裝飾的組件才可以調(diào)用頁面的生命周期
onPageShow() {
console.info('Index onPageShow');
}
// 只有被@Entry裝飾的組件才可以調(diào)用頁面的生命周期
onPageHide() {
console.info('Index onPageHide');
}
// 只有被@Entry裝飾的組件才可以調(diào)用頁面的生命周期
onBackPress() {
console.info('Index onBackPress');
}
// 組件生命周期
aboutToAppear() {
console.info('MyComponent aboutToAppear');
}
// 組件生命周期
aboutToDisappear() {
console.info('MyComponent aboutToDisappear');
}
build() {
Column() {
// this.showChild為true爬立,創(chuàng)建Child子組件,執(zhí)行Child aboutToAppear
if (this.showChild) {
Child()
}
// this.showChild為false万哪,刪除Child子組件侠驯,執(zhí)行Child aboutToDisappear
Button('create or delete Child').onClick(() => {
this.showChild = false;
})
// push到Page2頁面,執(zhí)行onPageHide
Button('push to next page')
.onClick(() => {
router.pushUrl({ url: 'pages/Page2' });
})
}
}
}
// 組件
@Component
struct Child {
@State title: string = 'Hello World';
// 組件生命周期
aboutToDisappear() {
console.info('[lifeCycle] Child aboutToDisappear')
}
// 組件生命周期
aboutToAppear() {
console.info('[lifeCycle] Child aboutToAppear')
}
build() {
Text(this.title).fontSize(50).onClick(() => {
this.title = 'Hello ArkUI';
})
}
}