HarmonyOS 鸿蒙Next中Repeat组件如何实现更换数据源后再次感知曝光

小伙伴你好，可以通过将 Repeat 遍历的内容抽离成独立的自定义组件，使用 [@Component](/user/Component) 装饰器的 aboutToAppear 生命周期方法来实现曝光埋点上报。详细请参考 Repeat 组件文档。

解决方案

使用 @Component 抽离组件，利用 aboutToAppear 生命周期

说明：将 Repeat 遍历的内容抽离成独立的自定义组件，使用 [@Component](/user/Component) 装饰器。当数据源更新时，即使组件实例被复用，aboutToAppear 生命周期也会在每次组件即将显示时触发，可以在此进行曝光埋点上报。这是最推荐的方式，既解决了生命周期触发问题，又符合组件化开发的最佳实践。

步骤：

1. 创建独立的卡片组件

将 Repeat 遍历的内容抽离成独立的自定义组件：

/**
 * 卡片组件
 * 使用 [@Component](/user/Component) 装饰器，支持完整的生命周期回调
 */
[@Component](/user/Component)
struct CardItem {
  @Prop cardData: CardData = { id: '', title: '', content: '' };

  /**
   * 组件即将出现时触发
   * 每次组件显示时都会触发，包括数据更新后的重新显示
   */
  aboutToAppear(): void {
    console.info(`Card ${this.cardData.id} is about to appear. `);
    // 进行曝光埋点上报
    this.reportExposure();
  }

  /**
   * 组件即将消失时触发
   * 组件从组件树中移除前触发
   */
  aboutToDisappear(): void {
    console.info(`Card ${this.cardData.id} is about to disappear.`);
    // 可以进行清理操作
  }

  /**
   * 曝光埋点上报
   */
  private reportExposure(): void {
    // 调用埋点上报接口
    // 例如：埋点SDK.report({ event: 'card_exposure', data: this.cardData });
    console.info(`Reporting exposure for card: ${this.cardData.id}`);
  }

  build() {
    Column() {
      Text(this.cardData.title)
        .fontSize(18)
        .fontWeight(FontWeight.Medium)
        .margin({ bottom: 8 })

      Text(this.cardData.content)
        .fontSize(14)
        .fontColor('#666666')
    }
    .width('100%')
    .padding(16)
    .backgroundColor('#FFFFFF')
    .borderRadius(8)
    .margin({ bottom: 12 })
  }
}

2. 在 Repeat 中使用自定义组件

在 Repeat 组件中使用新创建的 CardItem 组件：

/**
 * 卡片列表页面
 */
@Entry
@ComponentV2
struct CardListPage {
  @Local cardList: CardData[] = [];

  /**
   * 加载卡片数据
   */
  private loadCardData(): void {
    // 模拟数据请求
    // 当数据更新时，CardItem 的 aboutToAppear 会触发
    this.cardList = [
      { id: '1', title: '卡片1', content: '内容1' },
      { id: '2', title: '卡片2', content: '内容2' },
      { id: '3', title: '卡片3', content: '内容3' }
    ];
  }

  /**
   * 更新卡片数据
   */
  private updateCardData(): void {
    // 更新数据源
    this.cardList = this.cardList.map((card) => {
      const newCard = card;
      newCard.content = `${card.content} (已更新)`;

      return newCard;
    });
    // 数据更新后，CardItem 的 aboutToAppear 会再次触发
  }

  build() {
    Column() {
      // 操作按钮
      Row() {
        Button('加载数据')
          .onClick(() => {
            this.loadCardData();
          })
        Button('更新数据')
          .onClick(() => {
            this.updateCardData();
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)
      .padding(16)

      // 卡片列表
      List() {
        Repeat(this.cardList)
          .each(obj => {
            ListItem() {
              CardItem({ cardData: obj.item })
            }
          })
          .key((item: CardData) => item.id) // 设置唯一 key
      }
      .width('100%')
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
  }
}

/**
 * 卡片数据接口
 */
interface CardData {
  id: string;
  title: string;
  content: string;
}