鸿蒙：使用@Reusable实现组件的复用，提升性能

1、前言

之前开发中，没有使用过@Reusable实现组件的复用，因为自己也不咋涉及高性能损耗。这次在看文档时发现了这个装饰器，实测发现可以避免组件的重复创建，所以在列表子组件比较多，并且频繁销毁重建的情况下适合使用该装饰器。

2、参考文档

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-reusablehttps://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-reusable

3、核心思路

1. 创建一个用来渲染列表的数组

2. 列表的每项调用使用@Reusable装饰的组件

4、核心代码

@Reusable
@Component
struct myComponent {@Prop item: number = 0aboutToAppear(): void {console.log("组件创建了" + this.item)}aboutToReuse(): void {// 如果使用了@Reusable，那么不会重新创建，而是会复用console.log("组件复用了" + this.item)}build() {Text("这是 " + this.item).fontSize(20).width("100%").textAlign(TextAlign.Center)}
}

5、运行效果

6、完整代码

Index.ets

@Entry
@Component
struct Index {@State arrayNum: Array<number> = []aboutToAppear(): void {this.pushArray()}pushArray() {this.arrayNum = []for (let index = 0; index < 10; index++) {this.arrayNum.push(index)}}build() {Column() {Row({ space: 20 }) {Button("清空列表").onClick(() => {this.arrayNum = []})Button("创建列表").onClick(() => {this.pushArray()})}List() {ForEach(this.arrayNum, (item: number) => {ListItem() {myComponent({ item: item })}})}.width("100%").height("90%")}}
}@Reusable
@Component
struct myComponent {@Prop item: number = 0aboutToAppear(): void {console.log("组件创建了" + this.item)}aboutToReuse(): void {// 如果使用了@Reusable，那么不会重新创建，而是会复用console.log("组件复用了" + this.item)}build() {Text("这是 " + this.item).fontSize(20).width("100%").textAlign(TextAlign.Center)}
}

以上是个人经验分享

觉得有帮助可以点赞或收藏