前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >78. Harmonyos NEXT 懒加载数据源实现解析:BasicDataSource与CommonLazyDataSourceModel详解

78. Harmonyos NEXT 懒加载数据源实现解析:BasicDataSource与CommonLazyDataSourceModel详解

作者头像
全栈若城
发布2025-03-16 20:46:01
发布2025-03-16 20:46:01
4200
代码可运行
举报
文章被收录于专栏:若城技术专栏若城技术专栏
运行总次数:0
代码可运行

温馨提示:本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦!

Harmonyos NEXT 懒加载数据源实现解析:BasicDataSource与CommonLazyDataSourceModel详解

一、核心类关系图解

二、基础数据源实现(BasicDataSource)
1. 监听器管理机制
代码语言:javascript
代码运行次数:0
运行
复制
private listeners: DataChangeListener[] = [];

registerDataChangeListener(listener: DataChangeListener): void {
  if (!this.listeners.includes(listener)) {
    this.listeners.push(listener);
  }
}

unregisterDataChangeListener(listener: DataChangeListener): void {
  const index = this.listeners.indexOf(listener);
  if (index >= 0) {
    this.listeners.splice(index, 1);
  }
}
  • 核心作用:维护监听器列表,实现观察者模式
  • 生命周期
    • 组件挂载时注册监听
    • 组件卸载时移除监听
  • 设计优势:支持多个监听器同时订阅数据变化
2. 数据变更通知体系
代码语言:javascript
代码运行次数:0
运行
复制
notifyDataReload(): void {
  this.listeners.forEach(listener => {
    listener.onDataReloaded(); // 触发LazyForEach全部刷新
  });
}

notifyDataAdd(index: number): void {
  this.listeners.forEach(listener => {
    listener.onDataAdd(index); // 触发指定位置插入
  });
}
  • 通知类型对照表: 方法对应操作性能影响onDataReloaded全量刷新高(重建所有Item)onDataAdd单项插入低onDataChange单项更新最低onDataDelete单项删除中onDataMove位置交换中

三、业务数据源实现(CommonLazyDataSourceModel)
1. 数据存储结构
代码语言:javascript
代码运行次数:0
运行
复制
private dataArray: T[] = [];
  • 设计特点
    • 泛型设计支持多种数据类型
    • 数组结构保证数据顺序性
    • 与BasicDataSource的originDataArray形成继承关系
2. 核心操作方法
代码语言:javascript
代码运行次数:0
运行
复制
public pushData(data: T): void {
  this.dataArray.push(data); // 数据压入数组
  this.notifyDataAdd(this.dataArray.length - 1); // 通知最后位置新增
}

public clearAndPushAll(data: T[]): void {
  this.dataArray = [...data]; // 全量替换数据
  this.notifyDataReload(); // 触发全局刷新
}
  • 方法对比: 方法使用场景性能影响pushData增量加载优(局部更新)addData指定位置插入良clearAndPushAll数据重置差(全量刷新)

四、LazyForEach工作原理
1. 渲染流程
2. 性能优化点
  • 可视区域渲染:仅创建可见项对应的组件
  • 组件复用池:缓存移出可视区域的组件实例
  • 差异更新:根据数据变化类型执行最小化更新

五、关键代码解析
1. 数据获取实现
代码语言:javascript
代码运行次数:0
运行
复制
public getData(index: number): T {
  return this.dataArray[index]; // 支持索引访问
}

异常处理建议

代码语言:javascript
代码运行次数:0
运行
复制
if (index >= this.totalCount()) {
  throw new Error("Index out of bounds");
}
2. 数据移动通知
代码语言:javascript
代码运行次数:0
运行
复制
notifyDataMove(from: number, to: number): void {
  this.listeners.forEach(listener => {
    listener.onDataMove(from, to); // 触发动画效果
  });
}
  • 应用场景:实现拖拽排序功能时调用

六、开发注意事项

数据一致性

  • 修改数据后必须调用对应通知方法
  • 批量操作时应合并通知(如先修改数据再统一通知)

性能陷阱

代码语言:javascript
代码运行次数:0
运行
复制
// 错误示例:循环中频繁通知
data.forEach(item => {
  this.addData(item); // 每次add都会触发渲染
});

// 正确做法:批量更新
this.dataArray = [...data];
this.notifyDataReload();

内存管理

代码语言:javascript
代码运行次数:0
运行
复制
aboutToDisappear() {
  this.dataSource.unregisterAllListeners();
}

七、扩展应用场景

分页加载实现

代码语言:javascript
代码运行次数:0
运行
复制
class PagingDataSource extends CommonLazyDataSourceModel {
  private currentPage = 0;
  
  loadNextPage() {
    fetchData(++currentPage).then(data => {
      this.pushData(...data);
    });
  }
}

数据过滤功能

代码语言:javascript
代码运行次数:0
运行
复制
filter(predicate: (item: T) => boolean) {
  this.dataArray = this.dataArray.filter(predicate);
  this.notifyDataReload();
}

总结

该数据源实现方案通过:

  1. 分层设计:基础类处理监听机制,业务类专注数据管理
  2. 精准通知:根据操作类型触发最优更新策略
  3. 懒加载支持:与LazyForEach深度配合实现高性能渲染

完整构建了HarmonyOS应用的高效数据加载体系,适用于相册、商品列表、聊天记录等需要处理大量数据的场景。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-03-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Harmonyos NEXT 懒加载数据源实现解析:BasicDataSource与CommonLazyDataSourceModel详解
    • 一、核心类关系图解
    • 二、基础数据源实现(BasicDataSource)
    • 三、业务数据源实现(CommonLazyDataSourceModel)
    • 四、LazyForEach工作原理
    • 五、关键代码解析
    • 六、开发注意事项
    • 七、扩展应用场景
    • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档