1# Page and Custom Component Lifecycle 2 3 4Before we dive into the page and custom component lifecycle, it would be helpful to learn the relationship between custom components and pages. 5 6 7- Custom component: \@Component decorated UI unit, which can combine multiple built-in components for component reusability. 8 9- Page: UI page of an application. A page can consist of one or more custom components. A custom component decorated with \@Entry is used as the default entry component of the page. Exactly one component can be decorated with \@Entry in a single source file. Only components decorated by \@Entry can call the lifecycle callbacks of a page. 10 11 12The following lifecycle callbacks are provided for the lifecycle of a page, that is, the lifecycle of a custom component decorated with \@Entry: 13 14 15- [onPageShow](../reference/arkui-ts/ts-custom-component-lifecycle.md#onpageshow): Invoked when the page is displayed. 16 17- [onPageHide](../reference/arkui-ts/ts-custom-component-lifecycle.md#onpagehide): Invoked when the page is hidden. 18 19- [onBackPress](../reference/arkui-ts/ts-custom-component-lifecycle.md#onbackpress): Invoked when the user clicks the Back button. 20 21 22The following lifecycle callbacks are provided for the lifecycle of a custom component, which is one decorated with \@Component: 23 24 25- [aboutToAppear](../reference/arkui-ts/ts-custom-component-lifecycle.md#abouttoappear): Invoked when the custom component is about to appear. Specifically, it is invoked after a new instance of the custom component is created and before its **build** function is executed. 26 27- [aboutToDisappear](../reference/arkui-ts/ts-custom-component-lifecycle.md#abouttodisappear): Invoked before the destructor of the custom component is consumed. 28 29 30The following figure shows the lifecycle of a component (home page) decorated with \@Entry. 31 32 33 34 35 36Based on the preceding figure, let's look into the initial creation, re-rendering, and deletion of a custom component. 37 38 39## Custom Component Creation and Rendering 40 411. Custom component creation: An instance of a custom component is created by the ArkUI framework. 42 432. Initialization of custom component member variables: The member variables are initialized with locally defined default values or component constructor parameters. The initialization happens in the document order, which is the order in which the member variables are defined. 44 453. If defined, the component's **aboutToAppear** callback is invoked. 46 474. On initial render, the **build** function of a component is executed for rendering. The rendering creates instances of further child components. While executing the **build** function, the framework observes read access on each state variable and then constructs two mapping tables: 48 1. State variable -> UI component (including **ForEach** and **if**) 49 2. UI component -> Update function for this component, which is a lambda. As a subset of the **build** function, the lambda creates one UI component and executes its attribute methods. 50 51 52 ```ts 53 build() { 54 ... 55 this.observeComponentCreation(() => { 56 Button.create(); 57 }) 58 59 this.observeComponentCreation(() => { 60 Text.create(); 61 }) 62 ... 63 } 64 ``` 65 66 67When the application is started in the background, since the application process is not destroyed, only the **onPageShow** callback is invoked. 68 69 70## Custom Component Re-rendering 71 72When an event handle is triggered (for example, the click event is triggered), the state variable of the component is changed, or the attribute in LocalStorage or AppStorage is changed, which causes the value of the linked state variable to be changed. 73 74 751. The framework observes the variable change and marks the component for re-rendering. 76 772. Using the two mapping tables created in step 4 of the custom component creation and rendering process, the framework knows which UI components are managed by the state variable and the update functions corresponding to these UI components. With this knowledge, the framework executes only the update functions of these UI components. 78 79 80## Custom Component Deletion 81 82A custom component is deleted when the branch of the **if** statement or the number of arrays in **ForEach** changes. 83 84 851. Before the component is deleted, the **aboutToDisappear** callback is invoked to mark the component for deletion. The component deletion mechanism of ArkUI is as follows: (1) The backend component is directly removed from the component tree and destroyed; (2) The reference to the destroyed component is released from the frontend components; (3) The JS Engine garbage collects the destroyed component. 86 872. The custom component and all its variables are deleted. Any variables linked to this component, such as [@Link](arkts-link.md), [@Prop](arkts-prop.md), or [@StorageLink](arkts-appstorage.md#storagelink) decorated variables, are unregistered from their [synchronization sources](arkts-state-management-overview.md#basic-concepts). 88 89 90Use of **async await** is not recommended inside the **aboutToDisappear** callback. In case of an asynchronous operation (a promise or a callback) being started from the **aboutToDisappear** callback, the custom component will remain in the Promise closure until the function has been called, which prevents the component from being garbage collected. 91 92 93The following example when the lifecycle callbacks are invoked: 94 95 96 97```ts 98// Index.ets 99import router from '@ohos.router'; 100 101@Entry 102@Component 103struct MyComponent { 104 @State showChild: boolean = true; 105 106 // Only components decorated by @Entry can call the lifecycle callbacks of a page. 107 onPageShow() { 108 console.info('Index onPageShow'); 109 } 110 // Only components decorated by @Entry can call the lifecycle callbacks of a page. 111 onPageHide() { 112 console.info('Index onPageHide'); 113 } 114 115 // Only components decorated by @Entry can call the lifecycle callbacks of a page. 116 onBackPress() { 117 console.info('Index onBackPress'); 118 } 119 120 // Component lifecycle 121 aboutToAppear() { 122 console.info('MyComponent aboutToAppear'); 123 } 124 125 // Component lifecycle 126 aboutToDisappear() { 127 console.info('MyComponent aboutToDisappear'); 128 } 129 130 build() { 131 Column() { 132 // When this.showChild is true, the Child component is created, and Child aboutToAppear is invoked. 133 if (this.showChild) { 134 Child() 135 } 136 // When this.showChild is false, the Child component is deleted, and Child aboutToDisappear is invoked. 137 Button('delete Child').onClick(() => { 138 this.showChild = false; 139 }) 140 // Because of the pushing from the current page to Page2, onPageHide is invoked. 141 Button('push to next page') 142 .onClick(() => { 143 router.pushUrl({ url: 'pages/Page2' }); 144 }) 145 } 146 147 } 148} 149 150@Component 151struct Child { 152 @State title: string = 'Hello World'; 153 // Component lifecycle 154 aboutToDisappear() { 155 console.info('[lifeCycle] Child aboutToDisappear') 156 } 157 // Component lifecycle 158 aboutToAppear() { 159 console.info('[lifeCycle] Child aboutToAppear') 160 } 161 162 build() { 163 Text(this.title).fontSize(50).onClick(() => { 164 this.title = 'Hello ArkUI'; 165 }) 166 } 167} 168``` 169 170 171In the preceding example, the **Index** page contains two custom components. One is **MyComponent** decorated with \@Entry, which is also the entry component (root node) of the page. The other is **Child**, which is a child component of **MyComponent**. Only components decorated by \@Entry can call the lifecycle callbacks of a page.Therefore, the page lifecycle callbacks of the **Index** page are declared in **MyComponent**. **MyComponent** and its child components also declare the lifecycle callbacks of the respective component. 172 173 174- The initialization process of application cold start is as follows: MyComponent aboutToAppear -> MyComponent build -> Child aboutToAppear -> Child build -> Child build execution completed -> MyComponent build execution completed -> Index onPageShow. 175 176- When **delete Child** is clicked, the value of **this.showChild** linked to **if** changes to **false**. As a result, the **Child** component is deleted, and the **Child aboutToDisappear** callback is invoked. 177 178 179- When **push to next page** is clicked, the **router.pushUrl** API is called to jump to the next page. As a result, the **Index** page is hidden, and the **Index onPageHide** callback is invoked. As the called API is **router.pushUrl**, which results in the Index page being hidden, but not destroyed, only the **onPageHide** callback is invoked. After a new page is displayed, the process of initializing the lifecycle of the new page is executed. 180 181- If **router.replaceUrl** is called, the **Index** page is destroyed. In this case, the execution of lifecycle callbacks changes to: Index onPageHide -> MyComponent aboutToDisappear -> Child aboutToDisappear. As aforementioned, a component is destroyed by directly removing it from the component tree. Therefore, **aboutToDisappear** of the parent component is called first, followed by **aboutToDisAppear** of the child component, and then the process of initializing the lifecycle of the new page is executed. 182 183- When the Back button is clicked, the **Index onBackPress** callback is invoked. When the application is minimized or switched to the background, the **Index onPageHide** callback is invoked. The application is not destroyed in these two states. Therefore, the **aboutToDisappear** callback of the component is not executed. When the application returns to the foreground, the **Index onPageShow** callback is invoked. 184 185 186- When the application exits, the following callbacks are executed in order: Index onPageHide -> MyComponent aboutToDisappear -> Child aboutToDisappear. 187
