HarmonyOS鸿蒙Next中使用懒加载渲染数据

HarmonyOS鸿蒙Next中使用懒加载渲染数据

// 懒加载： // LazyForEach(dataSource：IDataSource, (item: userInfo) => {}) // 需要自己定义数据源的类型接口，其它部分类似于ForEach这个方法 // 首先定义数据类型

interface userInfo { user_name: string, user_age: number, user_gender: ‘male’ | ‘female’ | ‘undefined’ }

// 这里制造一些数据，一般情况下是获取后端的数据

const userInfos: userInfo[] = [ { user_name: ‘Bochuan’, user_age: 23, user_gender: ‘male’ }, { user_name: ‘Sally’, user_age: 36, user_gender: ‘female’ }, { user_name: ‘Grant’, user_age: 43, user_gender: ‘male’ }, { user_name: ‘Vidya’, user_age: 32, user_gender: ‘female’ } ]

// 懒加载的基本依赖 // Basic implementation of IDataSource to handle data listener

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

public totalCount(): number { return 0; }

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

// 该方法为框架侧调用，为LazyForEach组件向其数据源处添加listener监听 registerDataChangeListener(listener: DataChangeListener): void { if (this.listeners.indexOf(listener) < 0) { console.info(‘add listener’); this.listeners.push(listener); } }

// 该方法为框架侧调用，为对应的LazyForEach组件在数据源处去除listener监听 unregisterDataChangeListener(listener: DataChangeListener): void { const pos = this.listeners.indexOf(listener); if (pos >= 0) { console.info(‘remove listener’); this.listeners.splice(pos, 1); } }

// 通知LazyForEach组件需要重载所有子组件 notifyDataReload(): void { this.listeners.forEach(listener => { listener.onDataReloaded(); }) }

// 通知LazyForEach组件需要在index对应索引处添加子组件 notifyDataAdd(index: number): void { this.listeners.forEach(listener => { listener.onDataAdd(index); }) }

// 通知LazyForEach组件在index对应索引处数据有变化，需要重建该子组件 notifyDataChange(index: number): void { this.listeners.forEach(listener => { listener.onDataChange(index); }) }

// 通知LazyForEach组件需要在index对应索引处删除该子组件 notifyDataDelete(index: number): void { this.listeners.forEach(listener => { listener.onDataDelete(index); }) }

// 通知LazyForEach组件将from索引和to索引处的子组件进行交换 notifyDataMove(from: number, to: number): void { this.listeners.forEach(listener => { listener.onDataMove(from, to); }) } }

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

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

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

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

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

@Entry @Component struct Index { private showData: MyDataSource = new MyDataSource()

aboutToAppear(): void { for (let i = 0; i < userInfos.length; i++) { this.showData.pushData(userInfos[i]) } }

build() { Column() { List() { LazyForEach(this.showData, (item: userInfo) => { ListItem() { Text(item.user_name) } }) } .width(‘100%’) .height(‘100%’) } .width(‘100%’) .height(‘100%’) } }


更多关于HarmonyOS鸿蒙Next中使用懒加载渲染数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，懒加载（Lazy Loading）是一种优化技术，用于延迟加载数据或组件，直到它们真正需要显示时才进行渲染。这种技术可以有效减少初始加载时间，提升应用性能。

在鸿蒙Next中，可以通过LazyForEach组件实现懒加载。LazyForEach允许开发者遍历数据源，并在数据项进入可视范围时才进行渲染。其基本用法如下：

import { LazyForEach } from '@ohos.arkui.advanced';
import { View, Text } from '@ohos.arkui.web';

function MyComponent({ data }) {
  return (
    <LazyForEach
      data={data}
      itemGenerator={(item, index) => (
        <View key={index}>
          <Text>{item}</Text>
        </View>
      )}
    />
  );
}

在上面的代码中，data是需要渲染的数据源，itemGenerator是用于生成每个数据项的渲染函数。LazyForEach会根据滚动位置动态加载和卸载数据项，从而减少内存占用和渲染开销。

此外，鸿蒙Next还提供了List组件，结合LazyForEach可以实现更复杂的懒加载场景。例如：

import { List, ListItem } from '@ohos.arkui.advanced';

function MyList({ data }) {
  return (
    <List>
      <LazyForEach
        data={data}
        itemGenerator={(item, index) => (
          <ListItem key={index}>
            <Text>{item}</Text>
          </ListItem>
        )}
      />
    </List>
  );
}

通过这种方式，开发者可以在鸿蒙Next中高效地实现懒加载渲染，提升应用的响应速度和用户体验。

更多关于HarmonyOS鸿蒙Next中使用懒加载渲染数据的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，通过懒加载优化渲染性能时，可以使用LazyForEach组件结合List或Grid来实现。LazyForEach仅在数据项即将显示时进行渲染，减少初始加载时间。使用时需提供数据源、唯一键生成函数和子组件构建函数。例如：

LazyForEach(dataSource, (item) => item.id, (item) => {
  return <Text>{item.name}</Text>;
})

确保数据源为@State或@Link修饰的响应式数据，以实现动态更新。

回到顶部