【鸿蒙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、创建自界说节点

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

2. import { BuilderNode, FrameNode, NodeController } from '@kit.ArkUI';
4. class Params {
5.   text: string = 'Hello World';
6.   constructor(text: string) {
7.     this.text = text;
8.   }
9. }
11. @Builder
12. function buildText(params: Params) {
13.   Column() {
14.     Text(params.text)
15.       .fontSize(50)
16.       .fontWeight(FontWeight.Bold)
17.       .margin({bottom: 36})
18.   }
19. }

复制代码

3、实现NodeController

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

2. class TextNodeController extends NodeController {
3.   private textNode: BuilderNode<[Params]> | null = null;
4.   private message: string = '';
6.   constructor(message: string) {
7.     super();
8.     this.message = message;
9.   }
11.   makeNode(context: UIContext): FrameNode | null {
12.     return null;
13.   }
14. }

复制代码

4、实现NodeController的makeNode方法

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

2. class TextNodeController extends NodeController {
3.   private textNode: BuilderNode<[Params]> | null = null;
4.   private message: string = '';
6.   constructor(message: string) {
7.     super();
8.     this.message = message;
9.   }
11.   makeNode(context: UIContext): FrameNode | null {
12.     this.textNode = new BuilderNode(context);
13.     this.textNode.build(wrapBuilder<[Params]>(buildText), new Params(this.message));
14.     return this.textNode.getFrameNode();
15.   }
16. }

复制代码

5、表现自界说节点

表现自界说节点依靠于声明式渲染容器NodeContainer和对应的控制类NodeController。NodeController的makeNode方法返回的节点会表现在对应的NodeContainer中。由于makeNode须要返回一个FrameNode，因此假如预期表现BuilderNode，须要调用BuilderNode的getFrameNode方法来获取其根节点。具体代码如下：

2. @Entry
3. @Component
4. struct Index {
5.   @State message: string = "hello";
6.   private textNodeController: TextNodeController = new TextNodeController(this.message);
8.   build() {
9.     Row() {
10.       Column() {
11.         NodeContainer(this.textNodeController)
12.           .width('100%')
13.           .height(100)
14.           .backgroundColor('#FFF0F0F0')
15.       }
16.       .width('100%')
17.       .height('100%')
18.     }
19.     .height('100%')
20.   }
21. }

复制代码

6、更新自界说节点

更新自界说节点可以参考BuilderNode的update方法。