鸿蒙next开发进阶：合理处理高负载组件的渲染示例

最新推荐文章于 2025-02-06 14:08:09 发布

原创

最新推荐文章于 2025-02-06 14:08:09 发布 · 1.1k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#windows #网络 #harmonyos #华为 #前端 #驱动开发 #鸿蒙

介绍

本示例是合理处理高负载组件的渲染文章的示例代码，主要讲解如何通过DisplaySync优化高负载组件的渲染，减少丢帧情况的发生。

效果图预览

使用说明

通过组件复用，加载10年的日历数据，每个复用组件都在aboutToReuse接口中加载一个月的数据。
通过DisplaySync的帧回调接口，在组件复用时将一个月的数据拆成多份，并在每一帧中加载其中一份数据，减少每一帧绘制的组件数量，减少丢帧现象的发生。

实现思路

普通数据加载，详细代码可参考ReusePage.ets。

计算未来10年的日历数据（包括农历日期），放入数组中待用。

initCalenderData() {
  hiTraceMeter.startTrace('push_data_direct', 1);
  for (let k = this.currentYear; k < 2035; k++) {
    ...
  }
  hiTraceMeter.finishTrace('push_data_direct', 1);
}

通过List组件，在组件复用的aboutToReuse接口中直接加载数据

...
List() {
  LazyForEach(this.contentData, (monthItem: Month) => {
    ListItem() {
      ItemView({
        monthItem: monthItem,
        currentMonth: this.currentMonth,
        currentDay: this.currentDay
      }).reuseId("reuse_id_" + monthItem.days.length.toString())
    }
  })
}
...

@Reusable
@Component
struct ItemView {
  ...
  aboutToReuse(params: Record<string, Object>