HarmonyOS应用性能提升——组件复用

组件复用总览

组件复用是优化用户界面性能，提升应用流畅度的一种焦点计谋，它通过复用已存在的组件节点而非创建新的节点，大幅度低沉了因频仍创建与销毁组件带来的性能消耗，从而确保UI线程的流畅性与响应速度。组件复用针对的是自定义组件，只要发生了类似自定义组件销毁和再创建的场景，都可以使用组件复用。
本文体系地形貌了六种复用类型及其应用场景，帮助开发者更好地理解和实施组件复用计谋以优化应用性能。
关于组件复用的原理机制可以参考资料组件复用原理机制，便于理解本文内容。
复用类型总览

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

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

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

有限变化型

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

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

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

1. class MyDataSource implements IDataSource {
2.   ...
3. }
5. @Entry
6. @Component
7. struct Index {
8.   private data: MyDataSource = new MyDataSource();
10.   aboutToAppear() {
11.     for (let i = 0; i < 1000; i++) {
12.       this.data.pushData(i);
13.     }
14.   }
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. }
36. @Reusable
37. @Component
38. struct ReusableComponentOne {
39.   @State item: string = '';
41.   aboutToReuse(params: ESObject) {
42.     this.item = params.item;
43.   }
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. }
54. @Reusable
55. @Component
56. struct ReusableComponentTwo {
57.   @State item: string = '';
59.   aboutToReuse(params: ESObject) {
60.     this.item = params.item;
61.   }
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 而言，复用逻辑完全类似。此时组件复用池内的状态如下图所示。
  
  
  
  

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

1. class MyDataSource implements IDataSource {
2.   ...
3. }
5. @Entry
6. @Component
7. struct Index {
8.   private data: MyDataSource = new MyDataSource();
10.   aboutToAppear() {
11.     for (let i = 0; i < 1000; i++) {
12.       this.data.pushData(i);
13.     }
14.   }
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. }
33. @Reusable
34. @Component
35. struct ReusableComponent {
36.   @State item: number = 0;
38.   aboutToReuse(params: ESObject) {
39.     this.item = params.item;
40.   }
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. }

复制代码

应用场景案例

组合型

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

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

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.log(`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.log(`ReusableComponentOne ${params.item} Reuse ${this.item}`);
49.     this.item = params.item;
50.   }
52.   // 组件的生命周期回调，在可复用组件从组件树上被加入到复用缓存之前调用
53.   aboutToRecycle(): void {
54.     console.log(`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.log(`ReusableComponentTwo ${params.item} Reuse ${this.item}`);
73.     this.item = params.item;
74.   }
76.   aboutToRecycle(): void {
77.     console.log(`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.log(`ReusableComponentThree ${params.item} Reuse ${this.item}`);
96.     this.item = params.item;
97.   }
99.   aboutToRecycle(): void {
100.     console.log(`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.log(`ChildComponentA ${params.item} Reuse ${this.item}`);
118.     this.item = params.item;
119.   }
121.   aboutToRecycle(): void {
122.     console.log(`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 的缓存和复用。
示例运行效果图如下：

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

正例
按照组合型的组件复用方式，将上述示例中的三种复用组件变化为 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.log(`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.log(`ChildComponentA ${params.item} Reuse ${this.item}`);
75.     this.item = params.item;
76.   }
78.   aboutToRecycle(): void {
79.     console.log(`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. }

复制代码

示例运行效果图如下：

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

应用场景案例

全局型

一些场景中组件必要在不同的父组件中复用，而且不适合改为Builder。如上图所示，偶然候应用在多个tab页之间切换，tab页之间结构类似，必要在tab页之间复用组件，提升页面切换性能。或者有些应用在组合型场景下，由于复用组件内部含有带状态的业务逻辑，不适合改为Builder函数。
针对这种类型的组件复用场景，可以通过BuilderNode自定义缓存池，将要复用的组件封装在BuilderNode中，将BuilderNode的NodeController作为复用的最小单元，自行管理复用池。具体实现可以参考资料全局自定义组件复用实现。
这种场景不适用体系自带的复用池，自行管理组件复用。
应用场景案例

嵌套型

复用组件的子组件的子组件之间存在差别。可以运行化归的思想，将复杂的题目转化为已知的、简单的题目。
嵌套型实际上是上面四种类型的组件，以上图为例，可以通过有限变化型的方案，将子组件B变为子组件B1/B2/B3，如许题目就变成了一个尺度的有限变化型。或者通过组合型的方案，将子组件B改为Builder，也可以将题目转化为一个尺度有限变化型或者组合型的题目。
无法复用型

组件之间差别很大，规律性不强，子组件也不类似的组件之间举行复用。复用的寄义就是重复使用类似布局的组件，布局完全不同的情况下，不发起使用组件复用。
摘自代码仓https://gitee.com/harmonyos-cases/cases/blob/master/docs/performance/component-reuse-overview.md，欢迎讨论~

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。