• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 组件复用实践
2
3若开发者的应用中存在以下场景，并成为UI线程的帧率瓶颈，应该考虑使用组件复用机制提升应用性能：
4
51. 滑动场景下对同一类自定义组件的实例进行频繁的创建与销毁；
62. 反复切换条件渲染的控制分支，且控制分支中的组件子树结构比较复杂。
7
8组件复用生效的条件是：
9
101. 自定义组件被@Reusable装饰器修饰，即表示其具备组件复用的能力；
112. 在一个自定义组件（父）下创建出来的具备组件复用能力的自定义组件（子），在可复用自定义组件从组件树上移除之后，会被加入到其父自定义组件的可复用组件缓存中；
123. 在一个自定义组件（父）下创建可复用的子组件时，若可复用子节点缓存中有对应类型的可复用子组件的实例，会通过更新可复用子组件的方式，快速创建可复用子组件。
13
14## 约束限制
15
161. @Reusable标识自定义组件具备可复用的能力，它可以被添加到任意的自定义组件上，但是开发者需要小心处理自定义组件的**创建流程**和**更新流程**以确保自定义组件在复用之后能展示出正确的行为；
172. 可复用自定义组件的缓存和复用只能发生在同一父组件下，无法在不同的父组件下复用同一自定义组件的实例。例如，A组件是可复用组件，其也是B组件的子组件，并进入了B组件的可复用组件缓存中，但是在C组件中创建A组件时，无法使用B组件缓存的A组件；
183. @Reusable装饰器只需要对复用子树的根节点进行标记。例如：自定义组件A中有一个自定义子组件B，若需要复用A与B的子树，只需要对A组件添加@Reusable装饰器。
194. 可复用自定义组件中嵌套自定义组件，如果想要对嵌套的子组件的内容进行更新，需要实现对应子组件的aboutToReuse生命周期回调。例如：A组件是可复用的组件，B是A中嵌套的子组件，要想实现对A组件中的B组件内容进行更新，需要在B组件中实现aboutToReuse生命周期回调。
205. 自定义组件的复用带来的性能提升主要体现在节省了自定义组件的JS对象的创建时间并复用了自定义组件的组件树结构，若应用开发者在自定义组件复用的前后使用渲染控制语法显著的改变了自定义组件的组件树结构，那么将无法享受到组件复用带来的性能提升；
216. 组件复用仅发生在存在可复用组件从组件树上移除并再次加入到组件树的场景中，若不存在上述场景，将无法触发组件复用。例如，使用ForEach渲染控制语法创建可复用的自定义组件，由于ForEach渲染控制语法的全展开属性，不能触发组件复用。
227.  组件复用当前不支持嵌套使用。即在可复用的组件的子树中存在可复用的组件，可能导致未定义的结果。
23
24## 开发建议
25
261. 建议复用自定义组件时避免一切可能改变自定义组件的组件树结构和可能使可复用组件中产生重新布局的操作以将组件复用的性能提升到最高；
272. 建议列表滑动场景下组件复用能力和LazyForEach渲染控制语法搭配使用以达到性能最优效果；
283. 开发者需要区分好自定义组件的创建和更新过程中的行为，并注意到自定义组件的复用本质上是一种特殊的组件更新行为，组件创建过程中的流程与生命周期将不会在组件复用中发生，自定义组件的构造参数将通过aboutToReuse生命周期回调传递给自定义组件。例如，aboutToAppear生命周期和自定义组件的初始化传参将不会在组件复用中发生；
294. 避免在aboutToReuse生命周期回调中产生耗时操作，最佳实践是仅在aboutToReuse中做自定义组件更新所需的状态变量值的更新；
305. 无需在aboutToReuse中对@Link、@StorageLink、@ObjectLink、@Consume等自动更新值的状态变量进行更新，可能触发不必要的组件刷新。
31
32## 生命周期
33
34可复用组件从C++侧的组件树上移除时，自定义组件在ArkUI框架native侧的CustomNode会被挂载到其对应的JSView上。复用发生之后，CustomNode被JSView引用，并触发ViewPU上的aboutToRecycle方法，ViewPU的实例将会被RecycleManager引用。
35
36可复用组件从RecycleManager中重新加入组件树时，会调用前端ViewPU对象上的aboutToReuse生命周期回调。
37
38## 接口说明
39
40组件的生命周期回调，在可复用组件从复用缓存中加入到组件树之前调用，可在其中更新组件的状态变量以展示正确的内容，入参的类型与自定义组件的构造函数入参相同。
41
42```ts
43aboutToReuse?(params: { [key: string]: unknown }): void;
44```
45
46组件的生命周期回调，在可复用组件从组件树上被加入到复用缓存之前调用。
47
48```ts
49aboutToRecycle?(): void;
50```
51
52开发者可以使用reuseId为复用组件分配复用组，相同reuseId的组件会在同一个复用组中复用。
53
54```ts
55reuseId(id: string);
56```
57
58Reusable装饰器，用于声明组件具备可复用的能力。
59
60```ts
61declare const Reusable: ClassDecorator;
62```
63
64**示例：**
65
66```ts
67private dataArray: string[] = [];
68  private listener: DataChangeListener;
69
70  public totalCount(): number {
71    return this.dataArray.length;
72  }
73
74  public getData(index: number): any {
75    return this.dataArray[index];
76  }
77
78  public pushData(data: string): void {
79    this.dataArray.push(data);
80  }
81
82  public reloadListener(): void {
83    this.listener.onDataReloaded();
84  }
85
86  public registerDataChangeListener(listener: DataChangeListener): void {
87    this.listener = listener;
88  }
89
90  public unregisterDataChangeListener(listener: DataChangeListener): void {
91    this.listener = null;
92  }
93}
94
95@Entry
96@Component
97struct MyComponent {
98  private data: MyDataSource = new MyDataSource();
99
100  aboutToAppear() {
101    for (let i = 0; i < 1000; i++) {
102      this.data.pushData(i.toString())
103    }
104  }
105
106  build() {
107    List({ space: 3 }) {
108      LazyForEach(this.data, (item: string) => {
109        ListItem() {
110          ReusableChildComponent({ item: item })
111        }
112      }, item => item)
113    }
114    .width('100%')
115    .height('100%')
116  }
117}
118
119@Reusable
120@Component
121struct ReusableChildComponent {
122  @State item: string = ''
123
124  aboutToReuse(params) {
125    this.item = params.item;
126  }
127
128  build() {
129    Row() {
130      Text(this.item)
131        .fontSize(20)
132        .margin({ left: 10 })
133    }.margin({ left: 10, right: 10 })
134  }
135}
136```
137
138## 相关实例
139
140以下为购物示例，对比使用组件复用前后，应用侧创建自定义组件的收益以及前后的代码写法对比。
141
142### 复用前后代码对比
143
144**复用前：**
145
146```ts
147LazyForEach(this.GoodDataOne, (item, index) => {
148  GridItem() {
149    Column() {
150      Image(item.img)
151        .height(item.hei)
152        .width('100%')
153        .objectFit(ImageFit.Fill)
154
155      Text(item.introduce)
156        .fontSize(14)
157        .padding({ left: 5, right: 5 })
158        .margin({ top: 5 })
159      Row() {
160        Row() {
161          Text('￥')
162            .fontSize(10)
163            .fontColor(Color.Red)
164            .baselineOffset(-4)
165          Text(item.price)
166            .fontSize(16)
167            .fontColor(Color.Red)
168          Text(item.numb)
169            .fontSize(10)
170            .fontColor(Color.Gray)
171            .baselineOffset(-4)
172            .margin({ left: 5 })
173        }
174
175        Image($r('app.media.photo63'))
176          .width(20)
177          .height(10)
178          .margin({ bottom: -8 })
179      }
180      .width('100%')
181      .justifyContent(FlexAlign.SpaceBetween)
182      .padding({ left: 5, right: 5 })
183      .margin({ top: 15 })
184    }
185    .borderRadius(10)
186    .backgroundColor(Color.White)
187    .clip(true)
188    .width('100%')
189    .height(290)
190  }
191}, (item) => JSON.stringify(item))
192```
193
194**复用后：**
195
196组件被复用后，ArkUI框架会将组件构造对应的参数输入给aboutToResue生命周期回调，开发者需要在aboutToReuse生命周期中对需要进行更新的状态变量进行赋值，ArkUI框架将会基于最新的状态变量值对UI进行展示。
197
198如果同一种自定义组件的不同实例之间存在较大的结构差异，建议使用reuseId对不同的自定义组件实例分别标注复用组，以达到最佳的复用效果。
199
200如果一个自定义组件中，持有对某个大对象或者其他非必要资源的引用，可以在aboutToRecycle生命周期中释放，以免造成内存泄漏。
201
202```ts
203LazyForEach(this.GoodDataOne, (item, index) => {
204  GridItem() {
205    GoodItems({
206      boo:item.data.boo,
207      img:item.data.img,
208      webimg:item.data.webimg,
209      hei:item.data.hei,
210      introduce:item.data.introduce,
211      price:item.data.price,
212      numb:item.data.numb,
213      index:index
214    })
215    .reuseId(this.CombineStr(item.type))
216  }
217}, (item) => JSON.stringify(item))
218
219
220@Reusable
221@Component
222struct GoodItems {
223  @State img: Resource = $r("app.media.photo61")
224  @State webimg?: string = ''
225  @State hei: number = 0
226  @State introduce: string = ''
227  @State price: string = ''
228  @State numb: string = ''
229  @LocalStorageLink('storageSimpleProp') simpleVarName: string = ''
230  boo: boolean = true
231  index: number = 0
232  controllerVideo: VideoController = new VideoController();
233
234  aboutToReuse(params)
235  {
236    this.webimg = params.webimg
237    this.img = params.img
238    this.hei = params.hei
239    this.introduce = params.introduce
240    this.price = params.price
241    this.numb = params.numb
242  }
243
244  build() {
245    // ...
246  }
247}
248```
249
250### 性能收益
251
252通过DevEco Studio的profiler工具分析复用前后的组件创建时间，可以得到应用使能组件复用后的优化情况，组件创建的时间平均从1800us降低到了570us。
253
254![before recycle](./figures/before-recycle.png)
255
256![using recycle](./figures/using-recycle.png)
257
258|                | 创建组件时间 |
259| -------------- | ------------ |
260| 不使能组件复用 | 1813us       |
261| 使能组件复用   | 570us        |
262