页面和组件

组件用Component装饰的代码称为自定义组件页面Entry装饰的组件即页面的根节点

组件生命周期

aboutToAppear在创建自定义组件的新实例后在执行其build()函数之前执行。

允许在aboutToAppear函数中改变状态变量更改将在后续执行build()函数中生效。

aboutToDisappear在自定义组件析构销毁之前执行。

不允许在aboutToDisappear函数中改变状态变量特别是Link变量的修改可能会导致应用程序行为不稳定。

页面生命周期

onPageShow页面每次显示时触发一次包括路由过程、应用进入前台等场景仅Entry装饰的自定义组件生效。

onPageHide页面每次隐藏时触发一次包括路由过程、应用进入后台等场景仅Entry装饰的自定义组件生效。

onBackPress当用户点击返回按钮时触发仅Entry装饰的自定义组件生效。

返回true表示页面自己处理返回逻辑不进行页面路由返回false表示使用默认的路由返回逻辑不设置返回值按照false处理。

代码示例

string){Text(text).fontSize(18).fontColor(Color.Red).backgroundColor(#ccc).lineHeight(30).width(100%).textAlign(TextAlign.Center).onClick((){router.pushUrl({

url:

onPageShow;console.info(IndexComponent

{this.text

onPageHide;console.info(IndexComponent

onPageHide);}aboutToAppear(){this.text

aboutToAppear);}aboutToDisappear(){console.info(IndexComponent

{Column(){TextItem(this.text)if(this.showChildren){Child()}Button(修改children可见).onClick((){this.showChildren

Component

aboutToDisappear)}aboutToAppear()

{console.info(Child

{Text(this.title).fontSize(50).onClick(()

{this.title

可以看到的是我们定义text变量时赋值的‘111’在aboutToAppear中已经被修改为‘222’了最终渲染出来的就是‘222’

从日志中我们可以观察到aboutToDisappear的执行时机在onPageShow之前。

然后我们点击跳转一下页面离开页面

组件并未被销毁所以没有进入aboutToDisappear但是因为离开了页面所以进入了onPageHide。

当我们再次返回index页面进入页面

chidren子组件被渲染了出来也出发了子组件的aboutToAppear。

再次点击按钮销毁组件

将会触发子组件的销毁进入aboutToDisappear同时页面上的子组件也消失不见。

页面显示|ActivityA:onPageShow------

组件生命周期

|组件将要出现|CustomComponent:aboutToAppear

|组件的渲染和交互|用户按下返回按钮|ActivityA:onBackPress

|组件将要消失|CustomComponent:aboutToDisappear