【HarmonyOS 鸿蒙实战开发】全局自定义组件复用实现案例

---

📚往期笔录记录🔖：

🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

🔖记录一场鸿蒙开发岗位面试经历~

🔖持续更新中……

---

介绍

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

效果图预览

使用说明

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

实现思路

1. 使用List+Swiper实现Tabs页面切换。

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

2. 继承NodeController，实现makeNode，用于组件的创建或刷新，并在组件隐藏时（aboutToDisappear）回收组件。

   export class NodeItem extends NodeController {
   
   
     private callback: UpdaterCallback | null = null;
     ...
     // 父类方法，用于创建子组件
     makeNode(uiContext: UIContext): FrameNode | null