【鸿蒙学习条记】组件生命周期・页面生命周期

官方文档：页面和自界说组件生命周期

  
组件生命周期

被@Component装饰的组件便可以调用组件的生命周期。

• aboutToAppear：实例创建后，在实行其build()函数之前实行。
  
• onDidBuild：组件build()函数实行完成之后回调该接口。
  
• aboutToDisappear：实例销毁前。
  

创建实例 → aboutToAppear → build() → onDidBuild → … → aboutToDisappear → 实例销毁
页面生命周期

只有被@Entry装饰的组件才可以调用页面的生命周期。

• onPageShow：页面表现时实行
  
• onPageHide：页面隐藏时实行
  
• onBackPress：点击返回键实行
  

练习中明确

FirstPage.ets

1. import { router } from '@kit.ArkUI'
3. @Entry
4. @Component
5. struct FirstPage {
6.   @State message: string = 'First Page';
8.   build() {
9.     Row() {
10.       Column() {
11.         Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)
12.         Button('Next')
13.           .onClick(() => {
14.             router.pushUrl({
15.               url: "pages/SecondPage"
16.             })
17.           })
18.       }
19.       .width('100%')
21.     }
22.     .height('100%')
23.   }
25.   aboutToAppear(): void {
26.     console.log("FirstPage----------aboutToAppear1")
27.   }
29.   aboutToDisappear(): void {
30.     console.log("FirstPage----------aboutToDisappear1")
31.   }
33.   onPageShow(): void {
34.     console.log("FirstPage----------onPageShow1")
35.   }
37.   onPageHide(): void {
38.     console.log("FirstPage----------onPageHide1")
39.   }
41.   onBackPress(): boolean | void {
42.     console.log("FirstPage----------onBackPress1")
43.   }
44. }

复制代码

SecondPage.ets

1. import { router } from '@kit.ArkUI'
3. @Entry
4. @Component
5. struct SecondPage {
6.   @State message: string = 'Second Page';
8.   build() {
9.     Row() {
10.       Column() {
11.         Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)
12.         Button("Back")
13.           .onClick(() => {
14.             router.back()
15.           })
16.       }
17.       .width('100%')
18.     }
19.     .height('100%')
20.   }
22.   aboutToAppear(): void {
23.     console.log("FirstPage----------aboutToAppear2")
24.   }
26.   aboutToDisappear(): void {
27.     console.log("FirstPage----------aboutToDisappear2")
28.   }
30.   onPageShow(): void {
31.     console.log("FirstPage----------onPageShow2")
32.   }
34.   onPageHide(): void {
35.     console.log("FirstPage----------onPageHide2")
36.   }
38.   onBackPress(): boolean | void {
39.     console.log("FirstPage----------onBackPress2")
40.   }
41. }

复制代码

第１步：加载 First Page

1. app Log: FirstPage----------aboutToAppear1
2. app Log: FirstPage----------onPageShow1

复制代码

第２步：First Page → 点Next按钮

1. app Log: FirstPage----------onPageHide1
2. app Log: FirstPage----------aboutToAppear2
3. app Log: FirstPage----------onPageShow2

复制代码

第３步：Second Page → 点back按钮

1. app Log: FirstPage----------onPageHide2
2. app Log: FirstPage----------onPageShow1
3. app Log: FirstPage----------aboutToDisappear2

复制代码

第４步：First Page → 点Next按钮

1. app Log: FirstPage----------onPageHide1
2. app Log: FirstPage----------aboutToAppear2
3. app Log: FirstPage----------onPageShow2

复制代码

第５步：Second Page → 点返回按钮

1. app Log: FirstPage----------onBackPress2app Log: FirstPage----------onPageHide2
2. app Log: FirstPage----------onPageShow1
3. app Log: FirstPage----------aboutToDisappear2

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。