ArkUI 组件动态操作通过自定义 FrameNode 实现，允许在非 build 阶段预创建、添加、更新和卸载组件。相比传统声明式范式，FrameNode 减少内存开销，避免依赖收集，支持直接操作组件树实现局部刷新。核心流程包括创建自定义节点、实现 NodeController、构建 makeNode 方法及使用 NodeContainer 显示。生命周期管理涉及 makeNode、aboutToAppear 等关键方法，适用于性能敏感及动态内容场景。
在传统的声明式开发范式中，组件只能在 build() 生命周期中创建，这常常导致页面加载缓慢、用户体验不佳。ArkUI 框架为此引入了组件动态操作机制，允许开发者在非 build() 阶段进行组件的预创建、动态添加、更新和卸载。
核心价值：
组件预创建打破了声明式范式只能在 build() 中创建组件的限制。开发者可以在页面加载前的空闲时间（如动画执行过程）预创建组件并进行属性设置、布局计算等操作。当页面需要显示时，只需更新属性和布局，从而显著缩短页面响应时间。
使用声明式自定义组件时，每个节点都需要分配内存空间存储组件实例和状态变量，并执行依赖关系收集等操作，效率较低。FrameNode避免了这些开销：
在动态布局更新场景中，声明式范式依赖数据驱动的自动更新，伴随大量 diff 计算。对于复杂组件树（深度>30 层，包含 100-200 个组件），在 120Hz 刷新率下难以保持满帧运行。
FrameNode 扩展使框架能够自主掌控更新流程，实现高效的按需剪枝。对于特定业务的动态布局框架，可实现快速更新操作。
声明式范式难以直接调整组件树结构关系（如将子树从一个节点移到另一个节点），通常需要重新渲染整棵树。FrameNode 允许通过操作节点直接操控子树，实现局部渲染刷新，性能更优。
动态添加组件需要遵循以下标准流程：
准备需要挂载的节点，使用 @Builder 装饰器定义组件构建函数。
@Builder
function testBuilder(params: Params) {
Column() {
Text(params.text).fontSize(50).fontWeight(FontWeight.Bold)
}
}
继承 NodeController 抽象类，管理节点的创建、显示和更新。
class TextNodeController extends NodeController {
private textNode: BuilderNode<[Params]> | null = null;
private message: string = '';
constructor(message: string) {
super();
this.message = message;
}
makeNode(context: UIContext): FrameNode | null {
return null; // 待实现
}
}
创建 BuilderNode 实例并构建组件树，返回要显示的节点。
makeNode(context: UIContext): FrameNode | null {
// 创建 BuilderNode 实例
this.textNode = new BuilderNode(context);
// 构建组件树
this.textNode.build(wrapBuilder<[Params]>(testBuilder), newParams(this.message));
// 返回要显示的节点
return this.textNode.getFrameNode();
}
使用 NodeContainer 容器和对应的 NodeController 显示节点。
@Entry
@Component
struct Index {
private textNodeController: TextNodeController = new TextNodeController('hello');
build() {
Column() {
NodeContainer(this.textNodeController).width('100%').height(100)
}
}
}
通过条件控制语句将 NodeContainer 节点从界面上移除。
if (this.isShow) {
NodeContainer(this.textNodeController).width('100%').height(100)
}
Button('isShow').onClick(() => {
this.isShow = false; // 点击后移除节点
})
通过 NodeController 的 rebuild() 方法触发 makeNode() 回调，刷新 NodeContainer 上显示的节点。
class TextNodeController extends NodeController {
// ... 其他代码
replaceBuilderNode(newNode: BuilderNode<Object[]>) {
this.textNode = newNode;
this.rebuild(); // 重新调用 makeNode 方法
}
}
// 使用示例
Button('replaceNode').onClick(() => {
this.textNodeController.replaceBuilderNode(this.buildNewNode());
})
NodeController 用于控制和反馈对应 NodeContainer 上节点的行为，提供以下关键生命周期方法：
| 方法 | 调用时机 | 用途说明 |
|---|---|---|
| makeNode() | NodeContainer 绑定 NodeController 时或调用 rebuild() 时 | 必须重写，构建节点树并返回挂载节点 |
| aboutToResize() | NodeContainer 执行 Measure 时 | 获取节点布局大小，参数为 Size 对象 |
| aboutToAppear() | NodeContainer 触发 onAppear() 时 | 节点即将显示时的初始化操作 |
| aboutToDisappear() | NodeContainer 触发 onDisappear() 时 | 节点即将消失时的清理操作 |
| onTouchEvent() | NodeContainer 收到 Touch 事件时 | 处理触摸事件交互 |
| rebuild() | 需要刷新节点时手动调用 | 重新构建并更新节点 |
组件动态操作是 ArkUI 框架中提升性能与灵活性的关键技术，特别适用于：
最佳实践建议：
通过掌握组件动态操作技术，开发者可以显著提升 HarmonyOS 应用的性能和用户体验，实现更加灵活高效的 UI 开发。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online