文章概敘
本文主要是介紹下在作為page以及component的時(shí)候的生命周期叫胖，以及調(diào)用API等應(yīng)該在哪個(gè)生命周期使用。
書接上回
之前的博客已經(jīng)結(jié)束了對(duì)底部欄的操作饰及，現(xiàn)在開始需要關(guān)注到具體內(nèi)容的對(duì)接了桨嫁。
而開發(fā)的第一步，我們對(duì)頁面的生命周期必須要有很深入的了解此叠，因?yàn)橛虚_發(fā)經(jīng)驗(yàn)的同學(xué)們都知道，做前端開發(fā)的時(shí)候，我們獲取數(shù)據(jù)API的接口悔雹，都是在頁面創(chuàng)建完成時(shí)調(diào)用，而在頁面即將被銷毀的時(shí)候欣喧，我們需要去關(guān)閉定時(shí)器腌零、數(shù)據(jù)監(jiān)聽等操作。所以我們必須知道在哪個(gè)階段唆阿，我們應(yīng)該做什么益涧。這些可都是面試的知識(shí)點(diǎn)來的。
綜上述驯鳖，本篇博客最主要的內(nèi)容是講下生命周期闲询，以及在開發(fā)的時(shí)候，我們調(diào)用API浅辙，初始化一些數(shù)據(jù)的操作應(yīng)該在哪些生命周期中進(jìn)行扭弧。
頁面與自定義組件的區(qū)別
自定義組件：@Component裝飾的UI單元，可以組合多個(gè)系統(tǒng)組件實(shí)現(xiàn)UI的復(fù)用记舆，可以調(diào)用組件的生命周期鸽捻。
頁面：即應(yīng)用的UI頁面“碧剩可以由一個(gè)或者多個(gè)自定義組件組成泊愧，@Entry裝飾的自定義組件為頁面的入口組件，即頁面的根節(jié)點(diǎn)盛正，一個(gè)頁面有且僅能有一個(gè)@Entry删咱。只有被@Entry裝飾的組件才可以調(diào)用頁面的生命周期。
像是我們的Mine以及Found組件豪筝，由于想要做到不使用tab的時(shí)候痰滋，也可以正常的訪問，所以我們?cè)谄渲屑尤肓薂Entry的修飾符续崖，使其屬于頁面敲街。
而文章中為什么要區(qū)分是否為頁面組件，官網(wǎng)上也給出了具體原因严望，是因?yàn)轫撁娼M件以及自定義組件各有一套生命周期多艇。
頁面生命周期，即被@Entry裝飾的組件生命周期像吻，提供以下生命周期接口：
-
onPageShow
頁面每次顯示時(shí)觸發(fā)一次峻黍，包括路由過程复隆、應(yīng)用進(jìn)入前臺(tái)等場(chǎng)景，僅@Entry裝飾的自定義組件生效姆涩。
-
onPageHide
頁面每次隱藏時(shí)觸發(fā)一次挽拂，包括路由過程、應(yīng)用進(jìn)入后臺(tái)等場(chǎng)景骨饿，僅@Entry裝飾的自定義組件生效亏栈。
-
onBackPress
當(dāng)用戶點(diǎn)擊返回按鈕時(shí)觸發(fā)，僅@Entry裝飾的自定義組件生效宏赘。
即當(dāng)頁面被切換顯示的時(shí)候绒北，各監(jiān)聽一次，當(dāng)用戶點(diǎn)擊了返回按鈕的時(shí)候察署，也會(huì)觸發(fā)一次事件镇饮。
所以我們可以這么地去理解：
當(dāng)onPageShow觸發(fā)，既顯示頁面的時(shí)候箕母，我們可以去拉數(shù)據(jù)顯示出來
當(dāng)onPageHide觸發(fā)，即隱藏頁面的時(shí)候俱济，我們可以停止當(dāng)前的一些操作嘶是，比如計(jì)時(shí)之類的。
當(dāng)onBackPress觸發(fā)蛛碌，即用戶想要退出當(dāng)前頁面的時(shí)候聂喇，我們就可以詢問用戶是否離開頁面，以便做保存的操作蔚携。
而在@component修飾的組件中希太，還有一下兩種方法
-
aboutToAppear
組件即將出現(xiàn)時(shí)回調(diào)該接口，具體時(shí)機(jī)為在創(chuàng)建自定義組件的新實(shí)例后酝蜒，在執(zhí)行其build()函數(shù)之前執(zhí)行誊辉。
-
aboutToDisappear
在自定義組件析構(gòu)銷毀之前執(zhí)行。不允許在aboutToDisappear函數(shù)中改變狀態(tài)變量亡脑，特別是@Link變量的修改可能會(huì)導(dǎo)致應(yīng)用程序行為不穩(wěn)定堕澄。
也就是說，對(duì)于一些內(nèi)部組件來說霉咨，并沒有剛剛@Entry修飾器的返回蛙紫、顯示、隱藏之類的途戒，所以我們?cè)陲@示組件的時(shí)候坑傅，就只有以下兩個(gè)生命周期：
當(dāng)組件已經(jīng)被實(shí)例化，但是還沒顯示在頁面上的時(shí)候喷斋。aboutToAppear會(huì)被調(diào)用唁毒。
當(dāng)組件即將被銷毀的時(shí)候蒜茴，aboutToDisappear會(huì)被調(diào)用。
而@Entry修飾的頁面枉证，則會(huì)含有上述的五個(gè)生命周期矮男，
即下面的圖
開始代碼
在對(duì)生命周期有了基礎(chǔ)準(zhǔn)備工作之后，我們接下來只需要實(shí)驗(yàn)一些其中的生命周期室谚，看是否符合我們的想法毡鉴。
就拿我們的Mine頁面做一次測(cè)試，測(cè)試代碼如下秒赤，將五個(gè)都添加到了mine.ets中猪瞬，接著從tab頁面訪問進(jìn)入.
@Entry
@Component
export struct Mine {
@State message: string = '這個(gè)是mine頁面'
onPageShow() {
console.log("當(dāng)前調(diào)用了pageShow方法")
}
onPageHide(){
console.log("當(dāng)前調(diào)用了pageHide方法")
}
onBackPress(){
console.log("當(dāng)前調(diào)用了onBackPress方法");
}
aboutToAppear(){
console.log("當(dāng)前調(diào)用了aboutToAppear方法");
}
aboutToDisappear(){
console.log("當(dāng)前調(diào)用了aboutToDisappear方法")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}
此時(shí)，頁面還沒渲染完成入篮，就已經(jīng)調(diào)用了aboutToAppear方法陈瘦。
但是點(diǎn)擊了上面的"我的"之后，并沒有如期的顯示出“onPageShow”被調(diào)用的字樣潮售，可見當(dāng)前作為一個(gè)頁面中的組件展示出來的時(shí)候痊项，并沒有擁有頁面的生命周期，而不是簡單的頁面中添加了一個(gè)@Entry的時(shí)候酥诽，就無論何時(shí)何地都是一個(gè)頁面了
接下來鞍泉，我們需要校驗(yàn)下作為頁面的時(shí)候，是否擁有上述的五個(gè)生命周期肮帐。
因此咖驮，我們需要直接在編譯器中直接在mine.ets頁面點(diǎn)擊保存(最主要是當(dāng)前窗口在mine.ets頁面)，點(diǎn)擊previewer的刷新按鈕训枢，這時(shí)候我們的mine.ets就履行了他的@Entry義務(wù)托修，作為一個(gè)頁面進(jìn)行渲染。
此時(shí)恒界，頁面就直接顯示了這么兩個(gè)事件睦刃。
且多次點(diǎn)擊返回按鈕，日志中也出現(xiàn)了返回的事情日志
因此仗处，我們可以確定眯勾，當(dāng)我們要初始化一些數(shù)據(jù)，比如調(diào)用Api的時(shí)候婆誓，我們可以在"aboutToAppear"中去做處理吃环。
當(dāng)我們要清理定時(shí)器的時(shí)候，可以在”aboutToDisappear“中處理
