HarmonyOS开发实战（ Beta5版）组件复用总览

组件复用总览

组件复用是优化用户界面性能，提升应用流畅度的一种核心策略，它通过复用已存在的组件节点而非创建新的节点，大幅度降低了因频繁创建与销毁组件带来的性能损耗，从而确保UI线程的流畅性与响应速度。组件复用针对的是自定义组件，只要发生了相同自定义组件销毁和再创建的场景，都可以使用组件复用。

本文系统地描述了六种复用类型及其应用场景，帮助开发者更好地理解和实施组件复用策略以优化应用性能。GitCode - 全球开发者的开源社区,开源代码托管平台

关于组件复用的原理机制可以参考资料组件复用原理机制，便于理解本文内容。

复用类型总览

复用类型描述复用思路参考文档
标准型复用组件之间布局完全相同标准复用组件复用实践
有限变化型复用组件之间有不同，但是类型有限使用reuseId或者独立成两个自定义组件组件复用四板斧
组合型复用组件之间有不同，情况非常多，但是拥有共同的子组件将复用组件改为Builder，让内部子组件相互之间复用组合型组件复用指导
全局型组件可在不同的父组件中复用，并且不适合使用@Builder使用BuilderNode自定义复用组件池，在整个应用中自由流转全局自定义组件复用实现
嵌套型复用组件的子组件的子组件存在差异采用化归思想将嵌套问题转化为上面四种标准类型来解决/
无法复用型组件之间差别很大，规律性不强，子组件也不相同不建议使用组件复用/

各个复用类型详解

下文为了方便描述，以一个滑动列表的场景为例，将要复用的自定义组件如ListItem的内容组件，叫做复用组件，把它子级的自定义组件叫做子组件，把复用组件上层的自定义组件叫做父组件。为了更直观，下面每一种复用类型都会通过简易的图形展示组件的布局方式，并且为了便于分别，布局相同的子组件使用同一种形状表示。

标准型

normal

这是一个标准的组件复用场景，一个滚动容器内的复用组件布局相同，只有数据不同。这种类型的组件复用可以直接参考资料组件复用实践。

应用场景案例

normal_case

有限变化型

limited

这种类型中复用组件之间存在不同，但是类型有限。如上图所示，容器内的复用组件内部的子组件不一样，但可总结为两种类型，类型 1由三个子组件 A 进行布局拼接而成，类型 2由子组件 B、子组件 C 和子组件 D 进行布局拼接而成。

此时存在以下两种应对措施：

  • 类型1和类型2业务逻辑不同：建议将两种类型的组件使用两个不同的自定义组件，分别进行复用。此时组件复用池内的状态如下图所示，复用组件 1 和复用组件 2 处于不同的复用 list 中。

limited_first_method_cache

实现方式可参考以下示例代码：

  1. class MyDataSource implements IDataSource {
  2.   // ...
  3. }
  4.  
  5. @Entry
  6. @Component
  7. struct Index {
  8.   private data: MyDataSource = new MyDataSource();
  9.  
  10.   aboutToAppear() {
  11.     for (let i = 0; i < 1000; i++) {
  12.       this.data.pushData(i);
  13.     }
  14.   }
  15.  
  16.   build() {
  17.     Column() {
  18.       List({ space: 10 }) {
  19.         LazyForEach(this.data, (item: number) => {
  20.           ListItem() {
  21.             if (item % 2 === 0) {
  22.               ReusableComponentOne({ item: item.toString() })
  23.             } else {
  24.               ReusableComponentTwo({ item: item.toString() })
  25.             }
  26.           }
  27.           .backgroundColor(Color.Orange)
  28.           .width('100%')
  29.         }, (item: number) => item.toString())
  30.       }
  31.       .cachedCount(2)
  32.     }
  33.   }
  34. }
  35.  
  36. @Reusable
  37. @Component
  38. struct ReusableComponentOne {
  39.   @State item: string = '';
  40.  
  41.   aboutToReuse(params: ESObject) {
  42.     this.item = params.item;
  43.   }
  44.  
  45.   build() {
  46.     Column() {
  47.       Text(`Item ${this.item} ReusableComponentOne`)
  48.         .fontSize(20)
  49.         .margin({ left: 10 })
  50.     }.margin({ left: 10, right: 10 })
  51.   }
  52. }
  53.  
  54. @Reusable
  55. @Component
  56. struct ReusableComponentTwo {
  57.   @State item: string = '';
  58.  
  59.   aboutToReuse(params: ESObject) {
  60.     this.item = params.item;
  61.   }
  62.  
  63.   build() {
  64.     Column() {
  65.       Text(`Item ${this.item} ReusableComponentTwo`)
  66.         .fontSize(20)
  67.         .margin({ left: 10 })
  68.     }.margin({ left: 10, right: 10 })
  69.   }
  70. }
  • 类型1和类型2布局不同，但是很多业务逻辑相同：在这种情况下，如果将组件分为两个自定义组件进行复用，会存在代码冗余问题。根据系统组件复用原理可知，复用组件是依据 reuseId 来区分复用缓存池的，而自定义组件的名称就是默认的 reuseId。因此，为复用组件显式设置两个 reuseId 与使用两个自定义组件进行复用，对于 ArkUI 而言，复用逻辑完全相同。此时组件复用池内的状态如下图所示。

limited_second_method_cache

具体实现方式可以参考以下示例：

  1. class MyDataSource implements IDataSource {
  2.   // ...
  3. }
  4.  
  5. @Entry
  6. @Component
  7. struct Index {
  8.   private data: MyDataSource = new MyDataSource();
  9.  
  10.   aboutToAppear() {
  11.     for (let i = 0; i < 1000; i++) {
  12.       this.data.pushData(i);
  13.     }
  14.   }
  15.  
  16.   build() {
  17.     Column() {
  18.       List({ space: 10 }) {
  19.         LazyForEach(this.data, (item: number) => {
  20.           ListItem() {
  21.             ReusableComponent({ item: item })
  22.               .reuseId(item % 2 === 0 ? 'ReusableComponentOne' : 'ReusableComponentTwo')
  23.           }
  24.           .backgroundColor(Color.Orange)
  25.           .width('100%')
  26.         }, (item: number) => item.toString())
  27.       }
  28.       .cachedCount(2)
  29.     }
  30.   }
  31. }
  32.  
  33. @Reusable
  34. @Component
  35. struct ReusableComponent {
  36.   @State item: number = 0;
  37.  
  38.   aboutToReuse(params: ESObject) {
  39.     this.item = params.item;
  40.   }
  41.  
  42.   build() {
  43.     Column() {
  44.       if (this.item % 2 === 0) {
  45.         Text(`Item ${this.item} ReusableComponentOne`)
  46.           .fontSize(20)
  47.           .margin({ left: 10 })
  48.       } else {
  49.         Text(`Item ${this.item} ReusableComponentTwo`)
  50.           .fontSize(20)
  51.           .margin({ left: 10 })
  52.       }
  53.     }.margin({ left: 10, right: 10 })
  54.   }
  55. }

应用场景案例

limited_case.png

组合型

composition

这种类型中复用组件之间存在不同，并且情况非常多，但拥有共同的子组件。如果使用有限变化型的组件复用方式，将所有类型的复用组件写成自定义组件分别复用，那么不同复用组件的复用 list 中相同的子组件之间不能互相复用。对此可以将复用组件转变为 Builder 函数，使复用组件内部共同的子组件的缓存池在父组件上共享。此时组件复用池内的状态如下图所示。

composition_cache

反例

下面是使用有限变化型组件复用的一段示例代码：

  1. class MyDataSource implements IDataSource {
  2.   // ...
  3. }
  5. @Entry
  6. @Component
  7. struct MyComponent {
  8.   private data: MyDataSource = new MyDataSource();
  10.   aboutToAppear() {
  11.     for (let i = 0; i < 1000; i++) {
  12.       this.data.pushData(i.toString());
  13.     }
  14.   }
  16.   build() {
  17.     List({ space: 40 }) {
  18.       LazyForEach(this.data, (item: string, index: number) => {
  19.         ListItem() {
  20.           if (index % 3 === 0) {
  21.             ReusableComponentOne({ item: item })
  22.           } else if (index % 5 === 0) {
  23.             ReusableComponentTwo({ item: item })
  24.           } else {
  25.             ReusableComponentThree({ item: item })
  26.           }
  27.         }
  28.         .backgroundColor('#cccccc')
  29.         .width('100%')
  30.         .onAppear(()=>{
  31.           console.info(`ListItem ${index} onAppear`);
  32.         })
  33.       })
  34.     }
  35.     .width('100%')
  36.     .height('100%')
  37.     .cachedCount(0)
  38.   }
  39. }
  41. @Reusable
  42. @Component
  43. struct ReusableComponentOne {
  44.   @State item: string = '';
  46.   // 组件的生命周期回调，在可复用组件从复用缓存中加入到组件树之前调用
  47.   aboutToReuse(params: ESObject) {
  48.     console.info(`ReusableComponentOne ${params.item} Reuse ${this.item}`);
  49.     this.item = params.item;
  50.   }
  52.   // 组件的生命周期回调，在可复用组件从组件树上被加入到复用缓存之前调用
  53.   aboutToRecycle(): void {
  54.     console.info(`ReusableComponentOne ${this.item} Recycle`);
  55.   }
  57.   build() {
  58.     Column() {
  59.       ChildComponentA({ item: this.item })
  60.       ChildComponentB({ item: this.item })
  61.       ChildComponentC({ item: this.item })
  62.     }
  63.   }
  64. }
  66. @Reusable
  67. @Component
  68. struct ReusableComponentTwo {
  69.   @State item: string = '';
  71.   aboutToReuse(params: ESObject) {
  72.     console.info(`ReusableComponentTwo ${params.item} Reuse ${this.item}`);
  73.     this.item = params.item;
  74.   }
  76.   aboutToRecycle(): void {
  77.     console.info(`ReusableComponentTwo ${this.item} Recycle`);
  78.   }
  80.   build() {
  81.     Column() {
  82.       ChildComponentA({ item: this.item })
  83.       ChildComponentC({ item: this.item })
  84.       ChildComponentD({ item: this.item })
  85.     }
  86.   }
  87. }
  89. @Reusable
  90. @Component
  91. struct ReusableComponentThree {
  92.   @State item: string = '';
  94.   aboutToReuse(params: ESObject) {
  95.     console.info(`ReusableComponentThree ${params.item} Reuse ${this.item}`);
  96.     this.item = params.item;
  97.   }
  99.   aboutToRecycle(): void {
  100.     console.info(`ReusableComponentThree ${this.item} Recycle`);
  101.   }
  103.   build() {
  104.     Column() {
  105.       ChildComponentA({ item: this.item })
  106.       ChildComponentB({ item: this.item })
  107.       ChildComponentD({ item: this.item })
  108.     }
  109.   }
  110. }
  112. @Component
  113. struct ChildComponentA {
  114.   @State item: string = '';
  116.   aboutToReuse(params: ESObject) {
  117.     console.info(`ChildComponentA ${params.item} Reuse ${this.item}`);
  118.     this.item = params.item;
  119.   }
  121.   aboutToRecycle(): void {
  122.     console.info(`ChildComponentA ${this.item} Recycle`);
  123.   }
  125.   build() {
  126.     Column() {
  127.       Text(`Item ${this.item} Child Component A`)
  128.         .fontSize(20)
  129.         .margin({ left: 10 })
  130.         .fontColor(Color.Blue)
  131.       Grid() {
  132.         ForEach((new Array(20)).fill(''), (item: string,index: number) => {
  133.           GridItem() {
  134.             Image($r('app.media.startIcon'))
  135.               .height(20)
  136.           }
  137.         })
  138.       }
  139.       .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
  140.       .rowsTemplate('1fr 1fr 1fr 1fr')
  141.       .columnsGap(10)
  142.       .width('90%')
  143.       .height(160)
  144.     }
  145.     .margin({ left: 10, right: 10 })
  146.     .backgroundColor(0xFAEEE0)
  147.   }
  148. }
  150. @Component
  151. struct ChildComponentB {
  152.   @State item: string = '';
  154.   aboutToReuse(params: ESObject) {
  155.     this.item = params.item;
  156.   }
  158.   build() {
  159.     Row() {
  160.       Text(`Item ${this.item} Child Component B`)
  161.         .fontSize(20)
  162.         .margin({ left: 10 })
  163.         .fontColor(Color.Red)
  164.     }.margin({ left: 10, right: 10 })
  165.   }
  166. }
  168. @Component
  169. struct ChildComponentC {
  170.   @State item: string = '';
  172.   aboutToReuse(params: ESObject) {
  173.     this.item = params.item;
  174.   }
  176.   build() {
  177.     Row() {
  178.       Text(`Item ${this.item} Child Component C`)
  179.         .fontSize(20)
  180.         .margin({ left: 10 })
  181.         .fontColor(Color.Green)
  182.     }.margin({ left: 10, right: 10 })
  183.   }
  184. }
  186. @Component
  187. struct ChildComponentD {
  188.   @State item: string = '';
  190.   aboutToReuse(params: ESObject) {
  191.     this.item = params.item;
  192.   }
  194.   build() {
  195.     Row() {
  196.       Text(`Item ${this.item} Child Component D`)
  197.         .fontSize(20)
  198.         .margin({ left: 10 })
  199.         .fontColor(Color.Orange)
  200.     }.margin({ left: 10, right: 10 })
  201.   }
  202. }

上述代码中由四个子组件按不同的排列组合组成了三种类型的复用组件。为了方便观察组件的缓存和复用情况，将 List 的 cachedCount 设置为0，并在部分自定义组件的生命周期函数中添加日志输出。其中重点观察子组件 ChildComponentA 的缓存和复用。

示例运行效果图如下：

composition_optimization_before

从上图可以看到，列表滑动到 ListItem 0 消失时，复用组件 ReusableComponentOne 和它的子组件 ChildComponentA 都加入了复用缓存。继续向上滑动时，由于 ListItem 4 与 ListItem 0 的复用组件不在同一个复用 list，因此 ListItem 4 的复用组件 ReusableComponentThree 和它的子组件依然会全部重新创建，不会复用缓存中的子组件 ChildComponentA。

此时 ListItem 4 中的子组件 ChildComponentA 的重新创建耗时 6ms387μs499ns。

composition_optimization_before_trace

正例

按照组合型的组件复用方式，将上述示例中的三种复用组件转变为 Builder 函数后，内部共同的子组件就处于同一个父组件 MyComponent 下。对这些子组件使用组件复用时，它们的缓存池也会在父组件上共享，节省组件创建时的消耗。

修改后的示例代码：

  1. class MyDataSource implements IDataSource {
  2.   // ...
  3. }
  5. @Entry
  6. @Component
  7. struct MyComponent {
  8.   private data: MyDataSource = new MyDataSource();
  10.   aboutToAppear() {
  11.     for (let i = 0; i < 1000; i++) {
  12.       this.data.pushData(i.toString())
  13.     }
  14.   }
  16.   @Builder
  17.   itemBuilderOne(item: string) {
  18.     Column() {
  19.       ChildComponentA({ item: item })
  20.       ChildComponentB({ item: item })
  21.       ChildComponentC({ item: item })
  22.     }
  23.   }
  25.   @Builder
  26.   itemBuilderTwo(item: string) {
  27.     Column() {
  28.       ChildComponentA({ item: item })
  29.       ChildComponentC({ item: item })
  30.       ChildComponentD({ item: item })
  31.     }
  32.   }
  34.   @Builder
  35.   itemBuilderThree(item: string) {
  36.     Column() {
  37.       ChildComponentA({ item: item })
  38.       ChildComponentB({ item: item })
  39.       ChildComponentD({ item: item })
  40.     }
  41.   }
  43.   build() {
  44.     List({ space: 40 }) {
  45.       LazyForEach(this.data, (item: string, index: number) => {
  46.         ListItem() {
  47.           if (index % 3 === 0) {
  48.             this.itemBuilderOne(item)
  49.           } else if (index % 5 === 0) {
  50.             this.itemBuilderTwo(item)
  51.           } else {
  52.             this.itemBuilderThree(item)
  53.           }
  54.         }
  55.         .backgroundColor('#cccccc')
  56.         .width('100%')
  57.         .onAppear(() => {
  58.           console.info(`ListItem ${index} onAppear`);
  59.         })
  60.       }, (item: number) => item.toString())
  61.     }
  62.     .width('100%')
  63.     .height('100%')
  64.     .cachedCount(0)
  65.   }
  66. }
  68. @Reusable
  69. @Component
  70. struct ChildComponentA {
  71.   @State item: string = '';
  73.   aboutToReuse(params: ESObject) {
  74.     console.info(`ChildComponentA ${params.item} Reuse ${this.item}`);
  75.     this.item = params.item;
  76.   }
  78.   aboutToRecycle(): void {
  79.     console.info(`ChildComponentA ${this.item} Recycle`);
  80.   }
  82.   build() {
  83.     Column() {
  84.       Text(`Item ${this.item} Child Component A`)
  85.         .fontSize(20)
  86.         .margin({ left: 10 })
  87.         .fontColor(Color.Blue)
  88.       Grid() {
  89.         ForEach((new Array(20)).fill(''), (item: string,index: number) => {
  90.           GridItem() {
  91.             Image($r('app.media.startIcon'))
  92.               .height(20)
  93.           }
  94.         })
  95.       }
  96.       .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
  97.       .rowsTemplate('1fr 1fr 1fr 1fr')
  98.       .columnsGap(10)
  99.       .width('90%')
  100.       .height(160)
  101.     }
  102.     .margin({ left: 10, right: 10 })
  103.     .backgroundColor(0xFAEEE0)
  104.   }
  105. }
  107. @Reusable
  108. @Component
  109. struct ChildComponentB {
  110.   @State item: string = '';
  112.   aboutToReuse(params: ESObject) {
  113.     this.item = params.item;
  114.   }
  116.   build() {
  117.     Row() {
  118.       Text(`Item ${this.item} Child Component B`)
  119.         .fontSize(20)
  120.         .margin({ left: 10 })
  121.         .fontColor(Color.Red)
  122.     }.margin({ left: 10, right: 10 })
  123.   }
  124. }
  126. @Reusable
  127. @Component
  128. struct ChildComponentC {
  129.   @State item: string = '';
  131.   aboutToReuse(params: ESObject) {
  132.     this.item = params.item;
  133.   }
  135.   build() {
  136.     Row() {
  137.       Text(`Item ${this.item} Child Component C`)
  138.         .fontSize(20)
  139.         .margin({ left: 10 })
  140.         .fontColor(Color.Green)
  141.     }.margin({ left: 10, right: 10 })
  142.   }
  143. }
  145. @Reusable
  146. @Component
  147. struct ChildComponentD {
  148.   @State item: string = '';
  150.   aboutToReuse(params: ESObject) {
  151.     this.item = params.item;
  152.   }
  154.   build() {
  155.     Row() {
  156.       Text(`Item ${this.item} Child Component D`)
  157.         .fontSize(20)
  158.         .margin({ left: 10 })
  159.         .fontColor(Color.Orange)
  160.     }.margin({ left: 10, right: 10 })
  161.   }
  162. }

示例运行效果图如下：

composition_optimization_after

从效果图可以看出，每一个 ListItem 中的子组件 ChildComponentA 之间都可以触发组件复用。此时 ListItem 4 创建时，子组件 ChildComponentA 复用 ListItem 0 中的子组件 ChildComponentA ，复用仅耗时 864μs583ns。

composition_optimization_after_trace

应用场景案例

composition_case.png

全局型

component_reuse_overview_global

一些场景中组件需要在不同的父组件中复用，并且不适合改为Builder。如上图所示，有时候应用在多个tab页之间切换，tab页之间结构类似，需要在tab页之间复用组件，提升页面切换性能。或者有些应用在组合型场景下，由于复用组件内部含有带状态的业务逻辑，不适合改为Builder函数。

针对这种类型的组件复用场景，可以通过BuilderNode自定义缓存池，将要复用的组件封装在BuilderNode中，将BuilderNode的NodeController作为复用的最小单元，自行管理复用池。具体实现可以参考资料全局自定义组件复用实现。

这种场景不适用系统自带的复用池，自行管理组件复用。

应用场景案例

global_tab_switching

嵌套型

component_reuse_overview_nested

复用组件的子组件的子组件之间存在差异。可以运行化归的思想，将复杂的问题转化为已知的、简单的问题。

嵌套型实际上是上面四种类型的组件，以上图为例，可以通过有限变化型的方案，将子组件B变为子组件B1/B2/B3，这样问题就变成了一个标准的有限变化型。或者通过组合型的方案，将子组件B改为Builder，也可以将问题转化为一个标准有限变化型或者组合型的问题。

无法复用型

组件之间差别很大，规律性不强，子组件也不相同的组件之间进行复用。复用的含义就是重复使用相同布局的组件，布局完全不同的情况下，不建议使用组件复用。

最后

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

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

GitCode - 全球开发者的开源社区,开源代码托管平台  希望这些鸿蒙学习文档能够给大家带来帮助~

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

​

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

路线图适合人群：

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

2.视频学习教程+学习PDF文档

HarmonyOS Next 最新全套视频教程

  纯血版鸿蒙全套学习文档（面试、文档、全套视频等）       

​​

总结

参与鸿蒙开发，你要先认清适合你的方向，如果是想从事鸿蒙应用开发方向的话，可以参考本文的学习路径，简单来说就是：为了确保高效学习，建议规划清晰的学习路线

鸿蒙NEXT全套学习资料
微信名片
注：本文转载自blog.csdn.net的让开，我要吃人了的文章"https://blog.csdn.net/weixin_55362248/article/details/141864297"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！