【HarmonyOS实战开发】鸿蒙中动态创建组件

概述

• 什么是动态创建组件

所谓的动态创建组件就是在运行时根据实际需要渲染相应的组件, 可以 动态创建组件（动态添加组件）、动态卸载组件（动态删除组件）等操作

• 为何需要使用动态化的方式创建组件.

动态创建组件指在非build生命周期中进行组件创建，即在build生命周期前提前创建组件。通过动态创建组件，开发者不但可以节省组件创建的时间，提升用户体验，还可以将独立的逻辑进行封装，开发者能更加灵活地管理组件，有助于应用模块化开发

比较在build中创建组件和通过动态创建组件的区别

组件在build环节中被创建，开发者无法在其他生命周期阶段进行组件的创建，从而引起页面加载慢等问题

动态操作支持组件的预创建。组件预创建可以满足开发者在非build生命周期中进行组件创建，创建后的组件可以进行属性设置、布局计算等操作。之后在页面加载时进行使用，可以极大提升页面响应速度

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

实现

创建动态组件

实现这个功能的大致步骤如下

0. 通过@Builder的方式创建用于渲染的组件
1. 提供一个类, 该类需要继承NodeController, 同时实现父类中的MakeNode方法, 该方法用于提供具体渲染的节点
2. 在调用该组件的地方创建对应的实例, 然后关联到container中.

• CustomText.ets 该文件提供组件, 以及NodeController子类

`// 用于渲染的节点, 为了更加的通用, 可以传递参数
@Builder
function buildText(params: string) {
 Column() {
 Text(params)
 .fontSize(50)
 .fontWeight(FontWeight.Bold)
 .margin({ bottom: 36 })
 .onClick(() => {
 promptAction.showToast({ message: '我触发了' })
 })
 }
}

// 后续container中需要的实例对象
export class TextNodeController extends NodeController {
 // private text: Params = new Params('')
 private text: string = ''

 constructor(param: string) {
 // 因为有了继承, 一定要调用super()
 super()
 this.text = param
 }

 // 在挂载时触发的逻辑, 需要提供一个具体的node
 makeNode(uiContext: UIContext): FrameNode | null {
 // 通过一个BuilderNode对我们定义的全局builder函数进行封装
 const textNode = new BuilderNode<[string]>(uiContext)
 textNode.build(wrapBuilder<[string]>(buildText), this.text)
 return textNode.getFrameNode()
 }
}`