鸿蒙开发OpenHarmony组件复用案例

这篇具有很好参考价值的文章主要介绍了鸿蒙开发OpenHarmony组件复用案例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

概述

在开发应用时,有些场景下的自定义组件具有相同的组件布局结构,仅有状态变量等承载数据的差异。这样的组件缓存起来,需要使用到该组件时直接复用, 减少重复创建和渲染的时间,从而提高应用页面的加载速度和响应速度。

在OpenHarmony应用开发时,自定义组件被@Reusable装饰器修饰时表示该自定义组件可以复用。在父自定义组件下创建的可复用组件从组件树上移除后,会被加入父自定义组件的可复用节点缓存里。 在父自定义组件再次创建可复用组件时,会通过更新可复用组件的方式,从缓存快速创建可复用组件。这就是OpenHarmony的组件复用机制。

本文会介绍开发OpenHarmony应用时如何使用组件复用能力。

环境准备

准备一个DevEco Studio,使用真机或者Simulator模拟器来验证。

组件复用接口

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)
    }
  }
}

本文主要是对鸿蒙开发基础当中的OpenHarmony技术组件复用示例,更多鸿蒙开发OpenHarmony技术可以在主页阅读更多,下面分享一张鸿蒙4.0的学习路线图:(略缩版)

鸿蒙开发xcomponent,鸿蒙开发,harmonyos,华为,程序员,移动开发,OpenHarmony,鸿蒙开发,鸿蒙

高清完整版可以在主页保存↓↓↓(附文档鸿蒙4.0)

鸿蒙开发xcomponent,鸿蒙开发,harmonyos,华为,程序员,移动开发,OpenHarmony,鸿蒙开发,鸿蒙

注意事项

@Reusable之前的装饰器的名称为@Recycle,旧名称不使用了。

ForEach渲染控制具有全展开的特性,不能触发组件复用。文章来源地址https://www.toymoban.com/news/detail-803727.html

到了这里,关于鸿蒙开发OpenHarmony组件复用案例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HarmonyOS 鸿蒙开发DevEco Studio OpenHarmony:使用低代码进行开发

    OpenHarmony低代码开发方式,具有丰富的UI界面编辑功能,遵循JS、TS开发规范 ,通过可视化界面开发方式快速构建布局,可有效降低用户的时间成本和提升用户构建UI界面的效率。 说明 支持使用低代码进行JS/eTS页面开发,本章节以开发eTS页面为例,介绍低代码功能及使用方法。

    2024年02月19日
    浏览(60)
  • HarmonyOS 鸿蒙开发DevEco Studio OpenHarmony:编译构建概述

    目录 OpenHarmony构建体系 构建工具Hvigor 构建插件hvigor-ohos-plugin 工程目录及配置文件说明 如何构建应用/服务 启动应用/服务构建 查看编译过程

    2024年02月22日
    浏览(64)
  • OpenHarmony鸿蒙南向开发案例:【智能门铃】

    样例简介 智能门铃通过监控来访者信息,告诉主人门外是否有人按铃、有陌生人靠近或者无人状态。主人可以在数字管家中远程接收消息,并根据需要进行远程取消报警和一键开锁。同时,也可以通过室内屏幕获取门外状态。室内屏幕显示界面使用DevEco Studio 编写的js应用,

    2024年04月26日
    浏览(37)
  • OpenHarmony鸿蒙南向开发案例:【智能猫眼(基于3518开发板)】

    样例简介 本Demo是基于Hi3518开发板,使用开源OpenHarmony开发的RTSP协议流媒体应用。达到将Hi3518开发板中摄像头获取的数据通过RTSP协议传输到手机并显示 。 rtsp实现可参考文档:openharmony_1.0.1实现RTSPServer 运行效果 样例原理 如上图所示,手机播放3518摄像头采集的视频数据。 工

    2024年04月28日
    浏览(59)
  • HarmonyOS/OpenHarmony(Stage模型)卡片开发AbilityStage组件容器

    AbilityStage是一个Module级别的组件容器,应用的HAP在首次加载时会创建一个AbilityStage实例,可以对该Module进行初始化等操作。 AbilityStage与Module一一对应,即一个Module拥有一个AbilityStage。 DevEco Studio默认工程中未自动生成AbilityStage,如需要使用AbilityStage的能力,可以手动新建一个

    2024年02月11日
    浏览(40)
  • HarmonyOS/OpenHarmony应用开发-Stage模型应用/组件级配置

    在开发应用时,需要配置应用的一些标签,例如应用的包名、图标等标识特征的属性。本文描述了在开发应用需要配置的一些关键标签。图标和标签通常一起配置,可以分为应用图标、应用标签和入口图标、入口标签,分别对应 app.json5配置文件 和 module.json5配置文件 文件中的

    2024年02月13日
    浏览(63)
  • HarmonyOS/OpenHarmony应用开发-Stage模型UIAbility组件使用(一)

    一、UIAbility组件概述 1.概述 UIAbility组件是一种包含UI界面的应用组件,主要用于和用户交互。 UIAbility组件是系统调度的基本单元,为应用提供绘制界面的窗口;一个UIAbility组件中可以通过多个页面来实现一个功能模块。每一个UIAbility组件实例,都对应于一个最近任务列表中的

    2024年02月11日
    浏览(48)
  • HarmonyOS/OpenHarmony应用开发-Stage模型UIAbility组件使用(六)

    本文将从如下场景分别介绍设备内UIAbility间的交互方式。 启动应用内的UIAbility。启动应用内的UIAbility并获取返回结果。启动其他应用的UIAbility。启动其他应用的UIAbility并获取返回结果。启动UIAbility的指定页面。通过Call调用实现UIAbility交互(仅对系统应用开放)。 当使用隐式

    2024年02月16日
    浏览(51)
  • HarmonyOS/OpenHarmony应用开发-Stage模型UIAbility组件使用(五)

    UIAbility组件间交互(设备内) UIAbility是系统调度的最小单元。在设备内的功能模块之间跳转时,会涉及到启动特定的UIAbility,该UIAbility可以是应用内的其他UIAbility,也可以是其他应用的UIAbility(例如启动三方支付UIAbility)。 本文将从如下场景分别介绍设备内UIAbility间的交互

    2024年02月16日
    浏览(42)
  • HarmonyOS鸿蒙原生应用开发设计- 服务组件库

    HarmonyOS设计文档中,为大家提供了一些已经设计好的原生服务组件库,开发者可以根据需要直接引用。 开发者直接使用官方提供的服务组件库样式,既可以符合HarmonyOS原生应用的开发上架运营规范,又可以防止使用别人的内容产生的侵权意外情况等,减少自主创作设计的工作

    2024年02月08日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包