乐趣区

关于openharmony:OpenHarmony组件复用示例

jiezi

本文转载自《#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
@Component
struct 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
@Component
struct 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)
    }
  }
}

注意事项
能够拜访站点 https://gitee.com/openharmony/developtools_ace_ets2bundle/tre…

查看组件复用的一些示例，这些是用于测试的例子。

@Reusable 之前的装璜器的名称为 @Recycle，旧名称不应用了。ForEach 渲染管制具备全开展的个性，不能触发组件复用。

总结
本文介绍了开发 OpenHarmony 利用时如何应用组件复用能力，提供代码示例，冀望帮忙关注组件复用的开发者敌人们。

如有任何问题，欢送交换探讨。

参考资料
[[1] Sample 聊天实例利用](https://gitee.com/openharmony/applications_app_samples/tree/m…)

[[2] 自定义组件的生命周期](https://gitee.com/openharmony/docs/blob/master/zh-cn/applicat…)
`
[[3] 组件复用场景](https://gitee.com/openharmony/docs/blob/master/zh-cn/applicat…)`

[[4] 组件复用一些示例](https://gitee.com/openharmony/developtools_ace_ets2bundle/tre…)

退出移动版