17 懒加载

最新推荐文章于 2024-08-08 08:49:43 发布

HiHi_Peter

最新推荐文章于 2024-08-08 08:49:43 发布

阅读量288

点赞数 4

分类专栏： HarmonyOS鸿蒙应用开发文章标签：开发语言 harmonyos

本文链接：https://blog.csdn.net/I_did_it/article/details/140254011

版权

HarmonyOS鸿蒙应用开发专栏收录该内容

23 篇文章 0 订阅

订阅专栏

循环渲染服务数据时，需要多少加载多少快用户体验比较好

接口描述

LazyForEach(
    dataSource: IDataSource,             // 需要进行数据迭代的数据源
    itemGenerator: (item: Object, index: number) => void,  // 子组件生成函数
    keyGenerator?: (item: Object, index: number) => string // 键值生成函数
): void

IDataSource类型说明

interface IDataSource {
    totalCount(): number; // 获得数据总数
    getData(index: number): Object; // 获取索引值对应的数据
    registerDataChangeListener(listener: DataChangeListener): void; // 注册数据改变的监听器
    unregisterDataChangeListener(listener: DataChangeListener): void; // 注销数据改变的监听器
}

DataChangeListener类型说明

interface DataChangeListener {
    onDataReloaded(): void; // 重新加载数据完成后调用
    onDataAdded(index: number): void; // 添加数据完成后调用
    onDataMoved(from: number, to: number): void; // 数据移动起始位置与数据移动目标位置交换完成后调用
    onDataDeleted(index: number): void; // 删除数据完成后调用
    onDataChanged(index: number): void; // 改变数据完成后调用
    onDataAdd(index: number): void; // 添加数据完成后调用
    onDataMove(from: number, to: number): void; // 数据移动起始位置与数据移动目标位置交换完成后调用
    onDataDelete(index: number): void; // 删除数据完成后调用
    onDataChange(index: number): void; // 改变数据完成后调用
    onDatasetChange(dataOperations: DataOperation[]): void; // 批量数据处理后调用
}

DataOperation类型说明

type DataOperation =
      DataAddOperation |          // 添加数据操作
    DataDeleteOperation |       // 删除数据操作
    DataChangeOperation |       // 改变数据操作
    DataMoveOperation |         // 移动数据操作
    DataExchangeOperation |     // 交换数据操作
    DataReloadOperation         // 重载所有数据操作

DataAddOperation

interface DataAddOperation {
  type: DataOperationType.ADD,     // 数据添加类型
  index: number,                   // 插入数据索引值
  count?: number,                  // 插入数量，默认值为1
  key?: string | Array<string>     // 为插入的数据分配键值
}

DataDeleteOperation

interface DataDeleteOperation {
  type: DataOperationType.DELETE,  // 数据删除类型
  index: number,                   // 起始删除位置索引值
  count?: number                   // 删除数据数量，默认值为1
}

DataChangeOperation

interface DataChangeOperation {
  type: DataOperationType.CHANGE,  // 数据改变类型
  index: number,                   // 改变的数据的索引值
  key?: string                     // 为改变的数据分配新的键值，默认使用原键值
}

DataMoveOperation

interface MoveIndex {
  from: number;                    // 起始移动位置
  to: number;                      // 目的移动位置
}

interface DataMoveOperation {
  type: DataOperationType.MOVE,    // 数据移动类型
  index: MoveIndex,
  key?: string                     // 为被移动的数据分配新的键值，默认使用原键值
}

DataExchangeOperation

interface ExchangeIndex {
  start: number;                   // 第一个交换位置
  end: number;                     // 第二个交换位置
}
interface ExchangeKey {
  start: string;                   // 为第一个交换的位置分配新的键值，默认使用原键值
  end: string;                     // 为第二个交换的位置分配新的键值，默认使用原键值
}

interface DataExchangeOperation {
  type: DataOperationType.EXCHANGE,  // 数据交换类型
  index: ExchangeIndex,
  key?: ExchangeKey
}

DataReloadOperation

interface DataReloadOperation {     // 当onDatasetChange含有DataOperationType.RELOAD操作时，其余操作全部失效，框架会自己调用keygenerator进行键值比对
  type: DataOperationType.RELOAD    // 数据全部重载类型
}

DataOperationType

declare enum DataOperationType {
  ADD = 'add',                      // 数据添加
  DELETE = 'delete',                // 数据删除
  CHANGE = 'change',                // 数据改变
  MOVE = 'move',                    // 数据移动
  EXCHANGE = 'exchange',            // 数据交换
  RELOAD = 'reload'                 // 全部数据重载
}

使用限制

LazyForEach必须在容器组件内使用，仅List、Grid，Swiper和WaterFlow组件支持数据懒加载（可配置cachedCount属性，即只加载可视部分以及其前后少量数据用于缓冲），其他组件仍然是一次性加载所有的数据。
LazyForEach在每次迭代中，必须创建且只允许创建一个子组件。
生成的子组件必须是允许包含在LazyForEach父容器组件中的子组件。
允许LazyForEach包含在if/else条件渲染语句中，也允许LazyForEach中出现if/else条件渲染语句。
键值生成器必须针对每个数据生成唯一的值，如果键值相同，将导致键值相同的UI组件渲染出现问题。
LazyForEach必须使用DataChangeListener对象来进行更新，第一个参数dataSource使用状态变量时，状态变量改变不会触发LazyForEach的UI刷新。
为了高性能渲染，通过DataChangeListener对象的onDataChange方法来更新UI时，需要生成不同于原来的键值来触发组件刷新