HarmonyOS 鸿蒙Next中大量数据全量加载卡顿，后续加载导致checkboxgroup选择异常

尊敬的开发者，您好，

长列表作为应用开发中最常见的开发场景之一，通常会包含成千上万个列表项，在此场景下，直接使用循环渲染ForEach一次性加载所有的列表项，会导致渲染时间过长，影响用户体验。而使用数据懒加载LazyForEach替换循环渲染ForEach，可以按需加载列表项，从而提升列表性能。数据懒加载的示例代码可以参考LazyForEach。

虽然，按需加载列表项可以优化长列表性能，但在快速滑动长列表的场景下，可能会来不及加载需要显示的列表项，导致出现白块的现象，从而影响用户体验。而在ArkUI中，List容器提供了cachedCount属性，LazyForEach可以结合cachedCount属性一起使用，能够避免白块的现象。cachedCount可以设置列表中ListItem/ListItemGroup的预加载数量，并且只在LazyForEach中生效，即cachedCount只能与LazyForEach一起使用。除了List容器，其他容器Grid、Swiper以及WaterFlow也都包含cachedCount属性。cachedCount的使用方法如下所示。

List() {
  // ...
}.cachedCount(3)

此外，HarmonyOS应用框架提供了组件复用能力，可以结合LazyForEach一起使用，进一步优化长列表的性能。组件复用会把组件树上将要移除的组件进行回收，回收的组件会进入到一个回收缓存区。后续创建新组件节点时，会复用缓存区中的节点，节约组件重新创建的时间。关于组件复用的详细原理可以参考组件复用。针对长列表加载的性能优化，可以参考优化长列表加载慢丢帧问题。

示例代码如下：

class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private originDataArray: Array<TimeTable> | Array<CheckboxItemData> = [];

  public totalCount(): number {
    return 0;
  }

  public getData(index: number): TimeTable | CheckboxItemData {
    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);
    })
  }

  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
    })
  }
}

class MyDataSource extends BasicDataSource {
  private dataArray: TimeTable[] | Array<CheckboxItemData> = [];

  constructor(data: Array<TimeTable> | Array<CheckboxItemData>) {
    super();
    this.dataArray = data;
  }

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

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

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

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

  public pushDataTimeTable(data: TimeTable): void {
    (this.dataArray as Array<TimeTable>).push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }

  public pushDataCheckboxItemData(data: CheckboxItemData): void {
    (this.dataArray as Array<CheckboxItemData>).push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }

  public operateCheckboxItemData(isSelect: boolean): void {
    (this.dataArray as Array<CheckboxItemData>).forEach((item) => {
      item.isCheck = isSelect
    })

    this.notifyDataReload()
  }

  public operateCheckboxItem(isSelect: boolean, index: number): void {
    (this.dataArray as Array<CheckboxItemData>)[index].isCheck = isSelect
    this.notifyDataChange(index)
  }

  public getDataSource(): CheckboxItemData[] {
    return this.dataArray as CheckboxItemData[]
  }
}

/*
 * The course schedule data structure, title represents the day of the week, and projects represents the list of courses for that day
 */
@Observed
class CheckboxItemData{
  isCheck: boolean = false;
  itemName: string = '';
  constructor(name:string) {
    this.itemName = name
  }
}
@Observed
class TimeTable {
  title: string = ''
  data: CheckboxItemData[] = [];
  constructor(til:string) {
    this.title = til
  }
}

@Entry
@Component
export struct Index {
  @State timeTable: TimeTable[] = [];
  private data1: MyDataSource = new MyDataSource([]);

  @Provide isSelectAllAll:boolean = false

  aboutToAppear(): void {
    for (let index = 0; index < 1000; index++) {
      this.timeTable.push(new TimeTable(`第${index+1}组`))
      for(let j = 0;j<50;j++){
        this.timeTable[index].data.push(new CheckboxItemData(`checkbox-${index+1}-${j}`))
      }
      this.data1.pushDataTimeTable(this.timeTable[index])
    }
  }

  build() {
    Column(){
      Button(this.isSelectAllAll?'全不选':'全选')
        .onClick(()=>{
          this.isSelectAllAll = !this.isSelectAllAll
        })
      List({ space: 3 }) {
        // ForEach(this.timeTable,(item: TimeTable)=>{
        //     ListItem() {
        //       Text(item.title)
        //         .width('100%')
        //         .height(100)
        //         .fontSize(20)
        //         .textAlign(TextAlign.Center)
        //         .backgroundColor(0xFFFFFF)
        //     }
        // },(item: TimeTable) => item.title)
        LazyForEach(this.data1, (item: TimeTable) => {
          ListItem() {
            CheckGroupComp({data:item})
          }
        }, (item: TimeTable) => item.title)
      }
      .cachedCount(5)
      .width('100%')
      .height('100%')
    }
  }
}

@Component
struct CheckGroupComp{
  @ObjectLink data:TimeTable
  private data2: MyDataSource = new MyDataSource([]);
  @State isSelectAll: boolean = false

  @Watch('selectAll') @Consume isSelectAllAll:boolean

  selectAll(){
    this.data2.operateCheckboxItemData(this.isSelectAllAll)
    this.isSelectAll = this.isSelectAllAll
  }

  aboutToAppear(): void {
    if(this.data){
      this.data.data.forEach(it=>{
        this.data2.pushDataCheckboxItemData(it)
      })
    }
  }
  build() {
    Column() {
      Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
        CheckboxGroup({ group: this.data.title+"group" })
          .selectAll(this.isSelectAll)
          .hitTestBehavior(HitTestMode.None)
        Text(`${this.data.title}全选`).fontSize(25).padding(12)
      }.onClick(() => {
        this.isSelectAll = !this.isSelectAll
        this.data2.operateCheckboxItemData(this.isSelectAll)
      }).padding({ left: 10 })

      List({ space: 3 }) {
        LazyForEach(this.data2, (item: CheckboxItemData, index: number) => {
          ListItem() {
            Row() {
              Checkbox({ name: `checkbox-${item}` })
                .select(item.isCheck)
                .onChange((value: boolean) => {
                  this.data2.operateCheckboxItem(value, index)
                  let dataSource = this.data2.getDataSource()
                  this.isSelectAll = dataSource.every((item) => item.isCheck === true)
                })
              Text(item.itemName).fontSize(20)
            }.margin({ left: 10, right: 10 })
          }

        }, (item: CheckboxItemData) => item.itemName + item.isCheck)
      }
      .height(300)
      .cachedCount(5)
    }
  }
}

如果还是不能解决您的问题，麻烦您提供下能复现问题的最小demo吧。