HarmonyOS高性能列表RcList实战：从基础接入到性能优化

1. RcList 项目概述：为什么是它，而不是 List？

HarmonyOS 开发半年多，列表这块我折腾过不少方案。系统自带的 List 组件够用，但一旦业务复杂起来——瀑布流、吸顶、编辑模式、上拉加载、下拉刷新、滚动节流——你会发现要么自己造轮子造到怀疑人生，要么就是性能上不去，滑动稍微快一点就开始白屏闪烁。这半年我几乎把所有列表场景都用 RcList 重写了一遍，把坑踩了个遍，也把它的脾气摸清了。

这个组件是开源的 HarmonyOS 列表解决方案，核心思路和 RecyclerView 那套很接近：用容器组件做布局，通过数据源驱动渲染，按需创建和回收列表项。它最大的价值不是“多了一个 List”，而是解决了原生 List 在复杂场景下的几个硬伤：大数据量卡顿、瀑布流支持不友好、编辑操作繁琐、下拉刷新和加载更多需要自己拼。

这篇“上篇”先讲清楚三件事：基础接入怎么玩、三种高频使用场景的配置要点（瀑布流、吸顶分组、自定义刷新），还有复杂交互（编辑多选、左滑操作、分页加载）的实战写法。适合已经在 HarmonyOS 开发里摸过一遍、对 ArkTS 有点基础、想提升列表开发效率和体验的朋友。RcList 官方术语叫“高性能列表容器”，实际项目里它的定位就是：一个能扛住复杂业务场景的列表基础设施。

2. RcList 基础接入：这玩意儿到底怎么跑起来的

2.1 核心机制：为什么它不卡

先别急着写代码，你得先理解它的底层逻辑。RcList 不是一个“大而全的自带 UI 的列表”，它更像一个布局引擎 + 数据源管理器的组合体。它内置了多种布局策略，每种布局都对应一个 LayoutManager，比如 ListLayoutManager 负责线性布局、StaggeredLayoutManager 负责瀑布流。你告诉它用哪种布局，它就按照对应规则去摆放列表项。

关键来了：它不是一次性把所有列表项都渲染出来，而是根据可视区域的滚动位置，动态计算需要创建多少个 item。滚出去了就回收，滚进来了就创建，再加上 item 缓存复用机制，所以即使有几千条数据，真正在视图树上的也就十几二十个组件。

这一点在 ArkUI 里特别重要。ArkUI 的组件树一旦节点过多，状态管理和布局计算的开销会成倍上涨。我实测过：同样 2000 条数据，用原生 List 加上各种装饰（分隔线、索引、吸顶）后，滑动帧率掉到 30 到 40 fps，换成 RcList 基本稳定在 60 fps 上下。差距就在这个“按需创建”上。

2.2 三步接入：工程配置与最小 Demo

接入 RcList 的步骤不复杂，但有一个细节很多人第一次会卡住：模块依赖要加在 entry 模块的 oh-package.json5 里，不是工程根目录。命令是：

bash复制ohpm install @ohos/rc-list

装完之后，最小可运行代码长这样：

typescript复制// Index.ets
import { RcList, RcDataSource, ListConfig, ListLayoutManager } from '@ohos/rc-list';

class MyDataSource extends RcDataSource<string> {
  private items: string[] = [];

  setData(data: string[]) {
    this.items = data;
    this.notifyDataChange();
  }

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

  getData(index: number): string {
    return this.items[index];
  }
}

@Entry
@Component
struct RcListDemo {
  private dataSource = new MyDataSource();
  private layoutManager: ListLayoutManager = new ListLayoutManager();
  private config: ListConfig = new ListConfig();

  aboutToAppear(): void {
    const data: string[] = [];
    for (let i = 0; i < 1000; i++) {
      data.push(`列表项 ${i}`);
    }
    this.dataSource.setData(data);
  }

  build() {
    Column() {
      RcList({ dataSource: this.dataSource, layoutManager: this.layoutManager, config: this.config })
        .itemRenderer((index: number) => {
          return this.itemBuilder(index);
        })
        .width('100%')
        .height('100%')
    }
  }

  @Builder
  itemBuilder(index: number) {
    Row() {
      Text(this.dataSource.getData(index))
        .fontSize(16)
        .padding(16)
    }
    .width('100%')
    .height(56)
    .backgroundColor(Color.White)
  }
}

几个关键点解释一下：

• RcDataSource<T>：数据源适配器。核心是 totalCount() 和 `getDa