The lifecycle of arkui development framework components

ArkUI The development framework gives components a unique lifecycle approach , Here are two main situations ：

• System component life cycle

• Customize the lifecycle of the component

For system components , The life cycle approach is onAppear and onDisAppear ,

• onAppear： Callback of the component mounted from the component tree .

• onDisAppear： Components unloaded from the component tree return to .

A simple example is shown below ：

@Entry @Component struct Index {    @State textShow: boolean = false; //  Default state ​  build() {    Column() {      Column() {        if (this.textShow) {          Text(' mount / uninstall ')            .fontSize(22)            .onAppear(() => {              console.log(" ha-ha , I'm attached ")            })            .onDisAppear(() => {              console.log(" Sobbing , I was uninstalled ")            })        }      }      .width('100%')      .height(60)​      Button(this.textShow ? " uninstall " : " mount ")        .stateStyles({          pressed: {            .backgroundColor(Color.Pink) //  Set the style when clicking           }        })        .onClick(() => { //  Mount and unload in turn Text Components           this.textShow = !this.textShow;        })    }    .width('100%')    .height('100%')  }}

Customize the lifecycle of the component .

• Life cycle of components

  Use @Component Decorated components ,ArkUI The development framework will automatically give it a private lifecycle approach aboutToAppear() and aboutToDisappear() , They are used to inform developers of changes to the lifecycle of the custom component .

  • aboutToAppear： Function after creating a new instance of the custom component , In the execution of its build() Function before execution . It is allowed to change the state variable in this function , The changes will be implemented later build() Function .

  • aboutToDisappear： The function executes before the custom component destructs and consumes . Changing state variables in this function is not allowed , especially @Link Modification of variables can lead to unstable application behavior .

• The life cycle of a page

  A page is essentially a component , It's just that the page has an additional modifier for components @Entry, This modifier indicates that the current component is a page , It needs to be in config.json Make configuration in , In addition to the life cycle of components, pages , It also has its own unique lifecycle approach ：

  • onPageShow： Trigger once when the page is displayed , Including routing process 、 The application enters the front and back stage and other scenes , only @Entry Modified custom components take effect .

  • onPageHide： Trigger once when the page disappears , Including routing process 、 The application enters the front and back stage and other scenes , only @Entry Modified custom components take effect .

  • onBackPress： Triggered when the user clicks the back button , only @Entry Modified custom components take effect . This method returns boolean Type value , The explanation is as follows ：

    • return true It means that the page handles the return logic by itself , No page routing .

    • return false Indicates that the default return logic is used .

    • No return value will be used as false Handle .

The comparison of component life cycle production tables is as follows ：

One thing to watch out for , It is allowed to use Promise And asynchronous callback functions , For example, access to network resources , Timer setting, etc ; It is not allowed to use async await .