HarmonyOS开发案例：创建全局自定义组件复用池-BuilderNode-EW帮帮网

介绍

本示例是全局自定义组件复用实现的示例代码，主要讲解如何通过BuilderNode创建全局的自定义组件复用池，实现跨页面的组件复用。

效果图预览

使用说明

继承NodeController，实现可复用的NodeItem组件。
使用单例模式创建NodePool组件复用池，根据传入的type类型查找复用池中是否存在可复用的组件，如果有则直接使用，如果没有则重新创建。
使用NodeContainer组件占位，从复用池NodePool中获取组件加载到页面中。

实现思路

使用List+Swiper实现Tabs页面切换，详细代码请参考BuilderNodePoolDemo.ets。

...
Swiper(this.swiperController) {
  LazyForEach(this.array, () => {
    TabNode()
  }, (title: string) => title)
}
...

继承NodeController，实现makeNode，用于组件的创建或刷新，并在组件隐藏时（aboutToDisappear）回收组件，详细代码请参考BuilderNodePool.ets中的NodeItem实现。

export class NodeItem extends NodeController {
  private callback: UpdaterCallback | null = null;
  ...
  // 父类方法，用于创建子组件
  makeNode(uiContext: UIContext): FrameNode | null {
    if (!this.node) {
      this.node = new BuilderNode(uiContext);
      this.node.build(this.builder, this.data);
    } else {
      this.node.update(this.data);
      this.update(this.data);
    }
    return this.node.getFrameNode();
  }
  // 组件隐藏时回收组件
  aboutToDisappear(): void {
    NodePool.getInstance().recycleNode(this.type, this);
  }
  ...
}

使用单例模式实现复用池，应用内统一管理组件复用。添加getNode方法，根据传入的type参数，获取对应的Node组件，如果未找到，则重新创建，实现recycleNode方法，回收Node组件，详细代码请参考BuilderNodePool.ets中的NodePool实现。

...
export class NodePool {
  private static instance: NodePool;
  ...

  private constructor() {
    this.nodePool = new HashMap();
    this.nodeHook = new HashSet();
    this.idGen = 0;
  }
  // 单例模式，可以全局统一管理
  public static getInstance() {
    if (!NodePool.instance) {
      NodePool.instance = new NodePool();
    }
    return NodePool.instance;
  }
  ...
  public getNode(type: string, data: ESObject, builder: WrappedBuilder<ESObject>): NodeItem | undefined {
    let node: NodeItem | undefined = this.nodePool.get(type)?.pop();
    if (!node) {
      node = new NodeItem(builder, data, type);
      this.nodeHook.add(node);
    } else {
      node.data = data;
    }
    node.data.callback = (callback: UpdaterCallback) => {
      if (node) {
        node.registerUpdater(callback);
      }
    }
    return node;
  }
  // 回收Node组件，提供给下次复用
  public recycleNode(type: string, node: NodeItem) {
    let nodeArray: Array<NodeItem> = this.nodePool.get(type);
    if (!nodeArray) {
      nodeArray = new Array();
      this.nodePool.set(type, nodeArray);
    }
    nodeArray.push(node);
  }
}
...

使用NodeContainer占位轮播图组件和瀑布流子组件的位置，并通过NodePool获取组件加载到页面中，详细代码请参考TabNode.ets。

...
FlowItem() {
  NodeContainer(NodePool.getInstance().getNode('reuse_type_', {
    item: item,
    itemHeight: this.itemHeightArray[index % 100],
    itemColor: this.colors[index % 5],
    updater: (item: ViewItem) => {
      this.fillNewData(item);
    },
    callback: null
  }, flowItemWrapper))
}
...

高性能知识点

通过BuilderNode实现全局自定义组件复用池，解决常规复用中只能在父组件中复用的问题，实现组件的跨父组件、跨页面复用，减少页面的创建耗时，优化应用性能。

工程结构&模块类型

customreusablepool                                 // har类型
|---constants                                      // 常量
|---|---Constants.ets                              // 常量类
|---data                                           // 数据类型
|---|---MockData.ets                               // 模拟数据
|---|---TitleBean.ets                              // 标题类
|---|---TitleDataSource.ets                        // 标题懒加载数据类   
|---|---ViewItem.ets                               // 瀑布流子组件数据类
|---|---WaterFlowDataSource.ets                    // 瀑布流子组件懒加载数据类
|---pages                                          // 页面   
|---|---BuilderNodePoolDemo.ets                    // 全局自定义组件复用池页面               
|---utils                                          // 工具类
|---|---BuilderNodePool.ets                        // 自定义组件复用池
|---view                                           // 组件   
|---|---FlowItemNode.ets                           // 自定义组件复用池的瀑布流子组件
|---|---TabNode.ets                                // 自定义组件复用池的Swiper页面   
|---|---TitleView.ets                              // 标题View   
|---|---SwiperView.ets                             // 瀑布流中的轮播图

最后

小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为资料太多，太杂，教授的人也多，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

为了确保高效学习，建议规划清晰的学习路线，涵盖以下关键阶段：

点击→【纯血版鸿蒙全套最新学习资料】希望这一份鸿蒙学习资料能够给大家带来帮助~

鸿蒙（HarmonyOS NEXT）最新学习路线

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

点击→纯血版全套鸿蒙HarmonyOS学习资料

2.视频学习资料+学习PDF文档

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、（南向驱动、嵌入式等）鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

HarmonyOS Next 最新全套视频教程