美文网首页
渲染控制 - LazyForEach:数据懒加载

渲染控制 - LazyForEach:数据懒加载

作者: wendy__xu | 来源:发表于2024-03-24 18:53 被阅读0次

LazyForEach从提供的数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach,框架会根据滚动容器可视区域按需创建组件,当组件滑出可视区域外时,框架会进行组件销毁回收以降低内存占用。

接口描述

LazyForEach(
    dataSource: IDataSource,             // 需要进行数据迭代的数据源
    itemGenerator: (item: any, index?: number) => void,  // 子组件生成函数
    keyGenerator?: (item: any, index?: number) => string // 键值生成函数
): void
参数名 参数类型 必填 参数描述
dataSource IDataSource LazyForEach数据源,需要开发者实现相关接口。
itemGenerator (item: any, index?:number) => void 子组件生成函数,为数组中的每一个数据项创建一个子组件。
说明:item是当前数据项,index是数据项索引值。
itemGenerator的函数体必须使用大括号{...}。
itemGenerator每次迭代只能并且必须生成一个子组件。
itemGenerator中可以使用if语句,但是必须保证if语句每个分支都会创建一个相同类型的子组件。
itemGenerator中不允许使用ForEach和LazyForEach语句。
keyGenerator (item: any, index?:number) => string 键值生成函数,用于给数据源中的每一个数据项生成唯一且固定的键值。当数据项在数组中的位置更改时,其键值不得更改,当数组中的数据项被新项替换时,被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的,但是,为了使开发框架能够更好地识别数组更改,提高性能,建议提供。如将数组反向时,如果没有提供键值生成器,则LazyForEach中的所有节点都将重建。
说明:
item是当前数据项,index是数据项索引值。
数据源中的每一个数据项生成的键值不能重复。

IDataSource类型说明

interface IDataSource {
    totalCount(): number; // 获得数据总数
    getData(index: number): Object; // 获取索引值对应的数据
    registerDataChangeListener(listener: DataChangeListener): void; // 注册数据改变的监听器
    unregisterDataChangeListener(listener: DataChangeListener): void; // 注销数据改变的监听器
}
接口声明 参数类型 说明
totalCount(): number - 获得数据总数。
getData(index: number): any number 获取索引值index对应的数据。index:获取数据对应的索引值。
registerDataChangeListener(listener:DataChangeListener): void DataChangeListener 注册数据改变的监听器。listener:数据变化监听器
unregisterDataChangeListener(listener:DataChangeListener): void DataChangeListener 注销数据改变的监听器。listener:数据变化监听器

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; // 改变数据完成后调用
}
image.png

使用限制

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

键值生成规则

在LazyForEach循环渲染过程中,系统会为每个item生成一个唯一且持久的键值,用于标识对应的组件。当这个键值变化时,ArkUI框架将视为该数组元素已被替换或修改,并会基于新的键值创建一个新的组件。

LazyForEach提供了一个名为keyGenerator的参数,这是一个函数,开发者可以通过它自定义键值的生成规则。如果开发者没有定义keyGenerator函数,则ArkUI框架会使用默认的键值生成函数,即(item: any, index: number) => { return viewId + '-' + index.toString(); }, viewId在编译器转换过程中生成,同一个LazyForEach组件内其viewId是一致的。

组件创建规则

在确定键值生成规则后,LazyForEach的第二个参数itemGenerator函数会根据键值生成规则为数据源的每个数组项创建组件。组件的创建包括两种情况:LazyForEach首次渲染LazyForEach非首次渲染

示例demo参考:

class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private originDataArray: StringData[] = [];

  public totalCount(): number {
    return 0;
  }

  public getData(index: number): StringData {
    return this.originDataArray[index];
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener');
      this.listeners.push(listener);
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener');
      this.listeners.splice(pos, 1);
    }
  }

  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }

  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    })
  }

  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    })
  }

  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    })
  }
}

class MyDataSource extends BasicDataSource {
  private dataArray: StringData[] = [];

  public totalCount(): number {
    return this.dataArray.length;
  }

  public getData(index: number): StringData {
    return this.dataArray[index];
  }

  public addData(index: number, data: StringData): void {
    this.dataArray.splice(index, 0, data);
    this.notifyDataAdd(index);
  }

  public pushData(data: StringData): void {
    this.dataArray.push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }
}

@Observed
class StringData {
  message: NestedString;
  constructor(message: NestedString) {
    this.message = message;
  }  
}

@Observed
class NestedString {
  message: string;
  constructor(message: string) {
    this.message = message;
  }  
}

@Entry
@Component
struct MyComponent {
  private moved: number[] = [];
  @State data: MyDataSource = new MyDataSource();

  aboutToAppear() {
    for (let i = 0; i <= 20; i++) {
      this.data.pushData(new StringData(new NestedString(`Hello ${i}`)));
    }
  }

  build() {
    List({ space: 3 }) {
      LazyForEach(this.data, (item: StringData, index: number) => {
        ListItem() {
          ChildComponent({data: item})
        }
        .onClick(() => {
          item.message = new NestedString(item.message.message + '0');
        })
      }, (item: StringData, index: number) => item.toString() + index.toString())
    }.cachedCount(5)
  }
}

@Component
struct ChildComponent {
  @ObjectLink data: StringData
  build() {
    Row() {
      Text(this.data.message.message).fontSize(50)
        .onAppear(() => {
          console.info("appear:" + this.data.message.message)
        })
    }.margin({ left: 10, right: 10 })
  }
}
0000000000011111111.20231227152828.18563437288730569409773735966652.gif

相关文章

  • 项目优化

    资源压缩 代码合并压缩 图片压缩 加载优化 ssr 首屏渲染,减少屏幕因为数据加载而闪动 懒加载loading占位...

  • vue

    懒加载vue-lazyload 链接 vue表达式 解决vue页面加载返回来的数据渲染到页面,之前的css不起作用...

  • react + redux性能优化之重复渲染

    先上图 文章系列主要内容如下: 减少重复渲染 列表懒加载 动画和数据请求分离 导航闪动 本次主要内容:减少重复渲染...

  • 四、离屏渲染

    离屏渲染与正常渲染 屏幕上最终显示的数据有两种加载流程 正常渲染加载流程 离屏渲染加载流程离屏渲染与正常渲染 常⻅...

  • iOS开发之懒加载

    iOS开发之懒加载 在iOS开发中几乎经常用到懒加载技术,比如我们存放网络数据的数组,控制器的view,控件的自定...

  • fragment 懒加载

    fragment 的懒加载 懒加载 什么是懒加载:只有在 fragment 显示在界面的时候,才进行数据的加载 懒...

  • viewDidLoad didReceiveMemoryWar

    /** 1.系统调用 2.控制器的view加载完毕的时候调用 3.控制器的初始化,数据的初始化(懒加载)*/...

  • 从零开始打造自己的PHP框架――第2章

    目标 本篇,我们来实现加载控制器、数据查询和页面渲染。 原文地址:http://www.voidking.com/...

  • 离屏渲染触发原理简述

    数据的加载渲染流程有两种:1、正常渲染加载2、离屏渲染加载图1 可得:离屏渲染比正常渲染多一个离屏缓存区 一、正常...

  • 项目优化

    图片懒加载,数据懒加载, 路由懒加载 1.图片懒加载原理 1.1 开始时 不设置src属性 1.2 图片在可视区域...

网友评论

      本文标题:渲染控制 - LazyForEach:数据懒加载

      本文链接:https://www.haomeiwen.com/subject/jtsttjtx.html