HarmonyOS NEXT是華為推出的最新操作系統(tǒng)，arkUI是其提供的用戶界面框架。arkUI的頁面生命周期管理對于開發(fā)者來說非常重要，因?yàn)樗婕暗巾撁娴膭?chuàng)建、顯示、隱藏、銷毀等各個階段。以下是arkUI頁面生命周期的介紹及使用舉例。

頁面的生命周期的作用

頁面的生命周期管理在應(yīng)用開發(fā)中具有重要作用，主要體現(xiàn)在以下幾個方面：

1. 資源管理：在不同的生命周期階段，開發(fā)者可以合理分配和釋放資源，例如在頁面創(chuàng)建時分配內(nèi)存，在頁面銷毀時釋放內(nèi)存，從而避免內(nèi)存泄漏。

2. 狀態(tài)保存：通過生命周期方法，可以在頁面隱藏時保存當(dāng)前狀態(tài)，以便在重新顯示時恢復(fù)。這樣可以提升用戶體驗(yàn)，用戶返回頁面時能夠繼續(xù)之前的操作。

3. 數(shù)據(jù)加載和更新：在頁面顯示時加載數(shù)據(jù)，確保用戶能夠看到最新信息。在頁面展示前，可以進(jìn)行必要的數(shù)據(jù)預(yù)處理，提高界面的響應(yīng)速度和流暢度。

4. 用戶交互處理：根據(jù)頁面在生命周期中不同的狀態(tài)，適時處理用戶交互，比如在頁面隱藏時暫停動畫或停止網(wǎng)絡(luò)請求，減少不必要的操作。

5. 事件管理：能夠更好地管理用戶事件，在合適的時機(jī)綁定/解綁事件監(jiān)聽器，避免多次綁定導(dǎo)致的性能問題。

6. 調(diào)試和日志記錄：通過生命周期方法，可以在各個階段記錄日志，幫助開發(fā)者調(diào)試應(yīng)用，了解應(yīng)用的狀態(tài)變化和用戶行為。

arkUI的自定義組件和頁面的關(guān)系

• 自定義組件：@Component裝飾的UI單元，可以組合多個系統(tǒng)組件實(shí)現(xiàn)UI的復(fù)用，可以調(diào)用組件的生命周期。
• 頁面：即應(yīng)用的UI頁面?？梢杂梢粋€或者多個自定義組件組成，@Entry裝飾的自定義組件為頁面的入口組件，即頁面的根節(jié)點(diǎn)，一個頁面有且僅能有一個@Entry。只有被@Entry裝飾的組件才可以調(diào)用頁面的生命周期。

頁面生命周期，即被@Entry裝飾的組件生命周期，提供以下生命周期接口：

• onPageShow：頁面每次顯示時觸發(fā)一次，包括路由過程、應(yīng)用進(jìn)入前臺等場景。
• onPageHide：頁面每次隱藏時觸發(fā)一次，包括路由過程、應(yīng)用進(jìn)入后臺等場景。
• onBackPress：當(dāng)用戶點(diǎn)擊返回按鈕時觸發(fā)。

組件生命周期，即一般用@Component裝飾的自定義組件的生命周期，提供以下生命周期接口：

• aboutToAppear：組件即將出現(xiàn)時回調(diào)該接口，具體時機(jī)為在創(chuàng)建自定義組件的新實(shí)例后，在執(zhí)行其build()函數(shù)之前執(zhí)行。
• aboutToDisappear：在自定義組件析構(gòu)銷毀之前執(zhí)行。不允許在aboutToDisappear函數(shù)中改變狀態(tài)變量，特別是@Link變量的修改可能會導(dǎo)致應(yīng)用程序行為不穩(wěn)定。

生命周期流程如下圖所示，下圖展示的是被@Entry裝飾的組件（頁面）生命周期

// 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 aboutToAppearif (this.showChild) {Child()}// this.showChild為false，刪除Child子組件，執(zhí)行Child aboutToDisappearButton('create or delete Child').onClick(() => {this.showChild = false;})// push到Page2頁面，執(zhí)行onPageHideButton('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';})}
}

以上示例，Index頁面包含兩個自定義組件，一個是被@Entry裝飾的MyComponent，也是頁面的入口組件，即頁面的根節(jié)點(diǎn)；一個是Child，是MyComponent的子組件。只有@Entry裝飾的節(jié)點(diǎn)才可以使頁面級別的生命周期方法生效，所以MyComponent中聲明了當(dāng)前Index頁面的頁面生命周期函數(shù)。MyComponent和其子組件Child也同時也聲明了組件的生命周期函數(shù)。

以上示例需要注意的是，區(qū)分組件的生命周期和頁面的聲明周期。只有被@Entry裝飾的組件才可以調(diào)用頁面的生命周期。

// 只有被@Entry裝飾的組件才可以調(diào)用頁面的生命周期onPageShow() {console.info('Index onPageShow');}// 只有被@Entry裝飾的組件才可以調(diào)用頁面的生命周期onPageHide() {console.info('Index onPageHide');}// 只有被@Entry裝飾的組件才可以調(diào)用頁面的生命周期onBackPress() {console.info('Index onBackPress');}

• 應(yīng)用冷啟動的初始化流程為：MyComponent aboutToAppear --> MyComponent build --> Child aboutToAppear --> Child build --> Child build執(zhí)行完畢 --> MyComponent build執(zhí)行完畢 --> Index onPageShow。
• 點(diǎn)擊“delete Child”，if綁定的this.showChild變成false，刪除Child組件，會執(zhí)行Child aboutToDisappear方法。

• 點(diǎn)擊“push to next page”，調(diào)用router.pushUrl接口，跳轉(zhuǎn)到另外一個頁面，當(dāng)前Index頁面隱藏，執(zhí)行頁面生命周期Index onPageHide。此處調(diào)用的是router.pushUrl接口，Index頁面被隱藏，并沒有銷毀，所以只調(diào)用onPageHide。跳轉(zhuǎn)到新頁面后，執(zhí)行初始化新頁面的生命周期的流程。
• 如果調(diào)用的是router.replaceUrl，則當(dāng)前Index頁面被銷毀，執(zhí)行的生命周期流程將變?yōu)?#xff1a;Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。上文已經(jīng)提到，組件的銷毀是從組件樹上直接摘下子樹，所以先調(diào)用父組件的aboutToDisappear，再調(diào)用子組件的aboutToDisappear，然后執(zhí)行初始化新頁面的生命周期流程。
• 點(diǎn)擊返回按鈕，觸發(fā)頁面生命周期Index onBackPress，且觸發(fā)返回一個頁面后會導(dǎo)致當(dāng)前Index頁面被銷毀。
• 最小化應(yīng)用或者應(yīng)用進(jìn)入后臺，觸發(fā)Index onPageHide。當(dāng)前Index頁面沒有被銷毀，所以并不會執(zhí)行組件的aboutToDisappear。應(yīng)用回到前臺，執(zhí)行Index onPageShow。

• 退出應(yīng)用，執(zhí)行Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。

頁面周期使用舉例

比如以下場景，就需要用到頁面周期，從一個頁面跳轉(zhuǎn)到另一個頁面，跳轉(zhuǎn)后的頁面需要拿到第一個頁面?zhèn)鬟f過來的參數(shù)信息。就需要在第二個頁面的生命周期里獲取，舉例如下：

// Page1.ets
import router from '@ohos.router';@Entry
@Component
struct Page1 {// 頁面生命周期方法onPageShow() {console.info('Page1 onPageShow');}// 跳轉(zhuǎn)到Page2并傳遞數(shù)據(jù)navigateToPage2() {const data = { message: 'Hello from Page1' };router.pushUrl({ url: 'pages/Page2', params: data });}build() {Column() {Text('This is Page 1').fontSize(30);Button('Go to Page 2').onClick(() => this.navigateToPage2());}}
}// Page2.ets
import router from '@ohos.router';@Entry
@Component
struct Page2 {// 變量用于接收從Page1傳來的數(shù)據(jù)@State message: string = '';// 頁面生命周期方法onPageShow() {console.info('Page2 onPageShow');const params = router.getParams(); // 獲取傳遞的參數(shù)this.message = params.message; // 賦值給本地狀態(tài)}// 返回上一頁goBack() {router.back(); // 返回上一頁面}build() {Column() {Text(this.message).fontSize(30); // 顯示接收到的消息Button('Go Back').onClick(() => this.goBack());}}
}

上述示例中，頁面路由仍使用了舊的router，僅作為示例。?看官方文檔router?已經(jīng)被標(biāo)記為「不推薦」了，同時官方推薦使用?Navigation。Navigation?提供了簡單易用的分欄模式，如果你有平板/折疊屏適配需求，那么強(qiáng)烈建議你使用?Navigation。關(guān)于Navigation路由的介紹，這是后話，后續(xù)單獨(dú)整理一份文檔，這里先略過。關(guān)于router切換Navigation介紹，可參見官方文檔：文檔中心-Router切換Navigation

寫在最后

最后，推薦下筆者的業(yè)余開源app影視項(xiàng)目“愛影家”，推薦分享給與我一樣喜歡免費(fèi)觀影的朋友。【注：該項(xiàng)目僅限于學(xué)習(xí)研究使用！請勿用于其他用途！】

開源地址:愛影家app開源項(xiàng)目介紹及源碼

https://gitee.com/yyz116/imovie

其他資源

HarmonyOS NEXT應(yīng)用開發(fā)(一、打造最好用的網(wǎng)絡(luò)通信模塊組件)-CSDN博客

OpenHarmony三方庫中心倉

UIAbility組件生命周期

頁面和自定義組件生命周期

鴻蒙開發(fā)ArkTS 頁面和自定義組件的生命周期 - 親愛的老王哥 - 博客園

一、鴻蒙ArkTS/ArkUI實(shí)戰(zhàn)-頁面和自定義組件生命周期 - 簡書

官方 Router切換Navigation 指導(dǎo)

【HarmonyOS】聽說你還在用 router 做頁面路由？我們知道鴻蒙上使用 router 模塊進(jìn)行頁面跳轉(zhuǎn)，轉(zhuǎn)眼幾 - 掘金

「HarmonyNextOS」頁面路由跳轉(zhuǎn)Router更換為Navigation_harmonyos next 頁面跳轉(zhuǎn)-CSDN博客

文檔中心-設(shè)置組件導(dǎo)航和頁面路由

【OpenHarmony】ArkTS 語法基礎(chǔ) ③ ( @Component 自定義組件生命周期回調(diào)函數(shù) | @Entry 頁面生命周期回調(diào)函數(shù) )_wx5c66153045676的技術(shù)博客_51CTO博客