安徽建设厅网站,开源低代码开发平台,免费虚拟主机代理,江西省水利水电建设集团招标网站文章目录 页面和自定义组件生命周期页面生命周期组件生命周期生命周期的调用时机 页面和自定义组件生命周期
生命周期流程如下图所示#xff0c;下图展示的是被Entry装饰的组件#xff08;首页#xff09;生命周期。
自定义组件和页面的关系#xff1a;
自定义组件下图展示的是被Entry装饰的组件首页生命周期。
自定义组件和页面的关系
自定义组件Component装饰的UI单元可以组合多个系统组件实现UI的复用可以调用组件的生命周期。页面即应用的UI页面。可以由一个或者多个自定义组件组成Entry装饰的自定义组件为页面的入口组件即页面的根节点一个页面有且仅能有一个Entry。只有被Entry装饰的组件才可以调用页面的生命周期。
页面生命周期
页面生命周期即被Entry装饰的组件生命周期提供以下生命周期接口
onPageShow页面每次显示时触发一次包括路由过程、应用进入前台等场景。onPageHide页面每次隐藏时触发一次包括路由过程、应用进入后台等场景。onBackPress当用户点击返回按钮时触发。
组件生命周期
组件生命周期即一般用Component装饰的自定义组件的生命周期提供以下生命周期接口
aboutToAppear组件即将出现时回调该接口具体时机为在创建自定义组件的新实例后在执行其build()函数之前执行。aboutToDisappear在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量特别是Link变量的修改可能会导致应用程序行为不稳定。
生命周期的调用时机
// Index.ets
import router from ohos.router;Entry
Component
struct MyComponent {State showChild: boolean true;// 只有被Entry装饰的组件才可以调用页面的生命周期onPageShow() {console.info(Index onPageShow);}// 只有被Entry装饰的组件才可以调用页面的生命周期onPageHide() {console.info(Index onPageHide);}// 只有被Entry装饰的组件才可以调用页面的生命周期onBackPress() {console.info(Index onBackPress);}// 组件生命周期aboutToAppear() {console.info(MyComponent aboutToAppear);}// 组件生命周期aboutToDisappear() {console.info(MyComponent aboutToDisappear);}build() {Column() {// this.showChild为true创建Child子组件执行Child aboutToAppearif (this.showChild) {Child()}// this.showChild为false删除Child子组件执行Child aboutToDisappearButton(delete Child).onClick(() {this.showChild false;})// push到Page2页面执行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页面的入口组件即页面的根节点 一个是Child是MyComponent的子组件。 只有Entry装饰的节点才可以使页面级别的生命周期方法生效所以MyComponent中声明了当前Index页面的页面生命周期函数。 MyComponent和其子组件Child也同时也声明了组件的生命周期函数
应用冷启动的初始化流程为 MyComponent aboutToAppear -- MyComponent build -- Child aboutToAppear -- Child build -- Child build执行完毕 -- MyComponent build执行完毕 -- Index onPageShow。 删除Child组件会执行Child aboutToDisappear方法。 调用router.pushUrl接口跳转到另外一个页面当前Index页面隐藏执行页面生命周期Index onPageHide。此处调用的是router.pushUrl接口Index页面被隐藏并没有销毁所以只调用onPageHide。跳转到新页面后执行初始化新页面的生命周期的流程。 最小化应用或者应用进入后台触发Index onPageHide。当前Index页面没有被销毁所以并不会执行组件的aboutToDisappear。应用回到前台执行Index onPageShow。 如果调用的是router.replaceUrl则当前Index页面被销毁执行的生命周期流程将变为Index onPageHide -- MyComponent aboutToDisappear -- Child aboutToDisappear。上文已经提到组件的销毁是从组件树上直接摘下子树所以先调用父组件的aboutToDisappear再调用子组件的aboutToDisappear然后执行初始化新页面的生命周期流程。 点击返回按钮触发页面生命周期Index onBackPress且触发返回一个页面后会导致当前Index页面被销毁。 退出应用执行Index onPageHide -- MyComponent aboutToDisappear -- Child aboutToDisappear。
