HarmonyOS开发者社区

长列表滑动卡顿的根本原因是频繁创建和销毁大量列表项组件。鸿蒙ArkTS的@Reusable组件复用机制通过对象池技术解决了这个问题。工作原理如下：当一个可复用组件（使用@Reusable或@ReusableV2装饰）从屏幕上滑出可视区域时，框架不会立即销毁它，而是将其放入一个缓存池中。当需要创建新的相同类型组件时，框架优先从缓存池中取出已存在的组件实例，通过调用aboutToReuse生命周期方法让开发者重置组件状态，然后重新挂载到新的位置。这样就避免了重复创建和销毁带来的布局计算、内存分配、对象初始化等开销。在实际应用中，列表滑动帧率可以从30fps提升到60fps，内存抖动也大幅减少。使用@Reusable时，开发者必须在aboutToReuse中重置所有可变状态（如文本、图片链接、选中状态等），否则会出现内容错乱的问题。同时，应避免在aboutToReuse中进行耗时操作。

@Reusable
@Component
struct ReusableListItem {
@State title: string = '';
@State coverUrl: string = '';

// 组件复用时调用，重置状态
aboutToReuse(params: Record<string, string>) {
this.title = params.title;
this.coverUrl = params.coverUrl;
}

build() {
Row({ space: 12 }) {
Image(this.coverUrl).width(50).height(50).borderRadius(8)
Text(this.title).fontSize(16).fontWeight(FontWeight.Medium)
}.padding(10).width('100%')
}
}

// 在列表中使用
List() {
LazyForEach(this.dataSource, (item: Article) => {
ListItem() {
ReusableListItem({ title: item.title, coverUrl: item.cover })
}
}, (item: Article) => item.id)
}
.cachedCount(10) // 预缓存10个组件