品牌建设实施细则,移动端网站如何优化,绍兴网站推广,如何免费域名注册前言
在前面我们通过如何创建自定义组件一文知道了如何如何自定义组件以及自定义组件的相关注意事项#xff0c;接下来我们认识一下页面和自定义组件生命周期。
自定义组件和页面的关系
在开始之前#xff0c;我们先明确自定义组件和页面的关系
自定义组件#xff1a;Co…前言
在前面我们通过如何创建自定义组件一文知道了如何如何自定义组件以及自定义组件的相关注意事项接下来我们认识一下页面和自定义组件生命周期。
自定义组件和页面的关系
在开始之前我们先明确自定义组件和页面的关系
自定义组件Component装饰的UI单元可以组合多个系统组件实现UI的复用。页面即应用的UI页面。可以由一个或者多个自定义组件组成Entry装饰的自定义组件为页面的入口组件即页面的根节点一个页面有且仅能有一个Entry。只有被Entry装饰的组件才可以调用页面的生命周期。
生命周期
下面依次介绍页面和组件的生命周期函数。
1:页面生命周期
页面生命周期即被Entry装饰的组件生命周期提供以下生命周期接口
onPageShow页面每次显示时触发。
onPageShow?(): void页面每次显示时触发一次包括路由过程、应用进入前台等场景仅Entry装饰的自定义组件生效。
onPageHide页面每次隐藏时触发一次。
onPageHide?(): void页面每次隐藏时触发一次包括路由过程、应用进入前后台等场景仅Entry装饰的自定义组件生效。
onBackPress当用户点击返回按钮时触发。
onBackPress?(): void当用户点击返回按钮时触发仅Entry装饰的自定义组件生效。
onPageShowonPageHideonBackPress生命周期简单使用列子如下
// xxx.ets
Entry
Component
struct IndexComponent {State textColor: Color Color.Black;onPageShow() {this.textColor Color.Blue;console.info(IndexComponent onPageShow);}onPageHide() {this.textColor Color.Transparent;console.info(IndexComponent onPageHide);}onBackPress() {this.textColor Color.Red;console.info(IndexComponent onBackPress);}build() {Column() {Text(Hello World).fontColor(this.textColor).fontSize(30).margin(30)}.width(100%)}
}2:组件生命周期
组件生命周期即一般用Component装饰的自定义组件的生命周期提供以下生命周期接口
aboutToAppear组件即将出现时回调该接口具体时机为在创建自定义组件的新实例后在执行其build()函数之前执行。
aboutToAppear?(): voidaboutToAppear函数在创建自定义组件的新实例后在执行其build()函数之前执行。允许在aboutToAppear函数中改变状态变量更改将在后续执行build()函数中生效。 注意⚠️从API version 9开始该接口支持在ArkTS卡片中使用。 aboutToDisappear在自定义组件即将析构销毁时执行。
aboutToDisappear?(): voidaboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量特别是Link变量的修改可能会导致应用程序行为不稳定。 注意⚠️从API version 9开始该接口支持在ArkTS卡片中使用。 生命周期流程如下图所示下图展示的是被Entry装饰的组件生命周期。 根据上面的流程图我们从自定义组件的初始创建、重新渲染和删除来详细解释。
自定义组件的创建和渲染流程
自定义组件的创建自定义组件的实例由ArkUI框架创建。初始化自定义组件的成员变量通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量初始化顺序为成员变量的定义顺序。如果开发者定义了aboutToAppear则执行aboutToAppear方法。在首次渲染的时候执行build方法渲染系统组件如果子组件为自定义组件则创建自定义组件的实例。在执行build()函数的过程中框架会观察每个状态变量的读取状态将保存两个map
a: 状态变量 - UI组件包括ForEach和if。 b: UI组件 - 此组件的更新函数即一个lambda方法作为build()函数的子集创建对应的UI组件并执行其属性方法示意如下。
build() {...this.observeComponentCreation(() {Button.create();})this.observeComponentCreation(() {Text.create();})...
}当应用在后台启动时此时应用进程并没有销毁所以仅需要执行onPageShow。
自定义组件重新渲染
当事件句柄被触发比如设置了点击事件即触发点击事件改变了状态变量时或者LocalStorage / AppStorage中的属性更改并导致绑定的状态变量更改其值时
框架观察到了变化将启动重新渲染。根据框架持有的两个map自定义组件的创建和渲染流程中第4步框架可以知道该状态变量管理了哪些UI组件以及这些UI组件对应的更新函数。执行这些UI组件的更新函数实现最小化更新。
自定义组件的删除
如果if组件的分支改变或者ForEach循环渲染中数组的个数改变组件将被删除
在删除组件之前将调用其aboutToDisappear生命周期函数标记着该节点将要被销毁。ArkUI的节点删除机制是后端节点直接从组件树上摘下后端节点被销毁对前端节点解引用当前端节点已经没有引用时将被JS虚拟机垃圾回收。自定义组件和它的变量将被删除如果其有同步的变量比如Link、Prop、StorageLink将从同步源上取消注册。
不建议在生命周期aboutToDisappear内使用async await如果在生命周期的aboutToDisappear使用异步操作Promise或者回调方法自定义组件将被保留在Promise的闭包中直到回调方法被执行完这个行为阻止了自定义组件的垃圾回收。
以下示例展示了生命周期的调用时机
// 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(create or 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。点击“delete Child”if绑定的this.showChild变成false删除Child组件会执行Child aboutToDisappear方法。点击“push to next page”调用router.pushUrl接口跳转到另外一个页面当前Index页面隐藏执行页面生命周期Index onPageHide。此处调用的是router.pushUrl接口Index页面被隐藏并没有销毁所以只调用onPageHide。跳转到新页面后执行初始化新页面的生命周期的流程。如果调用的是router.replaceUrl则当前Index页面被销毁执行的生命周期流程将变为Index onPageHide -- MyComponent aboutToDisappear -- Child aboutToDisappear。上文已经提到组件的销毁是从组件树上直接摘下子树所以先调用父组件的aboutToDisappear再调用子组件的aboutToDisappear然后执行初始化新页面的生命周期流程。点击返回按钮触发页面生命周期Index onBackPress且触发返回一个页面后会导致当前Index页面被销毁。最小化应用或者应用进入后台触发Index onPageHide。当前Index页面没有被销毁所以并不会执行组件的aboutToDisappear。应用回到前台执行Index onPageShow。退出应用执行Index onPageHide -- MyComponent aboutToDisappear -- Child aboutToDisappear。
