生命周期流程如下图所示,下图展示的是被@Entry装饰的组件(页面)生命周期。
#一、怎么理解生命周期?
生命周期:简单点理解就是从创建到销毁的过程
#二、你知道的生命周期函数有那些, 说一下执行时机?
自定义组件:@Component装饰的UI单元,可以组合多个系统组件实现UI的复用,可以调用组件的生命周期。
页面:即应用的UI页面。可以由一个或者多个自定义组件组成,@Entry装饰的自定义组件为页面的入口组件,即页面的根节点,一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。
##组件周期
组件生命周期,即一般用@Component装饰的自定义组件的生命周期,提供以下生命周期接口:
aboutToAppear(组件加载的时候触发)
● aboutToAppear 函数在创建自定义组件的新实例后,在执行其 build 函数之前执行。
● 允许在 aboutToAppear 函数中改变状态变量,更改将在后续执行 build 函数中生效。
aboutToDisappear(组件销毁触发)
● aboutToDisappear 函数在自定义组件析构销毁之前执行。
● 不允许在 aboutToDisappear 函数中改变状态变量,特别是 @Link 变量的修改可能会导致应用程序行为不稳定。
##页面周期
页面生命周期,即被@Entry装饰的组件生命周期,提供以下生命周期接口:
onPageShow(页面显示执行 可以执行多次)
● 页面每次显示时触发一次,包括路由过程、应用进入前后台等场景,仅 @Entry 修饰的自定义组件生效。
onPageHide(页面显示隐藏 可以执行多次)
● 页面每次隐藏时触发一次,包括路由过程、应用进入前后台等场景,仅 @Entry 修饰的自定义组件生效。
onBackPress(阻止是跳转后阻止)
● 当用户点击返回按钮时触发,仅 @Entry 修饰的自定义组件生效。
● 内部如果返回 true,就无法通过返回键返回上一页,用户就必须和页面交互才可以返回
因为@Entry 也是@Component组件,所以页面组件同时拥有自定义组件的生命周期
#三、以下示例展示了生命周期的调用时机:
// Index.ets
import { router } from '@kit.ArkUI';@Entry
@Component
struct MyComponent {@State showChild: boolean = true;@State btnColor:string = "#FF007DFF";// 只有被@Entry装饰的组件才可以调用页面的生命周期onPageShow() {console.info('Index onPageShow');}// 只有被@Entry装饰的组件才可以调用页面的生命周期onPageHide() {console.info('Index onPageHide');}// 只有被@Entry装饰的组件才可以调用页面的生命周期onBackPress() {console.info('Index onBackPress');this.btnColor ="#FFEE0606";return true // 返回true表示页面自己处理返回逻辑,不进行页面路由;返回false表示使用默认的路由返回逻辑,不设置返回值按照false处理}// 组件生命周期aboutToAppear() {console.info('MyComponent aboutToAppear');}// 组件生命周期onDidBuild() {console.info('MyComponent onDidBuild');}// 组件生命周期aboutToDisappear() {console.info('MyComponent aboutToDisappear');}build() {Column() {// this.showChild为true,创建Child子组件,执行Child aboutToAppearif (this.showChild) {Child()}// this.showChild为false,删除Child子组件,执行Child aboutToDisappearButton('delete Child').margin(20).backgroundColor(this.btnColor).onClick(() => {this.showChild = false;})// push到page页面,执行onPageHideButton('push to next page').onClick(() => {router.pushUrl({ url: 'pages/page' });})}}
}@Component
struct Child {@State title: string = 'Hello World';// 组件生命周期aboutToDisappear() {console.info('[lifeCycle] Child aboutToDisappear')}// 组件生命周期onDidBuild() {console.info('[lifeCycle] Child onDidBuild');}// 组件生命周期aboutToAppear() {console.info('[lifeCycle] Child aboutToAppear')}build() {Text(this.title).fontSize(50).margin(20).onClick(() => {this.title = 'Hello ArkUI';})}
}
// page.ets
@Entry
@Component
struct page {@State textColor: Color = Color.Black;@State num: number = 0;onPageShow() {this.num = 5;}onPageHide() {console.log("page onPageHide");}onBackPress() { // 不设置返回值按照false处理this.textColor = Color.Grey;this.num = 0;}aboutToAppear() {this.textColor = Color.Blue;}build() {Column() {Text(`num 的值为:${this.num}`).fontSize(30).fontWeight(FontWeight.Bold).fontColor(this.textColor).margin(20).onClick(() => {this.num += 5;})}.width('100%')}
}
以上示例中,Index页面包含两个自定义组件,一个是被@Entry装饰的MyComponent,也是页面的入口组件,即页面的根节点;一个是Child,是MyComponent的子组件。只有@Entry装饰的节点才可以使页面级别的生命周期方法生效,因此在MyComponent中声明当前Index页面的页面生命周期函数(onPageShow / onPageHide / onBackPress)。MyComponent和其子组件Child分别声明了各自的组件级别生命周期函数(aboutToAppear / onDidBuild/aboutToDisappear)。