鸿蒙系列-如何使用好 ArkUI 的 @Reusable?

如何使用好 ArkUI 的 @Reusable?

OpenHarmony 组件复用机制

在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为 系统组件,由开发者定义的称为 自定义组件

在进行 UI 界面开发时,通常不是简单的将系统组件进行组合使用,而是需要考虑代码可复用性、业务逻辑与UI分离,后续版本演进等因素。因此,将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。

本文主要对组件复用做一些基本介绍,然后对 @Reusable做分析,进而帮助开发者理解设置前后的效果,以及我们会尝试寻找何时使用这个属性最佳,进而给开发者提出参考方案。

为什么要组件复用?

使用组件复用往往是解决资源短缺的问题,通过节约内存节省资源,简称开源节流。

开源节流是我国理财的基本原则之一。开源指开拓财政收入来源,节流指尽可能减少不必要的支出,或少花钱多办事。

荀子《富国》
荀子在《富国》篇中说“故田野县鄙者,财之本也;垣窌仓廪者,财之末也;百姓时和,事业得叙者,货币之源也;等赋府库者,货之流也。故明君必养其和、节其流、开其源而时斟酌焉。”其意系指农业是创造财富的根本大业,聚财只是其结果,货币只是流通的手段,财政收入只能从流通中取得,故用扩大流通的方式来增加收入,对增加财富并无好处。

同理,鸿蒙系统的内存是非常宝贵的,它不仅需要提供给底层系统维持系统正常运行,还要分配给网络、通知、后台任务、传感器、中断等一系列工作。那么我们在应用开发时就要想办法节约内存,为系统工作分忧。

@Reusable组件复用装饰器

在 ArkUI中,使用 @Component装饰器修饰组件,组件允许开发者组合使用系统组件、及其属性和方法,并通过状态变量的改变,来驱动UI的刷新。 @Reusable是修饰组件的属性,赋予组件重用的特性。
在这里插入图片描述

什么是@Reusable?

@Reusable 是一个装饰器,它可以标识自定义组件具备可复用的能力,也可以被添加到任意的自定义组件上。并且也可以在跨平台提供响应的能力。整体来说,它是 ArkUI的一部分。

它的定义如下:

/*** Defining Reusable ClassDecorator.** @syscap SystemCapability.ArkUI.ArkUI.Full* @crossplatform* @since 10*/
declare const Reusable: ClassDecorator;

可以看出,Reusable 实际上是一个 ClassDecorator , 那么它的内部结构是如何的呢?

从上图可以分析并查看 component构造函数:

    constructor(parent, localStorage, elmtId = -1) {super();...this.recycleManager = undefined;...
}

component的构造函数中我们发现,每一个 component持有一个 recycleManagerrecycleManager参与管理 Reusable 组件,那么 recycleManager是如何管理复用组建的呢?

接下来我们再看它的后端实现逻辑:

视图层的关系如下:

视图层是通过js实现的,

  1. xxx
  2. xxx

…todo

我们在视图树的结构中发现一个环,众所周知,环会产生内存泄漏,所以在页面退出时,需要将 RecycleManager中持有的view全部手动释放,以此来破环。

当组件被重用时,就会触发 aboutToReuse 方法:

aboutToReuse?(params: { [key: string]: unknown }): void;

在这个函数中就可以重载数据。

连接层的关系如下:

连接层是桥接 js 和 c++的中间层。

我们在 js_ace_page.h文件中发现以下代码,可以验证持有关系。

namespace OHOS::Ace::Framework {...
private:
#ifndef NG_BUILDvoid SwapBackgroundDecoration(const RefPtr<PageTransitionComponent>& transition);
#endif...RefPtr<Component> component_;
...
}

节点层的关系如下:

节点层是通过c++实现的。

  1. xxx
  2. xxx

…todo

那么我们接下来看下组件复用发生和不发生时的区别:

组件复用发生时:

在复用组件在view显示后,组织结构如下:

在c++
构造树中,当@Reusable修饰的组建复用后,JSView强持有c++的view,page的实例被RecycleManager 管理持有。

此时如果page被回收,由于 c++的view 被jsview强持有,就无法得到释放。所以需要在c++的析构中,对RecycleManager中所有的 复用组件释放,完成手动释放。

组件复用不发生时:

在复用组件从view移除后,组织结构发生如下变化:

在c++
构造树中,当@Reusable修饰的组建删除后,JSView不再强持有c++的view,此时c++的view被RecycleManager 管理持有,等待下一次被重用。

此时如果page被回收,由于 c++的view 并没有被jsview强持有,就可以得到释放。

。。todo

实战:@Reusable 可以解决的问题:

现在我们知道了 @Reusable 的基本功能,那么它在实际开发中可以解决什么问题呢?根据我的思考🤔️和整理,主要可以解决以下三类问题。

问题一:解决组件嵌套过深:

子组件通过@Prop接收父组件传递的数据,如果嵌套的层数过多,会导致深拷贝占用的空间过大以及GarbageCollection(垃圾回收),引起性能问题。通过 @Reusable可解决嵌套的层数过多的问题。

那么 @Reusable是如何解决这个问题的?请看下文:

我们在开发时往往会遇到多层组件嵌套的场景,通俗说就是view中套子view,子view中又套孙子view,以此类推。
这样就会产生一个嵌套过深的问题参考,见下图:

具体代码如下:

@Entry
@Component
struct FatherView {@State vote: ClassE = new ClassE()build() {Column() {Button('change').onClick(() => {this.vote.name = "I'm Father"})Child({ voteOne: this.vote })}}
}@Component
struct SonView {@Prop voteOne: ClassEbuild() {Column() {Button('change').onClick(() => {this.vote.name = "I'am Son"})Child({ voteTwo: this.vote })}}
}@Component
struct SonView {@Prop voteTwo: ClassDbuild() {Column() {Button('change').onClick(() => {this.vote.name = "I'am grandson"})Child({ voteThree: this.vote })}}
}...

在不断增加层次后,问题产生了:

  1. 由于层次过深,代码难以阅读,并且传递关系过于复杂,传递依赖链过长,不满足第三范式。
    第三范式:表中每一列的属性都不可再分,且非主属性完全依赖于主属性,且每个非主属性都不传递函数依赖于主属性。 https://en.wikipedia.org/wiki/Third_normal_form

  2. 可能触发GarbageCollection(垃圾回收机制),产生问题。

具体什么条件会触发,暂无资料,还需要相关子系统提供源码分析🧐。

那么在使用 @Reusable优化后的效果如下:

具体代码如下:

@Entry
@Component
struct FatherView {@State vote: ClassE = new ClassE()build() {Column() {Button('change').onClick(() => {this.vote.name = "I'm Father"})Child({ voteOne: this.vote })}}
}@@Reusable
@Component
struct SonView {@Prop voteOne: ClassEbuild() {Column() {Button('change').onClick(() => {this.vote.name = "I'am Son"})Child({ voteTwo: this.vote })}}
}@@Reusable
@Component
struct SonView {@Prop voteTwo: ClassDbuild() {Column() {Button('change').onClick(() => {this.vote.name = "I'am grandson"})Child({ voteThree: this.vote })}}
}...

在使用 @Reusable优化后,问题解决了:

  1. 消除了传递依赖,代码层次结构更清晰了,对于组件间互相交互也更好处理,在深拷贝的传递链上已满足第三范式。

  2. 深度只有2层,100%避免了由于深度增加触发GarbageCollection(垃圾回收机制)的条件,避免产生问题。

问题二:减少创建控件时间:

。。todo

问题三:使代码更优雅:

。。todo

总结:

。。todo

个人观点:

。。todo

相关扩展:

。。todo

– 缓冲池机制:

传统的 LRU:

什么是预读失败?

什么是缓冲池污染?

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/69579.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NIO原理浅析(三)

epoll 首先认识一下epoll的几个基础函数 int s socket(AF_INET, SOCK_STREAM, 0); bind(s, ...); listen(s, ...);int epfd epoll_create(...) epoll_ctl(epfd, ...); //将所有需要监听的socket添加到epfd中while(1) {int n epoll_wait(...);for(接受到数据的socket) {//处…

Kotlin 环境下解决属性初始化问题

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

react使用hook封装一个tab组件

目录 react使用hook封装一个tab组件Tabbar.jsx使用组件效果 react使用hook封装一个tab组件 Tabbar.jsx import PropsTypes from "prop-types"; import React, { useEffect, useState } from react; export default function Tabbar(props) {const { tabData , cur…

使用pip下载第三方软件包报错超时处理方法

报错如下&#xff1a; WARNING: Retrying (Retry(total4, connectNone, readNone, redirectNone, statusNone)) after connection broken by ‘ReadTimeoutEr ror(“HTTPSConnectionPool(host‘files.pythonhosted.org’, port443): Read timed out. (read timeout15)”)’: /p…

Maven编译java及解决程序包org.apache.logging.log4j不存在问题

1、首先新建一个文件夹&#xff0c;比如hello Hello里新建pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi…

git快速使用

1、下载git 设置签名 2、基本概念 工作区&#xff1a;写代码的地方。 暂存区&#xff1a;.git的.index 工作区&#xff1a;.git 3、常用操作 本地codinggit init&#xff0c; 初始化一个本地仓库&#xff0c;项目根目录下会出现个.gitgit remote add origin gitgithub.com…

[杂谈]-快速了解LoRaWAN网络以及工作原理

快速了解LoRaWAN网络以及工作原理 文章目录 快速了解LoRaWAN网络以及工作原理1、LoRaWAN网络元素1.1 终端设备&#xff08;End Devices&#xff09;1.2 网关&#xff08;Gateways&#xff09;1.3 网络服务器&#xff08;Net Server&#xff09;1.4 应用服务器&#xff08;Appli…

OpenCV(二十一):椒盐噪声和高斯噪声的产生

目录 1.图像噪声介绍 2.椒盐噪声的产生 3.高斯噪声的产生 1.图像噪声介绍 噪声介绍 图像噪声是指在图像中存在的不期望的、随机的像素值变化&#xff0c;这些变化来源于多种因素。噪声可能导致图像细节模糊、失真或难以分辨。 以下是几种常见的图像噪声类型&#xff1a; 1…

Unity中神秘的Transform和transform(小写)的关系

1.为什么Transform类是保护的不能通过new 来实例化对象,也没有静态函数,而Rotate()这种方法却属于它,该如何访问? Transform 类还是被保护的不允许用户修改! protected Transform(); 是一个受保护的构造函数,不能直接实例化 Transform 类。 2.为甚么transform可以访问Tr…

Mac Homebrew中常用的 Brew 命令

Mac 中常用的 Brew 命令集 Brew&#xff08;Homebrew&#xff09;是一个强大的包管理器&#xff0c;用于在 macOS 上安装、更新和管理各种软件包。它使得在 Mac 上安装开发工具、应用程序和库变得轻松和便捷。本博客将介绍一些在 Mac 中常用的 Brew 命令&#xff0c;以帮助您更…

【Springcloud】Sentinel熔断和降级

【Springcloud】Sentinel熔断和降级 【一】基本介绍【1】什么是熔断和降级【2】为什么使用熔断和降级【3】Sentinel熔断和降级【4】核心概念 【二】下载方式【1】Windows平台安装包下载【2】打开控制台 【三】使用案例【1】添加依赖【2】添加Sentinel配置【3】添加TestUserCont…

线上问诊:数仓开发(一)

系列文章目录 线上问诊&#xff1a;业务数据采集 线上问诊&#xff1a;数仓数据同步 线上问诊&#xff1a;数仓开发(一) 文章目录 系列文章目录前言一、Hive on yarn二、数仓开发1.ODS开发2.DIM开发3.DWD开发 总结 前言 上次我们已经将MYSQL的数据传送到了HDFS&#xff0c;但…

commet与websocket

commet与websocket Comet 前言 Comet是一种用于web的技术&#xff0c;能使服务器能实时地将更新的信息传送到客户端&#xff0c;而无须客户端发出请求&#xff0c;目前有两种实现方式&#xff0c;长轮询和iframe流。 实现方式 长轮询 长轮询是在打开一条连接以后保持&…

关于HarmonyOS元服务的主题演讲与合作签约

一、感言 坚持中&#xff0c;总会有很多意想不到的收获。 前几次参与HDC时更多的是观众、开发者、专家的身份&#xff0c;以参观、学习、交流为主。 通过几年的努力&#xff0c;和HarmonyOS功能成长&#xff0c;在2023年的HDC大会中&#xff0c;有了我的演讲&#xff0c;并带领…

无涯教程-Android Mock Test函数

本节介绍了与 Android 相关的各种模拟测试。您可以在本地计算机上下载这些样本模拟测试,并在方便时离线解决。每个模拟测试均随附一个模拟测试键,可让您验证最终分数并为自己评分。 Mock Test I Mock Test II Mock Test III Mock Test IV Q 1 -什么是Android&#xff1f; A -A…

VMware虚拟机安装CentOS6.9设置静态ip

1.设置虚拟网络编辑器 点击编辑–>虚拟网络编辑器 2.更改系统网络适配器选项 这里的子网掩码与网关&#xff0c;与第一步的一致 3.修改虚拟机主机名 vi /etc/sysconfig/networkNETWORKINGyue HOSTNAMEchen4.配置IP映射 vi /etc/hosts192.168.121.138 chen5.配置网卡…

PyQt5报错Process finished with exit code -1073740791 (0xC0000409)

点击按钮之后&#xff0c;就直接退出程序&#xff0c;控制台出现一个提示&#xff1a;解决办法&#xff1a; 在PyCharm中打开Run菜单&#xff0c;找到Edit Configurations进入&#xff0c;勾选Emulate terminal in output console即可。 然后再运行一下程序&#xff0c;就可以…

Sublime Text汉化,主打简单明了

在Sublime中设置中文的步骤如下&#xff1a; 1.打开Sublime Text&#xff0c;使用快捷键ShiftCtrlP&#xff08;MacOS下cmdShiftP&#xff09;&#xff0c;弹出查找栏。 2.在搜索框中输入关键字"install"&#xff0c;出现下拉选项&#xff0c;点击选择其中的"P…

Cmake qt ,vtkDataArray.cxx.obj: File too big

解决方法&#xff1a; Qt4 在pro 加入“QMAKE_CXXFLAGS -BigObj” 可以解决 Qt5 在网上用“-Wa,-mbig-obj” 不能解决&#xff0c;最后通过“QMAKE_CXXFLAGS -Ofast -flto”解决问题。 Qt4 在pro 加入“QMAKE_CXXFLAGS -BigObj” 可以解决Qt5 在网上用“-Wa,-mbig-obj” …

视频集中存储/云存储/磁盘阵列/视频监控管理平台EasyCVR接入海康SDK后视频播放崩溃的问题排查

视频集中存储/云存储/磁盘阵列/视频监控管理平台EasyCVR可支持海量视频的轻量化接入与汇聚管理。在视频能力上&#xff0c;EasyCVR可实现视频直播、云端录像、检索与回放、云存储、告警上报、语音对讲、电子地图、H.265视频自动转码、服务器集群、AI智能分析接入以及平台级联等…