ArkUI Deep Dive: Lifecycle, FrameNode, LazyForEach & Rendering

Component Lifecycle

Custom components annotated with @Component go through four main lifecycle stages:

aboutToAppear : the component instance is created but the build function has not run yet; use it to initialize state or start network requests.

build : defines the UI structure; this is not a callback but the declarative definition of the component.

onDidBuild : runs after build finishes and the UI tree nodes are created; suitable for non‑layout‑affecting follow‑up work.

aboutToDisappear : the component is about to be destroyed; clean up timers, cancel subscriptions, and release resources.

Entry components ( @Entry) have additional hooks: onPageShow: page becomes visible (foreground or route push). onPageHide: page becomes invisible (background or route pop). onBackPress: triggered by the physical back button.

FrameNode

FrameNode

is ArkUI's low‑level node manipulation interface, typically used in C‑API or advanced wrappers. It bypasses the higher‑level @Component abstraction, allowing direct control of the render tree for performance‑critical scenarios such as game engine integration or large dynamic layout frameworks.

Problem solved : reduces overhead from state management and object creation.

Typical use cases : custom chart libraries, dynamic DSL rendering engines.

LazyForEach

LazyForEach

creates child components on demand based on the visible region of a scrolling container (List/Grid). Items that scroll out of the cached range are destroyed or placed into a reuse pool.

keyGenerator : generates a unique identifier for each data item. ArkUI uses the key to detect data changes and item movement.

Risk : duplicate keys cause rendering errors; using volatile keys such as index or Date.now() prevents reuse and severely degrades performance.

ArkUI Rendering Process

UI Description : execute the build function written in ArkTS to produce a UI tree.

Diff Algorithm : compare the new UI tree with the previous one (skipped on first render) to find changed nodes.

Layout :

Measure : calculate each component's size.

Place : determine each component's position.

Render : generate drawing commands.

Rasterization : the GPU executes the drawing commands and displays the result on screen.

Optimization tip : minimize the frequency of Layout and Render triggers, for example by isolating updates with @Component boundaries.

Custom Measure and Layout

Developers can implement custom layout logic using the onMeasureSize and onPlaceChildren callbacks (or a C‑API custom node).

onMeasureSize(selfLayoutInfo, children[], constraint) : receives parent constraints, measures all children, and returns the component's own size.

onPlaceChildren(selfLayoutInfo, children[], constraint) : after measuring, sets each child's coordinates (x, y) based on the calculated sizes.

This enables complex layouts such as a custom FlowLayout that are not provided by the framework.

Event Dispatch Mechanism

ArkUI uses a bubbling model for touch events.

Hit Test : determines which component lies under the touch point.

Dispatch : the event is first delivered to the target component.

Bubble : if the target does not consume the event (returns false or has no handler), the event propagates upward to parent components until handled or reaching the root.

To stop propagation, call event.stopPropagation() inside the event callback.

Property Animation vs. Explicit Animation

Property Animation ( .animation(...) ) :

Binding: chained directly after a component property. Trigger: automatically runs when the bound property (e.g., width, opacity) changes. Use case: simple single‑property transitions.

Explicit Animation ( animateTo({ params }, () => { ... }) ) :

Binding: global function call. Trigger: any UI changes caused by state updates inside the provided closure are animated. Use case: complex animations involving multiple components or properties, or state‑driven animations.

XComponent

XComponent

is ArkUI's container for rendering native content (C++/EGL/OpenGL/Vulkan). It provides an independent surface that allows the native layer to draw directly, bypassing ArkUI's rendering pipeline for maximum performance.

Scenarios : game rendering, map engines, video playback, camera preview.

Features : dedicated surface, high‑performance native drawing.