• 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
67// xxx.ets
68class MyDataSource implements IDataSource {
69  private dataArray: string[] = [];
70  private listener: DataChangeListener | undefined;
71
72  public totalCount(): number {
73    return this.dataArray.length;
74  }
75
76  public getData(index: number): string {
77    return this.dataArray[index];
78  }
79
80  public pushData(data: string): void {
81    this.dataArray.push(data);
82  }
83
84  public reloadListener(): void {
85    this.listener?.onDataReloaded();
86  }
87
88  public registerDataChangeListener(listener: DataChangeListener): void {
89    this.listener = listener;
90  }
91
92  public unregisterDataChangeListener(listener: DataChangeListener): void {
93    this.listener = undefined;
94  }
95}
96
97@Entry
98@Component
99struct MyComponent {
100  private data: MyDataSource = new MyDataSource();
101
102  aboutToAppear() {
103    for (let i = 0; i < 1000; i++) {
104      this.data.pushData(i.toString())
105    }
106  }
107
108  build() {
109    List({ space: 3 }) {
110      LazyForEach(this.data, (item: string) => {
111        ListItem() {
112          ReusableChildComponent({ item: item })
113        }
114      }, (item: string) => item)
115    }
116    .width('100%')
117    .height('100%')
118  }
119}
120
121@Reusable
122@Component
123struct ReusableChildComponent {
124  @State item: string = ''
125
126  aboutToReuse(params: ESObject) {
127    this.item = params.item;
128  }
129
130  build() {
131    Row() {
132      Text(this.item)
133        .fontSize(20)
134        .margin({ left: 10 })
135    }.margin({ left: 10, right: 10 })
136  }
137}
138```
139
140## 相关实例
141
142以下为购物片段示例代码，对比使用组件复用前后，应用侧创建自定义组件的收益以及前后的代码写法对比。
143
144### 复用前后代码对比
145
146**复用前：**
147
148```ts
149LazyForEach(this.GoodDataOne, (item, index) => {
150  GridItem() {
151    Column() {
152      Image(item.img)
153        .height(item.hei)
154        .width('100%')
155        .objectFit(ImageFit.Fill)
156
157      Text(item.introduce)
158        .fontSize(14)
159        .padding({ left: 5, right: 5 })
160        .margin({ top: 5 })
161      Row() {
162        Row() {
163          Text('￥')
164            .fontSize(10)
165            .fontColor(Color.Red)
166            .baselineOffset(-4)
167          Text(item.price)
168            .fontSize(16)
169            .fontColor(Color.Red)
170          Text(item.numb)
171            .fontSize(10)
172            .fontColor(Color.Gray)
173            .baselineOffset(-4)
174            .margin({ left: 5 })
175        }
176
177        Image($r('app.media.photo63'))
178          .width(20)
179          .height(10)
180          .margin({ bottom: -8 })
181      }
182      .width('100%')
183      .justifyContent(FlexAlign.SpaceBetween)
184      .padding({ left: 5, right: 5 })
185      .margin({ top: 15 })
186    }
187    .borderRadius(10)
188    .backgroundColor(Color.White)
189    .clip(true)
190    .width('100%')
191    .height(290)
192  }
193}, (item) => JSON.stringify(item))
194```
195
196**复用后：**
197
198组件被复用后，ArkUI框架会将组件构造对应的参数输入给aboutToReuse生命周期回调，开发者需要在aboutToReuse生命周期中对需要进行更新的状态变量进行赋值，ArkUI框架将会基于最新的状态变量值对UI进行展示。
199
200如果同一种自定义组件的不同实例之间存在较大的结构差异，建议使用reuseId对不同的自定义组件实例分别标注复用组，以达到最佳的复用效果。
201
202如果一个自定义组件中，持有对某个大对象或者其他非必要资源的引用，可以在aboutToRecycle生命周期中释放，以免造成内存泄漏。
203
204```ts
205LazyForEach(this.GoodDataOne, (item, index) => {
206  GridItem() {
207    GoodItems({
208      boo:item.data.boo,
209      img:item.data.img,
210      webimg:item.data.webimg,
211      hei:item.data.hei,
212      introduce:item.data.introduce,
213      price:item.data.price,
214      numb:item.data.numb,
215      index:index
216    })
217    .reuseId(this.CombineStr(item.type))
218  }
219}, (item) => JSON.stringify(item))
220
221
222@Reusable
223@Component
224struct GoodItems {
225  @State img: Resource = $r("app.media.photo61")
226  @State webimg?: string = ''
227  @State hei: number = 0
228  @State introduce: string = ''
229  @State price: string = ''
230  @State numb: string = ''
231  @LocalStorageLink('storageSimpleProp') simpleVarName: string = ''
232  boo: boolean = true
233  index: number = 0
234  controllerVideo: VideoController = new VideoController();
235
236  aboutToReuse(params)
237  {
238    this.webimg = params.webimg
239    this.img = params.img
240    this.hei = params.hei
241    this.introduce = params.introduce
242    this.price = params.price
243    this.numb = params.numb
244  }
245
246  build() {
247    // ...
248  }
249}
250```
251
252### 性能收益
253
254通过DevEco Studio的profiler工具分析复用前后的组件创建时间，可以得到应用使能组件复用后的优化情况，组件创建的时间平均从1800us降低到了570us。
255
256![before recycle](./figures/before-recycle.png)
257
258![using recycle](./figures/using-recycle.png)
259
260|                | 创建组件时间 |
261| -------------- | ------------ |
262| 不使能组件复用 | 1813us       |
263| 使能组件复用   | 570us        |
264