【鸿蒙HarmonyOS Next实战开发】实现组件动态创建和卸载-优化性能

一、简介

为了解决页面和组件加载缓慢的问题，ArkUI框架引入了动态操作功能，支持组件的预创建，并允许应用在运行时根据实际需求动态加载和渲染组件。

这些动态操作包括动态创建组件（即动态添加组件）和动态卸载组件（即动态删除组件）。

动态创建组件是指在build生命周期之外提前创建组件，这种方式不仅能节省组件创建时间，提升用户体验，还能将独立逻辑封装起来，助力应用的模块化开发。

而动态卸载组件则是对动态创建的组件进行卸载和删除操作。

二、组件预创建原理

在传统的声明式开发范式中，组件仅在build阶段被创建，开发者无法在其他生命周期阶段进行组件创建，这往往会导致页面加载速度较慢。

然而，ArkUI框架提供的UI动态操作支持组件的预创建，允许开发者在非build生命周期阶段提前创建组件。这些预创建的组件可以在页面加载时直接使用，从而大幅提升页面的响应速度。

如图1所示，利用组件预创建机制，可以在动画执行过程中的空闲时间进行组件预创建和属性设置。当动画结束后，再进行属性和布局的更新，从而节省组件创建时间，加快页面渲染速度。

图1组件预创建原理图

三、FrameNode自定义节点在动态布局场景下的优势

1.减少自定义组件创建开销

在声明式开发范式中，使用ArkUI的自定义组件对节点树中的每个节点进行定义时，往往会遇到节点创建效率低下的问题。

这是因为在ArkTS引擎中，每个节点都需要分配内存空间来存储应用程序的自定义组件和状态变量，并且在节点创建过程中还需执行组件ID、组件闭包以及状态变量之间的依赖关系收集等操作。相比之下，使用ArkUI的FrameNode可以避免创建自定义组件对象和状态变量对象，无需进行依赖收集，从而显著提升组件创建速度。

2.组件更新更快

在动态布局框架的更新场景中，通常存在一个由树形数据结构ViewModelA创建的UI组件树TreeA。当需要使用新的数据结构ViewModelB来更新TreeA时，尽管声明式开发范式可以实现数据驱动的自动更新，但这一过程中伴随着大量的diff操作。

对于ArkTS引擎而言，在对一个复杂组件树（深度超过30层，包含100至200个组件）执行diff算法时，几乎无法在120Hz的刷新率下保持满帧运行。然而，使用ArkUI的FrameNode扩展，框架能够自主掌控更新流程，实现高效的按需剪枝。特别是对于那些仅服务于少数特定业务的动态布局框架，利用这一扩展可以实现快速的更新操作。

3.直接操作组件树

在声明式开发范式中，组件树结构更新操作较为困难。例如，将组件树中的一个子树从当前子节点完整移到另一个子节点时，声明式开发范式无法直接调整组件实例的结构关系，只能通过重新渲染整棵组件树来实现。

而使用ArkUI的FrameNode扩展，则可以通过操作FrameNode轻松操控该子树，将其移植到另一个节点，从而实现局部渲染刷新，性能更优。

四、组件动态添加、更新和删除

1、动态添加组件

动态添加组件的过程包括以下步骤：

创建自定义节点。
实现NodeController，用于管理自定义节点的创建、显示、更新等操作，并负责将自定义节点挂载到NodeContainer上。
实现NodeController的makeNode方法，该方法会在NodeController实例绑定NodeContainer时被回调，并将返回的节点挂载至NodeContainer。
使用NodeContainer显示自定义节点。

2、创建自定义节点

首先，准备好需要挂载的节点，代码如下所示：

TypeScript 复制代码

import { BuilderNode, FrameNode, NodeController } from '@kit.ArkUI';

class Params {
  text: string = 'Hello World';
  constructor(text: string) {
    this.text = text;
  }
}

@Builder
function buildText(params: Params) {
  Column() {
    Text(params.text)
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
      .margin({bottom: 36})
  }
}

3、实现NodeController

NodeController是一个抽象类，需要继承并实现它，代码如下所示：

TypeScript 复制代码

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;
  }
}

4、实现NodeController的makeNode方法

首先，使用构造函数创建BuilderNode实例。创建BuilderNode对象时，必须传入对应的UIContext对象。如果BuilderNode作为RenderNode的子节点存在，则需要设置RenderOptions的selfIdealSize属性。然后，使用BuilderNode的build方法构建组件树。build()方法需要传入两个参数：第一个参数是通过wrapBuilder()封装的全局@Builder方法；第二个参数是对应的@Builder方法所需的参数对象。如果@Builder方法不带参数或者存在默认参数，则build()的第二个参数可以省略。

TypeScript 复制代码

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 {
    this.textNode = new BuilderNode(context);
    this.textNode.build(wrapBuilder<[Params]>(buildText), new Params(this.message));
    return this.textNode.getFrameNode();
  }
}

5、显示自定义节点

显示自定义节点依赖于声明式渲染容器NodeContainer和对应的控制类NodeController。NodeController的makeNode方法返回的节点会显示在对应的NodeContainer中。由于makeNode需要返回一个FrameNode，因此如果预期显示BuilderNode，需要调用BuilderNode的getFrameNode方法来获取其根节点。详细代码如下：

TypeScript 复制代码

@Entry
@Component
struct Index {
  @State message: string = "hello";
  private textNodeController: TextNodeController = new TextNodeController(this.message);

  build() {
    Row() {
      Column() {
        NodeContainer(this.textNodeController)
          .width('100%')
          .height(100)
          .backgroundColor('#FFF0F0F0')
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

6、更新自定义节点

更新自定义节点可以参考BuilderNode的update方法。