HarmonyOS | 状态管理(五) | @Observed装饰器和@ObjectLink装饰器

系列文章目录

1.HarmonyOS | 状态管理(一) | @State装饰器
2.HarmonyOS | 状态管理(二) | @Prop装饰器
3.HarmonyOS | 状态管理(三) | @Link装饰器
4.HarmonyOS | 状态管理(四) | @Provide和@Consume装饰器


文章目录

  • 系列文章目录
  • 前言
  • 一、@ObjectLink和@Observed类装饰器用于哪些场景?
  • 二、特性
  • 三、限制条件
  • 四、使用场景
    • 1.观察变化和行为表现
    • 2.嵌套对象
    • 3.对象数组
  • 五、总结


前言

学习到这里,我们之前只是学习了单个类或者属性状态的管理,现在我们这篇就讲讲多个类,数组,嵌套类的状态管理:@Observed装饰器和@ObjectLink装饰器


一、@ObjectLink和@Observed类装饰器用于哪些场景?

@ObjectLink和@Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步

二、特性

  • @Observed 装饰的类,可以被 观察到属性的变化

  • 子组件@ObjectLink装饰器 装饰的状态变量用于 接收@Observed装饰的类的实例,和 父组件对应的状态变量 建立 双向数据绑定

  • 单独 使用 @Observed没有任何作用的,需要搭配 @ObjectLink 或者 @Prop 使用。

三、限制条件

  • 使用 @Observed 装饰class会 改变class原始的原型链,@Observed和其他类装饰器装饰同一个class可能会带来问题。
  • @ObjectLink装饰器 不能@Entry装饰 的自定义组件中使用。

四、使用场景

1.观察变化和行为表现

观察的变化

class ClassA {public c: number;constructor(c: number) {this.c = c;}
}@Observed
class ClassB {public a: ClassA;public b: number;constructor(a: ClassA, b: number) {this.a = a;this.b = b;}
}

行为表现

@ObjectLink b: ClassB// 赋值变化可以被观察到
this.b.a = new ClassA(5)
this.b.b = 5// ClassA没有被@Observed装饰,其属性的变化观察不到
this.b.a.c = 5

注:ClassB被@Observed装饰,其成员变量的赋值的变化是可以被观察到的,但对于ClassA,没有被@Observed装饰,其属性的修改不能被观察到。

2.嵌套对象

数据结构

// objectLinkNestedObjects.ets
let NextID: number = 1;@Observed
class ClassA {public id: number;public c: number;constructor(c: number) {this.id = NextID++;this.c = c;}
}@Observed
class ClassB {public a: ClassA;constructor(a: ClassA) {this.a = a;}
}

嵌套类对象的使用方法

@Component
struct ViewA {label: string = 'ViewA1';@ObjectLink a: ClassA;build() {Row() {Button(`ViewA [${this.label}] this.a.c=${this.a.c} +1`).onClick(() => {this.a.c += 1;})}}
}@Entry
@Component
struct ViewB {@State b: ClassB = new ClassB(new ClassA(0));build() {Column() {// in low version,DevEco may throw a warning,but it does not matter.// you can still compile and run.ViewA({ label: 'ViewA #1', a: this.b.a })ViewA({ label: 'ViewA #2', a: this.b.a })Button(`ViewB: this.b.a.c+= 1`).onClick(() => {this.b.a.c += 1;})Button(`ViewB: this.b.a = new ClassA(0)`).onClick(() => {this.b.a = new ClassA(0);})Button(`ViewB: this.b = new ClassB(ClassA(0))`).onClick(() => {this.b = new ClassB(new ClassA(0));})}}
}

ViewB中的事件句柄:

  • this.b.a = new ClassA(0) 和this.b = new ClassB(new ClassA(0)): 对@State装饰的变量b和其属性的修改。

  • this.b.a.c = … :该变化属于第二层的变化,@State无法观察到第二层的变化,但是ClassA被@Observed装饰,ClassA的属性c的变化可以被@ObjectLink观察到。

ViewA中的事件句柄:

  • this.a.c += 1:对@ObjectLink变量a的修改,将触发Button组件的刷新。@ObjectLink和@Prop不同,@ObjectLink不拷贝来自父组件的数据源,而是在本地构建了指向其数据源的引用。

  • @ObjectLink变量是只读的,this.a = new ClassA(…)是不允许的,因为一旦赋值操作发生,指向数据源的引用将被重置,同步将被打断。

3.对象数组

@Component
struct ViewA {// 子组件ViewA的@ObjectLink的类型是ClassA@ObjectLink a: ClassA;label: string = 'ViewA1';build() {Row() {Button(`ViewA [${this.label}] this.a.c = ${this.a.c} +1`).onClick(() => {this.a.c += 1;})}}
}@Entry
@Component
struct ViewB {// ViewB中有@State装饰的ClassA[]@State arrA: ClassA[] = [new ClassA(0), new ClassA(0)];build() {Column() {ForEach(this.arrA,(item) => {ViewA({ label: `#${item.id}`, a: item })},(item) => item.id.toString())// 使用@State装饰的数组的数组项初始化@ObjectLink,其中数组项是被@Observed装饰的ClassA的实例ViewA({ label: `ViewA this.arrA[first]`, a: this.arrA[0] })ViewA({ label: `ViewA this.arrA[last]`, a: this.arrA[this.arrA.length-1] })Button(`ViewB: reset array`).onClick(() => {this.arrA = [new ClassA(0), new ClassA(0)];})Button(`ViewB: push`).onClick(() => {this.arrA.push(new ClassA(0))})Button(`ViewB: shift`).onClick(() => {this.arrA.shift()})Button(`ViewB: chg item property in middle`).onClick(() => {this.arrA[Math.floor(this.arrA.length / 2)].c = 10;})Button(`ViewB: chg item property in middle`).onClick(() => {this.arrA[Math.floor(this.arrA.length / 2)] = new ClassA(11);})}}
}
  • this.arrA[Math.floor(this.arrA.length/2)] = new ClassA(…) :该状态变量的改变触发2次更新:
    ForEach:数组项的赋值导致ForEach的itemGenerator被修改,因此数组项被识别为有更改,ForEach的item builder将执行,创建新的ViewA组件实例。

  • ViewA({ label: ViewA this.arrA[last], a: this.arrA[this.arrA.length-1] }):上述更改改变了数组中第二个元素,所以绑定this.arrA[1]的ViewA将被更新;

  • this.arrA.push(new ClassA(0)) : 将触发2次不同效果的更新:
    ForEach:新添加的ClassA对象对于ForEach是未知的itemGenerator,ForEach的item builder将执行,创建新的ViewA组件实例。

  • ViewA({ label: ViewA this.arrA[last], a: this.arrA[this.arrA.length-1] }):数组的最后一项有更改,因此引起第二个ViewA的实例的更改。对于ViewA({ label: ViewA this.arrA[first], a: this.arrA[0] }),数组的更改并没有触发一个数组项更改的改变,所以第一个ViewA不会刷新。

  • this.arrA[Math.floor(this.arrA.length/2)].c:@State无法观察到第二层的变化,但是ClassA被@Observed装饰,ClassA的属性的变化将被@ObjectLink观察到。


五、总结

  1. @Observed 装饰的类,可以被 观察到属性的变化

  2. 子组件@ObjectLink装饰器 装饰的状态变量用于 接收@Observed装饰的类的实例,和 父组件对应的状态变量 建立 双向数据绑定

  3. 单独 使用 @Observed没有任何作用的,需要搭配 @ObjectLink 或者 @Prop 使用。

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

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

相关文章

Mendix 10.7 发布- Go Mac It!

在我们上个月发布了硕果累累的 Mendix 10.6 MTS 之后,您是否还没有抚平激动的情绪?好吧,不管您是否已经准备好,本月将带来另一个您想知道的大亮点——Mac版Studio Pro!但这还不是全部。本月,我们还将推出Re…

Kafka安全模式之身份认证

一、简介 Kafka作为一个分布式的发布-订阅消息系统,在日常项目中被频繁使用,通常情况下无论是生产者还是消费者只要订阅Topic后,即可进行消息的发送和接收。而kafka在0.9.0.0版本后添加了身份认证和权限控制两种安全服务,本文主要…

Android和Linux的开发差异

最近开始投入Android的怀抱。说来惭愧,08年就听说这东西,当时也有同事投入去看,因为恶心Java,始终对这玩意无感,没想到现在不会这个嵌入式都快要没法搞了。为了不中年失业,所以只能回过头又来学。 首先还是…

dcat admin 自定义页面

自定义用户详情页 整体分为两部分:用户信息、tab框 用户信息采用自定义页面加载,controller代码如下: protected function detail($id) {return Show::make($id, GameUser::with(finance), function (Show $show) {// 这段就是加载自定义页面…

git 中使用git clean删除未跟踪Untracked的文件

git clean -nf 是 Git 中的一个命令。让我们分解一下这个命令的意思: git clean: 这是一个命令,其功能是用来删除未被跟踪的文件。 -n:这是一个选项,也可以写作 --dry-run。添加这个选项后,命令将显示哪些文件会被删除…

go 的使用总结

go的内存逃逸? go语言在编辑阶段通过逃逸分析把分配在栈上变量 分配到堆上去。 栈内存: 一段连续的内存,便于高效运行指令过程中的临时变量存储。 堆内存: 主要由垃圾回收器 回收没有被引用的指针。 逃逸分析:栈内…

.NET Core Web API注册和发现实例

在.NET Core Web API中,服务注册和发现是实现微服务架构的重要组成部分。通过注册服务实例,客户端能够动态地找到可用的服务端点,从而实现服务的透明调用。在.NET Core中,有多种方式可以实现服务注册和发现,例如使用Co…

frp 内网穿透 linux部署版

frp 内网穿透 linux部署版 前提安装 frp阿里云服务器配置测试服务器配置访问公网 前提 使用 frp,您可以安全、便捷地将内网服务暴露到公网,通过访问公网 IP 直接可以访问到内网的测试环境。准备如下: 公网 IP已部署好的测试服务 IP:端口号阿…

【可实战】被测系统业务架构、系统架构、技术架构、数据流、业务逻辑分析

一、为什么要学习 更深的理解业务逻辑(公司是做什么的?它最重要的商务决策是什么?它里面的数据流是怎么做的?有哪些业务场景?考验你对这家公司、对所负责业务的熟悉程度。公司背后服务器用什么软件搭建的?…

小程序框架(概念、工作原理、发展及应用)

引言 移动应用的普及使得用户对于轻量级、即时可用的应用程序需求越来越迫切。在这个背景下,小程序应运而生,成为一种无需下载安装、即点即用的应用形式,为用户提供了更便捷的体验。小程序的快速发展离不开强大的开发支持,而小程…

Cypher语句查询neo4j数据库教程

文章目录 Cypher介绍执行Cypher语句查询总结 Cypher介绍 NodeMatcher和RelationshipMatcher能够表达的匹配条件相对简单,更加复杂的查询还是需要用Cypher语句来表达。 Py2neo本身支持执行Cypher语句的执行,可以将复杂的查询写成Cypher语句,…

ubuntu20下使用 torchviz可视化计算图

安装 torchviz: pip install torchviz示例代码:下面是一个简单的示例代码,展示如何使用 torchviz 可视化计算图: python import torch from torchviz import make_dot# 创建一个简单的模型 model torch.nn.Sequential(torch.nn…

40+个适合高中生探索的计算机科学研究思路课题

作为一名对计算机科学感兴趣的高中生,应该如何提升对这个学科的的认知呢?进行研究就是一个不错的选择,通过研究,你可以加深对这个领域的理解,获得宝贵的技能,并为社会做出贡献! 研究经验可以…

【办公类-21-05】20240227单个word按“段落数”拆分多个Word(成果汇编 只有段落文字 1拆5)

作品展示 背景需求 前文对一套带有段落文字和表格的word进行13份拆分 【办公类-21-04】20240227单个word按“段落数”拆分多个Word(三级育婴师操作参考题目1拆13份)-CSDN博客文章浏览阅读293次,点赞8次,收藏3次。【办公类-21-04…

Qt中控件pushbutton的使用

pushbutton控件的使用 pushbutton生成的方式 ①纯代码生成:通过代码实现pushbutton控件所有的属性,不推荐; ②纯UI界面生成:通过拖动工具栏中已有的pushbutton控件进行实现,但一些属性设置上,纯UI界面操作…

电商数据分析10——电商行业中的用户画像构建与数据分析应用

目录 写在开头1. 用户画像的概念和重要性1.1 用户画像定义1.2 用户画像在电商中的应用价值 2. 构建用户画像的数据分析方法2.1 数据收集与处理2.2 关键特征提取和用户分类2.3 用户行为和偏好分析 3. 用户画像在电商营销中的应用案例3.1 个性化推荐系统3.1.1 背景介绍3.1.2 问题…

【六袆-Golang】Golang:安装与配置Delve进行Go语言Debug调试

安装与配置Delve进行Go语言Debug调试 一、Delve简介二、win-安装Delve三、使用Delve调试Go程序[命令行的方式]四、使用Golang调试程序 Golang开发工具系列:安装与配置Delve进行Go语言Debug调试 摘要: 开发环境中安装和配置Delve,一个强大的G…

高通 AI Hub 上手指南

文章介绍 2月26日,高通在2024年世界移动通信大会(MWC2024)上发布高通AI Hub, AI Hub 简化了AI 模型部署到边缘设备的过程。可以利用AI-hub云端托管 Qualcomm 设备上,在几分钟内完成模型的优化、验证和部署。本文以Pyto…

RV32/64 特权架构 - 特权模式与指令

RV32/64 特权架构 - 特权模式与指令 1 特权模式2 特权指令2.1 mret(从机器模式返回到先前的模式)2.2 sret(从监管模式返回到先前的模式)2.3 wfi(等待中断)2.4 sfence.vma(内存屏障) …

idea 更新maven java版本变化

今天遇到个问题就是&#xff0c;点击maven的reload&#xff0c;会导致setting 里的java compiler 版本变化 这里的话&#xff0c;应该是settings.xml文件里面的这个限定死了&#xff0c;修改一下或者去掉就可以了 <profile><id>JDK-1.8</id><activatio…