鸿蒙组件复用入门
另一方面,复用缓存中的组件可以直接绑定数据进行显示,与创建新视图相比,降低了计算开销,提升了显示效率。常见的组件复用开发场景是长列表滑动:在应用展示大量数据的列表界面中,当用户快速地进行滑动操作,列表项反复创建销毁可能导致卡顿等性能问题。列表在滑动时,超出屏幕一定范围的列表项,被放入缓存池中,当新的列表项滑动进入屏幕范围内时,从缓存池中取出对象,绑定对应数据后呈现到列表界面中。组件复用是指自定义组
·
组件复用
组件复用是指自定义组件从组件树上移除后被放入缓存池,后续在创建相同类型的组件节点时,直接复用缓存池中的组件对象。
在应用开发时,组件复用是优化UI性能,确保应用流畅的重要手段。合理使用可复用组件,一方面,可以避免频繁创建和销毁对象的过程,减少内存回收的频率;另一方面,复用缓存中的组件可以直接绑定数据进行显示,与创建新视图相比,降低了计算开销,提升了显示效率。
常见的组件复用开发场景是长列表滑动:在应用展示大量数据的列表界面中,当用户快速地进行滑动操作,列表项反复创建销毁可能导致卡顿等性能问题。这种情况下,使用组件复用机制可以重用已经创建过的列表项视图,提高滑动的流畅度。

同一列表内的组件复用
同一列表内的列表项组件复用是典型的应用开发场景。列表在滑动时,超出屏幕一定范围的列表项,被放入缓存池中,当新的列表项滑动进入屏幕范围内时,从缓存池中取出对象,绑定对应数据后呈现到列表界面中。
基本实现原理
ArkUI提供了@Reusable装饰器以实现自定义组件的复用,其原理如图所示:

- 标记了@Reusable的自定义组件listItem列表项,在滑动出屏幕一定范围后,从组件树上被移除,组件的对象实例被放入CustomNode虚拟结点(与自定义组件一一对应的自定义结点)。
- 在不断滑动过程中,列表的RecycleManager将这些CustomNode虚拟结点回收,根据复用标识reuseId分组,形成CachedRecycleNodes的集合,即视图对象的复用缓存池。
- 继续滑动,新的listItem需要在列表上显示时,RecycleManager优先从复用缓存池(CachedRecycleNodes集合)中查找对应reuseId的视图对象,然后将新的数据绑定到该视图,重用该节点并添加到组件树上。
列表项结构类型相同实践
- 将列表项封装为自定义组件ItemView,添加@Reusable修饰。
- 在ItemView组件内的aboutToReuse()方法中进行新数据绑定逻辑。
- 在列表的LazyForEach()中使用ItemView组件,设置reuseId。
更多推荐



所有评论(0)