Before we begin, let's clarify the relationship between custom components and pages:
- Custom Component: @Component decorated UI unit, you can combine multiple system components to achieve UI reuse, you can call the component life cycle.
- Page: the UI page of the application. It can be composed of one or more custom components, the custom component decorated by @Entry is the entry component of the page, i.e. the root node of the page, a page has and can only have one @Entry. only the component decorated by @Entry can invoke the life cycle of the page.
The page lifecycle, i.e. the lifecycle of the component decorated by @Entry, provides the following lifecycle interfaces:
- onPageShow: triggered once every time the page is displayed, including the routing process, application into the foreground and other scenarios.
- onPageHide: triggered once every time the page is hidden, including the routing process, application entering the background and other scenarios.
- onBackPress: triggered when user clicks the back button.
The component lifecycle, i.e., the lifecycle of a custom component generally decorated with @Component, provides the following lifecycle interfaces:
- aboutToAppear: This interface is called when the component is about to appear, which is executed after creating a new instance of the custom component and before executing its build() function.
- onDidBuild: This interface is called back after the component build() function is executed. It is not recommended to change state variables, use animateTo, etc. in the onDidBuild function, which may lead to unstable UI performance.
- aboutToDisappear: the aboutToDisappear function is executed before the custom component destructs and destroys. Changing state variables in the aboutToDisappear function is not allowed, especially since @Link variable modifications may cause unstable application behavior.
The life cycle flow is shown in the following figure. The following figure shows the life cycle of the component (page) decorated by @Entry.
The following example shows the timing of a life cycle call:
//
import { router } from '@' ;
@Entry
@Component
struct MyComponent {
@State btnColor: string = "#FF007DFF";
// Only components decorated with @Entry can invoke the page's lifecycle
onPageShow() {
('Index onPageShow');
}
// Only components decorated with @Entry can invoke the page's lifecycle
onPageHide() {
('Index onPageHide'); }
}
// Only components decorated with @Entry can invoke the page lifecycle
onBackPress() {
('Index onBackPress'); }
= "#FFEE0606"; }
return true // Returning true means the page handles the return logic itself and does not route the page; returning false means it uses the default routing return logic and does not set the return value to be handled according to false
}
// Component lifecycle
aboutToAppear() {
('MyComponent aboutToAppear'); }
}
// Component lifecycle
onDidBuild() {
('MyComponent onDidBuild'); }
}
// Component lifecycle
aboutToDisappear() {
('MyComponent aboutToDisappear'); }
}
aboutToDisappear() { ('MyComponent aboutToDisappear'); }
Column() {
// If true, create the child component and execute Child aboutToAppear.
if () {
Child()
}
// If false, delete the Child child and execute Child aboutToDisappear.
Button('delete Child')
.margin(20)
.backgroundColor()
.onClick(() => {
= false; })
})
// push to page, execute onPageHide
Button('push to next page')
.onClick(() => {
({ url: 'pages/page' }); {
})
}
}
}
@Component
struct Child {
@State title: string = 'Hello World'; // Component lifecycle.
// Component lifecycle
aboutToDisappear() {
('[lifeCycle] Child aboutToDisappear'); }
}
// Component lifecycle
onDidBuild() {
('[lifeCycle] Child onDidBuild'); }
}
// Component lifecycle
aboutToAppear() {
('[lifeCycle] Child aboutToAppear'); }
}
aboutToAppear() { ('[lifeCycle] Child aboutToAppear'); }
Text()
.fontSize(50)
.margin(20)
.onClick(() => {
= 'Hello ArkUI'.
})
}
}
//
@Entry
@Component
struct page {
@State textColor: Color = ;
@State num: number = 0;; @Entry @Component struct page { @State textColor: Color = ;
onPageShow() {
= 5; @State: number = 0; onPageShow() { onPageShow()
}
onPageHide() {
("page onPageHide"); }
}
onBackPress() { // If you don't set the return value, it will be treated as false.
= ;
= 0; }
}
aboutToAppear() {
= ;
}
build() {
Column() {
Text(`num's value is: ${}`)
.fontSize(30)
.fontWeight()
.fontColor()
.margin(20)
.onClick(() => {
+= 5; })
})
}
.width('100%')
}
}
In the above example, the Index page contains two custom components, a MyComponent decorated by @Entry, which is also the entry component of the page, i.e., the root node of the page, and a Child, which is a child component of the MyComponent. Only nodes decorated by @Entry can enable page-level lifecycle methods, so the page lifecycle functions (onPageShow / onPageHide / onBackPress) for the current Index page are declared in MyComponent.MyComponent and its child component, Child, declare their respective MyComponent and its child component Child declare their own component-level lifecycle functions (aboutToAppear / onDidBuild / aboutToDisappear).
- The initialization process for an application cold start is：MyComponent aboutToAppear --> MyComponent build --> MyComponent onDidBuild--> Child aboutToAppear --> Child build --> Child onDidBuild --> Index onPageShow。
- Click "delete Child", the if binding will become false, and the Child aboutToDisappear method will be executed to delete the Child component.
- Click "push to next page", call the interface, jump to another page, the current Index page is hidden, execute the page lifecycle Index onPageHide. Here call the interface, the Index page is hidden, not destroyed, so only call onPageHide. After jumping to the new page, the process of initializing the life cycle of the new page is executed.
- If called, the current Index page is destroyed and the lifecycle flow executed will become: Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear.As mentioned above, the component is destroyed by taking the child tree off the component tree. The destruction of the component is done directly from the component tree, so the parent component's aboutToDisappear is called first, then the child component's aboutToDisappear is called, and then the lifecycle process of initializing a new page is performed.
- Clicking the Back button triggers the page lifecycle Index onBackPress, and triggering the return of a page causes the current Index page to be destroyed.
- Minimizing the application or the application going into the background triggers Index onPageHide. the current Index page is not destroyed, so it doesn't execute the aboutToDisappear of the component. the application goes back to the foreground and executes Index onPageShow.
- Exit the application，fulfillmentIndex onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。