---

每日一句正能量

“跨过这段路，幸福就在拐角处。”
困境往往有尽头，坚持就能遇见转机。最难的时候，恰是离幸福最近的时候。“拐角”不是命运的安排，而是你一步一步走出来的必然。

摘要

在移动端应用中，长列表是最常见的 UI 场景之一——从电商商品瀑布流、社交信息流、新闻资讯到聊天记录，几乎无处不在。然而，当数据量从百条跃升至万级时，传统的 ForEach 全量渲染会让内存占用飙升至数百 MB，首屏加载耗时数秒，滑动丢帧率超过 50%，甚至直接导致应用 OOM 崩溃。

HarmonyOS ArkTS 通过 LazyForEach 按需渲染、cachedCount 预加载缓冲 与 @Reusable 组件复用 的三层优化架构，将万级长列表的内存占用从 560MB 压缩至 78MB，启动时间从 5.8 秒缩短至 1.3 秒，丢帧率归零。本文基于 HarmonyOS 6（API 23），从虚拟列表的核心原理出发，系统讲解 IDataSource 的规范实现、cachedCount 的调优策略、@Reusable 的复用机制，并结合前序文章的吸顶与下拉刷新能力，给出完整的万级数据高性能列表工程化方案。

---

一、问题背景：为什么 ForEach 撑不住万级数据

1.1 ForEach 的渲染机制

ForEach 是 ArkTS 中最直观的循环渲染方式，其工作逻辑为：

1. 一次性加载全部数据：从数据源读取所有元素；
2. 创建所有组件节点：为每个数据项创建对应的 ListItem 组件并挂载到组件树；
3. 渲染可视区：仅绘制屏幕内可见的组件，但不可见组件仍占用内存。

这意味着，无论用户是否滑动，所有组件节点都已存在于内存中。当数据量达到 10000 条时，即使每个列表项仅占用 1KB 的组件对象内存，总量也已达到 10MB——这还不包括图片、文字、布局测量等附加开销。

1.2 性能实测对比

根据华为官方在 HarmonyOS NEXT 上的实测数据（10000 条复杂列表项，含图片与富文本）：

指标	ForEach	LazyForEach	差距
启动时间	5.8s	1.7s	快 4.1s
内存占用	560MB	82MB	省 478MB
丢帧率	58.2%	6.6%	降低 51.6%

数据来源：HarmonyOS 官方性能测试，DevEco Studio 4.0.3，SDK 4.0.10.9，HUAWEI Mate 60 Pro。

58.2% 的丢帧率意味着用户在滑动列表时，每两帧就有一帧被跳过，视觉上呈现明显的「PPT 式卡顿」。而 560MB 的内存占用，在后台应用较多或低端设备上，极易触发系统的 OOM 杀进程机制。

1.3 虚拟列表的核心思想

虚拟列表（Virtual List）的本质可以用一句话概括：只渲染用户看得见的东西。

当用户滑动列表时，系统持续检测可视区域，仅创建和渲染当前可见的列表项；当组件滑出可视区域外时，框架将其销毁或回收，从而将内存占用和渲染开销始终控制在恒定水平——与数据总量无关，仅与屏幕可见项数量相关。

---

二、LazyForEach：按需渲染的基石

2.1 核心原理

LazyForEach 是 HarmonyOS 提供的声明式懒加载循环渲染接口，其渲染流程如下：

1. 检测可视区域：框架根据滚动容器的滚动偏移量，计算当前可视的数据索引范围；
2. 按需获取数据：通过 IDataSource.getData(index) 获取对应索引的数据；
3. 创建组件节点：仅为进入可视区的数据项创建 ListItem 组件；
4. 渲染到屏幕：组件挂载到组件树并执行绘制；
5. 回收或销毁：当组件滑出可视区外时，框架将其从组件树移除，释放内存或送入复用池。

2.2 IDataSource 完整实现

LazyForEach 要求数据源必须实现 IDataSource 接口，这是框架与业务数据之间的契约层：

export interface IDataSource {
  totalCount(): number;                                    // 返回数据总量
  getData(index: number): Object;                         // 按索引获取数据
  registerDataChangeListener(listener: DataChangeListener): void;   // 注册变更监听
  unregisterDataChangeListener(listener: DataChangeListener): void; // 注销变更监听
}

以下是一个生产级的 IDataSource 实现模板，支持刷新、追加、删除、移动等全量操作：

import { DataChangeListener } from '@kit.ArkUI';

export interface VirtualItem {
  id: string;
  title: string;
  content: string;
  imageUrl: string;
  timestamp: number;
}

export class VirtualDataSource implements IDataSource {
  private list: VirtualItem[] = [];
  private listeners: DataChangeListener[] = [];

  constructor(initialData: VirtualItem[] = []) {
    this.list = initialData;
  }

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

  getData(index: number): VirtualItem {
    return this.list[index];
  }

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

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

  // ==================== 业务数据操作方法 ====================

  /** 刷新：替换全部数据 */
  refresh(newList: VirtualItem[]): void {
    this.list = newList;
    this.notifyDataReload();
  }

  /** 追加：在尾部追加数据 */
  append(newList: VirtualItem[]): void {
    const start = this.list.length;
    this.list = this.list.concat(newList);
    this.notifyDataAdd(start, newList.length);
  }

  /** 插入：在指定位置插入 */
  insert(index: number, item: VirtualItem): void {
    this.list.splice(index, 0, item);
    this.notifyDataAdd(index, 1);
  }

  /** 删除：删除指定位置 */
  delete(index: number): void {
    this.list.splice(index, 1);
    this.notifyDataDelete(index);
  }

  /** 移动：将数据从 fromIndex 移动到 toIndex */
  move(fromIndex: number, toIndex: number): void {
    const item = this.list.splice(fromIndex, 1)[0];
    this.list.splice(toIndex, 0, item);
    this.notifyDataMove(fromIndex, toIndex);
  }

  // ==================== 通知框架数据变更 ====================

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

  private notifyDataAdd(index: number, count: number): void {
    this.listeners.forEach(l => l.onDataAdd(index, count));
  }

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

  private notifyDataMove(fromIndex: number, toIndex: number): void {
    this.listeners.forEach(l => l.onDataMove(fromIndex, toIndex));
  }
}

2.3 LazyForEach 使用规范

@Entry
@Component
struct VirtualListPage {
  @State dataSource: VirtualDataSource = new VirtualDataSource();

  aboutToAppear(): void {
    // 初始化加载数据
    this.loadInitialData();
  }

  private async loadInitialData(): Promise<void> {
    const data = await this.mockFetchData(0, 20);
    this.dataSource.refresh(data);
  }

  @Builder
  itemBuilder(item: VirtualItem) {
    ListItem() {
      Row() {
        Image(item.imageUrl)
          .width(80)
          .height(60)
          .borderRadius(4)
          .objectFit(ImageFit.Cover)

        Column() {
          Text(item.title)
            .fontSize(15)
            .fontWeight(FontWeight.Medium)
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
          Text(item.content)
            .fontSize(12)
            .fontColor('#666666')
            .maxLines(2)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .margin({ top: 4 })
        }
        .layoutWeight(1)
        .alignItems(HorizontalAlign.Start)
        .margin({ left: 12 })
      }
      .width('100%')
      .padding(16)
      .backgroundColor('#FFFFFF')
    }
  }

  build() {
    List({ space: 1 }) {
      LazyForEach(this.dataSource, (item: VirtualItem) => {
        this.itemBuilder(item)
      }, (item: VirtualItem) => item.id)  // ← key 必须用业务唯一 ID
    }
    .width('100%')
    .layoutWeight(1)
    .cachedCount(5)          // 预加载 5 个屏外组件
    .divider({ strokeWidth: 1, color: '#F0F0F0' })
    .edgeEffect(EdgeEffect.Spring)
    .scrollBar(BarState.Off)
  }

  private mockFetchData(start: number, count: number): Promise<VirtualItem[]> {
    return new Promise(resolve => {
      setTimeout(() => {
        const items: VirtualItem[] = [];
        for (let i = 0; i < count; i++) {
          const idx = start + i;
          items.push({
            id: `item_${idx}`,
            title: `标题 ${idx}：HarmonyOS 虚拟列表性能优化实战`,
            content: `这是第 ${idx} 条内容的摘要描述，展示 LazyForEach 按需渲染的强大能力...`,
            imageUrl: `https://example.com/img/${idx}.jpg`,
            timestamp: Date.now()
          });
        }
        resolve(items);
      }, 300);
    });
  }
}

2.4 关键规则（违反即踩坑）

规则	说明	违规后果
key 唯一性	必须使用业务唯一 ID（如 item.id），绝不能用 index	数据增删时组件复用错位，UI 闪烁甚至崩溃
禁止重赋值 dataSource	不能执行 this.dataSource = new VirtualDataSource()	LazyForEach 监听器丢失，UI 不响应数据变更
必须通过监听器更新	调用 onDataAdd / onDataReloaded 等方法通知框架	直接修改内部数组框架感知不到，UI 不更新
单根组件	LazyForEach 的 itemBuilder 必须且只能返回一个根组件	编译报错或运行时布局异常

---

三、cachedCount：预加载缓冲消灭白屏

LazyForEach 虽然解决了「不看的别创建」的问题，但带来了新的问题：当用户快速滑动时，新进入可视区的组件可能来不及创建和渲染，导致屏幕出现短暂的白块（White Block）。

3.1 原理与配置

cachedCount 控制可见区域之外预加载的组件数量。框架会在可视区上下各预创建 cachedCount 个组件，当用户滑动时，这些预加载的组件可以直接进入可视区，无需等待创建过程。

List() {
  LazyForEach(this.dataSource, ...)
}
.cachedCount(5)  // 预加载 5 个屏外组件

3.2 调优策略

cachedCount 并非越大越好。过大的缓存会增加内存占用和首次渲染耗时，过小则无法消除快速滑动的白屏。

列表类型	推荐 cachedCount	说明
纯文本列表	可见项数 × 0.5	组件轻量，预加载压力小
图文混排列表	可见项数 × 1.0	图片加载需要时间，适当增加缓冲
视频/富媒体列表	可见项数 × 1.5	重量级组件，需更大缓冲防止白屏
瀑布流（WaterFlow）	可见项数 × 2.0	高度不固定，滑动不确定性更高

实测结论：一屏显示 6 条时，cachedCount = 3 可将丢帧率从 6.6% 降至 3.7%，是性价比最高的配置点。

---

四、@Reusable：组件复用池的终极武器

LazyForEach 解决了「按需创建」的问题，但每次滑入新组件时，框架仍需经历「创建节点 → 测量 → 布局 → 绘制」的完整流程。对于结构复杂的列表项（如含图片、嵌套布局、富文本），这一过程耗时显著。

@Reusable 装饰器通过组件复用池（Recycle Pool） 机制，将滑出视口的组件节点回收缓存，当新数据需要渲染时，直接从池中取出同类型组件，仅更新数据内容，避免了重复的节点创建开销。

4.1 复用组件的完整实现

// 数据模型（需用 @Observed 包裹以支持局部更新）
@Observed
export class ArticleModel {
  id: string = '';
  title: string = '';
  summary: string = '';
  coverUrl: string = '';
  author: string = '';
  readCount: number = 0;
  publishTime: string = '';
}

// 复用组件
@Reusable
@Component
struct ArticleCard {
  @ObjectLink article: ArticleModel;  // 双向同步，局部更新

  // 组件复用时，框架调用 aboutToReuse 传入新数据
  aboutToReuse(params: Record<string, Object>): void {
    this.article.id = params.id as string;
    this.article.title = params.title as string;
    this.article.summary = params.summary as string;
    this.article.coverUrl = params.coverUrl as string;
    this.article.author = params.author as string;
    this.article.readCount = params.readCount as number;
    this.article.publishTime = params.publishTime as string;
  }

  build() {
    Column() {
      Row() {
        Image(this.article.coverUrl)
          .width(100)
          .height(75)
          .borderRadius(6)
          .objectFit(ImageFit.Cover)
          .alt($r('app.media.ic_placeholder'))

        Column() {
          Text(this.article.title)
            .fontSize(15)
            .fontWeight(FontWeight.Medium)
            .fontColor('#1A1A1A')
            .maxLines(2)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .width('100%')

          Text(this.article.summary)
            .fontSize(12)
            .fontColor('#666666')
            .maxLines(2)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .margin({ top: 6 })
            .width('100%')

          Row() {
            Text(this.article.author)
              .fontSize(11)
              .fontColor('#999999')
            Blank()
            Text(`${this.article.readCount} 阅读`)
              .fontSize(11)
              .fontColor('#999999')
          }
          .width('100%')
          .margin({ top: 8 })
        }
        .layoutWeight(1)
        .alignItems(HorizontalAlign.Start)
        .margin({ left: 12 })
      }
      .width('100%')

      Divider()
        .width('100%')
        .height(0.5)
        .color('#F0F0F0')
        .margin({ top: 12 })
    }
    .width('100%')
    .padding(16)
    .backgroundColor('#FFFFFF')
  }
}

4.2 复用组件的关键注意事项

1. 必须实现 aboutToReuse：框架在复用组件时会调用此方法传入新数据，开发者需在此方法中重置所有内部状态，避免旧数据污染新视图。
2. 使用 @ObjectLink 而非 @Prop：@Prop 会进行深拷贝，增加创建时间和内存开销；@ObjectLink 指向数据源指针，双向同步，性能更优。
3. 图片需重置：如果组件中包含 Image，在 aboutToReuse 中应确保新图片 URL 被正确赋值，否则可能短暂显示旧图片。
4. 动画状态重置：如果列表项包含动画（如点赞心形动画），在复用时必须重置动画状态，避免新数据项显示旧动画。

4.3 性能实测：复用的威力

指标	无复用 (cachedCount=0)	LazyForEach + cachedCount	+ @Reusable 组件复用
丢帧率	12.1%	3.7%	0%
BuildLazyItem 耗时	10.277ms	8.5ms	0.749ms
总帧耗时	13.430ms	11.2ms	7.310ms
内存占用	45.1MB	42.3MB	40.2MB

数据来源：华为官方测试，400 条复杂列表项匀速滑动，HUAWEI Mate 60 Pro。

组件复用将 BuildLazyItem 耗时从 10.277ms 降低到 0.749ms，降幅超过 92%；丢帧率从 3.7% 降至 0%，实现了真正的 60fps 丝滑滑动体验。

---

五、三层优化架构全景

将三层优化手段叠加使用，万级数据列表的性能提升是指数级的：

优化阶段	启动时间	丢帧率	内存占用
未优化（ForEach）	5.8s	58.2%	560MB
+ LazyForEach 懒加载	1.7s	6.6%	82MB
+ cachedCount 预加载	1.6s	3.7%	81MB
+ @Reusable 组件复用	1.5s	0%	80MB
+ 布局瘦身	1.3s	0%	78MB

---

六、HarmonyOS 6（API 23）新特性

从 HarmonyOS 5 到 HarmonyOS 6，虚拟列表相关 API 经历了多项重要升级：

API/特性	HarmonyOS 5	HarmonyOS 6（API 23）	变更说明
LazyForEach	基础懒加载	支持动态 cachedCount	可根据滑动速度动态调整缓存数量
列表滚动性能	基础优化	异步布局 + 预计算	滑动性能提升约 40%
IDataSource	基础接口	新增 onDataMove 方法	支持数据移动通知，拖拽排序更流畅
列表动画	animateTo	新增 layoutAnimation	列表项增删自动动画，无需手动控制
滚动监听	onScrollIndex	新增 onScrollVelocity	可获取滑动速度，用于动态加载策略
回收策略	FIFO（先进先出）	LRU（最近最少使用）	最近使用的列表项优先保留，命中率更高

6.1 API 23 动态 cachedCount 实战

List() {
  LazyForEach(this.dataSource, (item: VirtualItem) => {
    this.itemBuilder(item)
  }, (item: VirtualItem) => item.id)
}
.cachedCount(this.getDynamicCacheCount())

private getDynamicCacheCount(): number {
  // 根据列表项复杂度动态调整
  if (this.hasHeavyMedia) {
    return 8;  // 含视频/大图，增加缓冲
  }
  return 4;    // 纯文本，减少缓冲
}

---

七、完整实战：万级数据高性能列表

以下代码整合了 LazyForEach + cachedCount + @Reusable + 下拉刷新 + 上拉加载 + 吸顶头部，形成完整的生产级解决方案：

import { DataChangeListener } from '@kit.ArkUI';

// ==================== 数据模型 ====================
@Observed
export class FeedItem {
  id: string = '';
  title: string = '';
  summary: string = '';
  coverUrl: string = '';
  author: string = '';
  readCount: number = 0;
  category: string = '';
}

// ==================== 数据源 ====================
export class FeedDataSource implements IDataSource {
  private list: FeedItem[] = [];
  private listeners: DataChangeListener[] = [];

  totalCount(): number { return this.list.length; }
  getData(index: number): FeedItem { return this.list[index]; }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) this.listeners.push(listener);
  }
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) this.listeners.splice(pos, 1);
  }

  refresh(newList: FeedItem[]): void {
    this.list = newList;
    this.listeners.forEach(l => l.onDataReloaded());
  }

  append(newList: FeedItem[]): void {
    const start = this.list.length;
    this.list = this.list.concat(newList);
    this.listeners.forEach(l => l.onDataAdd(start, newList.length));
  }
}

// ==================== 复用组件 ====================
@Reusable
@Component
struct FeedCard {
  @ObjectLink item: FeedItem;

  aboutToReuse(params: Record<string, Object>): void {
    this.item.id = params.id as string;
    this.item.title = params.title as string;
    this.item.summary = params.summary as string;
    this.item.coverUrl = params.coverUrl as string;
    this.item.author = params.author as string;
    this.item.readCount = params.readCount as number;
    this.item.category = params.category as string;
  }

  build() {
    Column() {
      Row() {
        Image(this.item.coverUrl)
          .width(100)
          .height(75)
          .borderRadius(6)
          .objectFit(ImageFit.Cover)
          .alt($r('app.media.ic_placeholder'))

        Column() {
          Text(this.item.title)
            .fontSize(15)
            .fontWeight(FontWeight.Medium)
            .maxLines(2)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .width('100%')
          Text(this.item.summary)
            .fontSize(12)
            .fontColor('#666666')
            .maxLines(2)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .margin({ top: 6 })
            .width('100%')
          Row() {
            Text(`${this.item.category} · ${this.item.author}`)
              .fontSize(11)
              .fontColor('#999999')
            Blank()
            Text(`${this.item.readCount} 阅读`)
              .fontSize(11)
              .fontColor('#999999')
          }
          .width('100%')
          .margin({ top: 8 })
        }
        .layoutWeight(1)
        .margin({ left: 12 })
      }
      .width('100%')
    }
    .width('100%')
    .padding(16)
    .backgroundColor('#FFFFFF')
  }
}

// ==================== 页面 ====================
@Entry
@Component
struct FeedListPage {
  @State dataSource: FeedDataSource = new FeedDataSource();
  @State isRefreshing: boolean = false;
  @State isLoading: boolean = false;
  @State hasMore: boolean = true;
  @State selectedCategory: string = '推荐';

  private pageNum: number = 1;
  private readonly pageSize: number = 15;
  private readonly categories: string[] = ['推荐', '科技', '生活', '财经', '娱乐'];

  aboutToAppear(): void {
    this.loadData(true);
  }

  private async loadData(isRefresh: boolean): Promise<void> {
    if (isRefresh) {
      this.isRefreshing = true;
      this.pageNum = 1;
    } else {
      if (this.isLoading || !this.hasMore) return;
      this.isLoading = true;
    }

    try {
      const data = await this.mockFetch(this.pageNum, this.pageSize, this.selectedCategory);
      if (isRefresh) {
        this.dataSource.refresh(data);
      } else {
        this.dataSource.append(data);
      }
      this.hasMore = data.length >= this.pageSize;
      this.pageNum++;
    } finally {
      this.isRefreshing = false;
      this.isLoading = false;
    }
  }

  private mockFetch(page: number, size: number, category: string): Promise<FeedItem[]> {
    return new Promise(resolve => {
      setTimeout(() => {
        const items: FeedItem[] = [];
        const base = (page - 1) * size;
        for (let i = 0; i < size; i++) {
          const idx = base + i;
          items.push({
            id: `feed_${category}_${idx}`,
            title: `[${category}] HarmonyOS 虚拟列表性能优化实战指南 ${idx}`,
            summary: '本文系统讲解 LazyForEach 按需渲染、cachedCount 预加载、@Reusable 组件复用的完整方案...',
            coverUrl: `https://picsum.photos/200/150?random=${idx}`,
            author: `作者 ${idx % 100}`,
            readCount: Math.floor(Math.random() * 10000),
            category: category
          });
        }
        resolve(items);
      }, 600);
    });
  }

  @Builder
  categoryBar() {
    Row() {
      ForEach(this.categories, (cat: string) => {
        Column() {
          Text(cat)
            .fontSize(14)
            .fontWeight(this.selectedCategory === cat ? FontWeight.Bold : FontWeight.Normal)
            .fontColor(this.selectedCategory === cat ? '#00CC66' : '#666666')
          Divider()
            .width(this.selectedCategory === cat ? 20 : 0)
            .height(2)
            .backgroundColor('#00CC66')
            .margin({ top: 4 })
            .animation({ duration: 200 })
        }
        .padding({ left: 12, right: 12 })
        .onClick(() => {
          this.selectedCategory = cat;
          this.loadData(true);
        })
      })
    }
    .width('100%')
    .height(44)
    .padding({ left: 8 })
    .backgroundColor('#FFFFFF')
  }

  @Builder
  loadMoreFooter() {
    Row() {
      if (this.isLoading) {
        LoadingProgress().width(20).height(20).color('#999999')
        Text('正在加载...').fontSize(13).fontColor('#999999').margin({ left: 8 })
      } else if (!this.hasMore) {
        Text('—— 没有更多了 ——').fontSize(13).fontColor('#CCCCCC')
      }
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      // 标题栏
      Row() {
        Text('资讯信息流')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .fontColor('#FFFFFF')
      }
      .width('100%')
      .height(56)
      .padding({ left: 16 })
      .backgroundColor('#2C3E50')

      // 吸顶分类栏
      this.categoryBar()

      // 下拉刷新 + 虚拟列表
      Refresh({ refreshing: $$this.isRefreshing }) {
        List({ space: 1 }) {
          LazyForEach(this.dataSource, (item: FeedItem) => {
            ListItem() {
              FeedCard({ item: item })
            }
          }, (item: FeedItem) => item.id)

          ListItem() {
            this.loadMoreFooter()
          }
        }
        .width('100%')
        .layoutWeight(1)
        .cachedCount(6)           // 根据一屏 6 条，缓存 6 个
        .divider({ strokeWidth: 1, color: '#F0F0F0' })
        .edgeEffect(EdgeEffect.Spring)
        .scrollBar(BarState.Off)
        .onReachEnd(() => {
          this.loadData(false);
        })
      }
      .onRefreshing(() => {
        this.loadData(true);
      })
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
}

---

八、避坑指南与调试技巧

8.1 常见踩坑

问题现象	根因	解决方案
列表滑动闪烁	key 使用了 index 而非业务 ID	改用 item.id 等唯一标识
数据更新后 UI 不刷新	直接修改数组未通知框架	通过 IDataSource 的监听器方法通知
复用组件显示旧数据	aboutToReuse 未重置所有状态	检查并重置所有 @State / @ObjectLink
快速滑动白屏	cachedCount 过小	根据列表复杂度增加至 1~2 倍可见项数
内存泄漏	dataSource 被重新赋值	始终使用同一个 dataSource 实例
图片闪烁	复用时旧图片未清除	确保 aboutToReuse 中更新图片 URL

8.2 调试技巧

// 在 DevEco Studio Profiler 中监控以下指标：
// 1. BuildLazyItem 耗时（应 < 1ms）
// 2. 丢帧率（应接近 0%）
// 3. 内存占用曲线（应平稳无持续上升）

// 在代码中打印调试信息
.onScrollIndex((start: number, end: number) => {
  console.debug(`[VirtualList] 可视区索引: ${start} ~ ${end}`);
})

// 验证组件复用是否生效
aboutToReuse(params: Record<string, Object>): void {
  console.debug(`[Reusable] 复用组件: ${params.id}`);
  // ... 数据更新逻辑
}

---

九、与前序能力的协同

本文的虚拟列表方案可与前序文章的能力无缝衔接：

• 吸顶效果（第一百一十二篇）：分类栏通过 ListItemGroup 的 header 实现吸顶，或在外层 Scroll 中嵌套 Sticky 组件；
• 下拉刷新（第一百一十三篇）：Refresh 组件包裹 List，onRefreshing 中调用 dataSource.refresh() 重置数据；
• 上拉加载（第一百一十三篇）：List.onReachEnd 触发 dataSource.append() 追加数据，配合 hasMore 边界判断。

三者结合，即可构建出支持万级数据、60fps 滑动、吸顶导航、下拉刷新、上拉加载的完整信息流页面。

---

十、总结

本文围绕 HarmonyOS 6（API 23）的虚拟列表与大数据渲染，构建了从原理到实战的完整技术体系：

• LazyForEach 按需渲染：通过 IDataSource 接口实现数据与视图的解耦，仅创建可视区组件，将万级数据的内存占用从 560MB 降至 82MB。
• cachedCount 预加载缓冲：根据列表复杂度动态调整缓存数量，消灭快速滑动的白屏现象，丢帧率从 6.6% 降至 3.7%。
• @Reusable 组件复用：通过复用池机制避免重复创建节点，BuildLazyItem 耗时降低 92%，丢帧率归零。
• 三层叠加：完整优化方案下，启动时间从 5.8s 缩短至 1.3s，内存降至 78MB，实现真正的 60fps 丝滑体验。

虚拟列表不是银弹，但它是大数据列表的唯一正确解法。记住一个简单的判断标准：数据量超过 100 条，就用 LazyForEach。这不是过度优化，而是基本的工程规范。

---

转载自：https://blog.csdn.net/u014727709/article/details/163418993
欢迎 👍点赞✍评论⭐收藏，欢迎指正