OpenHarmony 组件复用示例

2023-08-29
中国香港
本文字数：2850 字
阅读完需：约 9 分钟

本文转载自《#2023 盲盒+码 # OpenHarmony 组件复用示例》，作者 zhushangyuan_

●摘要：在开发应用时，有些场景下的自定义组件具有相同的组件布局结构，仅有状态变量等承载数据的差异。这样的组件缓存起来，需要使用到该组件时直接复用，

●减少了创建和渲染的时间，可以提高帧率和用户性能体验。本文会介绍开发 OpenHarmony 应用时如何使用组件复用能力。关键字：OpenHarmony HarmonyOS 鸿蒙 ForEach LazyForEach 循环渲染

概述

在开发应用时，有些场景下的自定义组件具有相同的组件布局结构，仅有状态变量等承载数据的差异。这样的组件缓存起来，需要使用到该组件时直接复用，减少重复创建和渲染的时间，从而提高应用页面的加载速度和响应速度。在 OpenHarmony 应用开发时，自定义组件被 @Reusable 装饰器修饰时表示该自定义组件可以复用。在父自定义组件下创建的可复用组件从组件树上移除后，会被加入父自定义组件的可复用节点缓存里。

在父自定义组件再次创建可复用组件时，会通过更新可复用组件的方式，从缓存快速创建可复用组件。这就是 OpenHarmony 的组件复用机制。本文会介绍开发 OpenHarmony 应用时如何使用组件复用能力。

环境准备

准备一个 DevEco Studio，使用真机或者 Simulator 模拟器来验证。更多关于 DevEco Studio 的信息，请访问：https://developer.harmonyos.com/cn/develop/deveco-studio/。

组件复用接口

OpenHarmony SDK 文件 ets\component\common.d.ts 的自定义组件的生命周期里定义了 aboutToReuse 方法，如下：

自定义组件的生命周期回调函数用于通知用户该自定义组件的生命周期，这些回调函数是私有的，在运行时由开发框架在特定的时间进行调用，不能从应用程序中手动调用这些回调函数。

当一个可复用的自定义组件从复用缓存中重新加入到节点树时，触发 aboutToReuse 生命周期回调，并将组件的构造参数传递给 aboutToReuse。aboutToReuse 函数的参数是字典类型的，键为组件的构造参数变量名称，值为组件的构造参数实际取值。该声明周期函数从 API version 10 开始，该接口支持在 ArkTS 卡片中使用。

declare class CustomComponent extends CommonAttribute {....../**
aboutToReuse Method
@param { { [key: string]: unknown } } params - Custom component init params.
@syscap SystemCapability.ArkUI.ArkUI.Full
@crossplatform
@since 10*/aboutToReuse?(params: { [key: string]: unknown }): void;......}

复制代码

开发实践

我们看下组件复用的实际使用案例。示例中，会创建一个图片列表页面，使用懒加载 LazyForEach，以及组件复用能力。

创建数据源

首先，创建了一个业务对象类 MyImage，包含一个 image_id 图片编号和 image_path 图片路径。根据实际业务的不同，会有差异，此例仅用于演示。

然后，创建一个数据源类 ImageListDataSource，并构造一个列表对象 imageList。可以看到，构造了 10000 条记录。在工程的/resources/images 文件夹下有 50 张图片。

每条记录中，包含一个编号，从 0 到 9999。

记录中，还一个一个图片路径，不同的记录，编号不会重复，图片路径可能重复。至此，数据源类创建完毕。

export class MyImage {  image_id: string  image_path: string  constructor(image_id: string, image_path: string) {    this.image_id = image_id    this.image_path = image_path  }}
export class ImageListDataSource extends BasicDataSource {  private imageList: MyImage[] = []  public constructor() {    super()    for (let i = 0;i < 10000; i++) {      let imageStr = `/resources/images/photo${(i % 50).toString()}.jpg`      this.imageList.push(new MyImage(i.toString(), imageStr))    }  }  public totalCount(): number {    return this.imageList.length  }  public getData(index: number): MyImage {    return this.imageList[index]  }......}

复制代码

创建复用组件

创建好数据源类后，我们再看下可复用组件的代码。

使用装饰器 @Reusable 来标记一个组件是否属于可复用组件。

我们创建的可复用组件有一个状态变量 @State item，构造该自定义组件时，父组件会给子母件传递构造数据。

还需要实现组件复用声明周期回调函数 aboutToReuse，在这个函数里，通过 params 把构造数据传递给可复用组件。

我们在函数 aboutToReus 里，再单独加个一个打印函数，用于在组件复用时，输出一条日志记录。

需要注意的是，正常情况下，aboutToReuse 函数里除了构造参数传值，不要做任何耗时操作。

在可复用组件的 build()方法里，为每条记录渲染一行，包含图片、图片编号和图片路径。

图片编号可以识别渲染的是哪一条数据，用于验证组件复用了正确的组件。

@Reusable@Componentstruct MyListItem {  @State item: MyImage = new MyImage('', '')
  aboutToReuse(params) {    this.item = params.item    Logger.info(TAG, 'aboutToReuse-,item=' + this.item.toString())  }
  build() {    Row({ space: 10 }) {      Image(this.item.image_path)        .width(50)        .height(50)        .borderRadius(5)        .autoResize(false)        .syncLoad(true)      Blank()      Text(this.item.image_id)        .fontColor(Color.Black)        .fontSize(15)      Blank()      Text(this.item.image_path)        .fontColor(Color.Black)        .fontSize(15)    }  }}

复制代码

入口组件

在我们的 @Ent/-·- 件里，在 List 父组件里，可以调用可复用组件 MyListItem。通过{ item: item }完成父子组件参数传递。

reuseId 参数是可选的，用于标记可复用组件的复用类型。属性参数的注释如下：

  /**   * Reuse id is used for identify the reuse type for each custom node.   *    * @param { string } id - The id for reusable custom node.   * @syscap SystemCapability.ArkUI.ArkUI.Full   * @crossplatform   * @since 10   */  reuseId(id: string)

复制代码

入口组件的示例代码如下：

@Entry@Componentstruct Index {  private data: ImageListDataSource = new ImageListDataSource()
  build() {    List({ space: 3 }) {      LazyForEach(this.data, (item: MyImage) => {        ListItem() {          MyListItem({ item: item })            // .reuseId(item.image_id)        }      }, item => item)    }  }}