HarmonyOS入门-状态管理

View(UI):UI渲染,指将build方法内的UI描述和@Builder装饰的方法内的UI描述映射到界面。

State:状态,指驱动UI更新的数据。用户通过触发组件的事件方法,改变状态数据。状态数据的改变,引起UI的重新渲染。



装饰器

ArkUI状态管理V1提供了多种装饰器,通过使用这些装饰器,状态变量不仅可以观察在组件的改变,还可以在不同组件层级间传递,如父子组件、跨组件层级,也可以观察全局范围内的变化 。

1.1根据变量影响范围,分为

1.管理组件拥有状态的装饰器:组伯级别的状态管理,可以观察组件内的变化,和不同的组件层级的变化,但需要唯一观察同一个组件树上,就是同一个界面。

2.管理应用拥有状态的装饰器:应用级别的状态管理,可以观察不同的页面,或者不同的UIAbility的变化,是应用内全局的状态管理。

1.2从数据传递形式同步类型层面上看,分为

1.只读的单向传递

2.可变的双向传递

2.装饰器(关键词)

  • @State:  @State装饰的变量拥有其所属组件的状态,可以作为其子组件单向和双向同步的数据源。当其数值改变时,会引起相关的渲染刷新
  • @Prop: @Prop装饰的变量可以和父组件建立单向同步关系,@Prop装饰的变量是可变的,但修改不会同步回父组件。
  • ####@State# 父组件@State passMsg:string = '传递给子组件的信息'# 调用子组件sonComponent
    sonComponent({msg: this.passMsg}) # 把passMsg传递给子组件------------------------------------------------------------####@Prop
    # 子组件@Prop msg:string # 使用@Prop装饰器接收父组件传入的信息Text(this.msg) # 渲染父组件传入的信息
  • @Link:@Link装饰的变量可以和父组件建立双向同步关系,子组件中@Link装饰变量的修改会同步给父组件中建立双向数据绑定的数据源,父组件的更新也会同步给@Link装饰的变量。@link 区别于@Prop的地方就在于,@Link会双向绑定更新
####@State# 父组件@State passMsg:string = '传递给子组件的信息'Text(this.passMsg) # 同时会跟着子组件数据的变化而变化
# 调用子组件linkSonComponent
linkSonComponent({msg: $passMsg}) # 把passMsg传递给子组件, 传递信息的方式要使用 $ 修饰符------------------------------------------------------------####@Link
# 子组件@Link msg:string # 使用@Link装饰器接收父组件传入的信息Button(this.msg) # 渲染父组件传入的信息.onClick(() => {this.msg = 'hello world' # 子组件数据变化,父组件数据也会变化})

我理解@Link 和 @Prop 区别的地方在于,一个是操作的是拷贝出来的对象,一个是操作的对象的地址,即对象本身。

  • @provide/@Consume:@Provide/@Consume装饰的变量用于跨组件层级(多层组件)同步状态变量,可以不需要通过参数命名机制传递,通过alias(别名)或者属性名绑定。

~~~关键字行为

   1.初始渲染:

  • @Provide装饰的变量会以map的形式,传递给当前@Provide所属组件的所有子组件;
  • 子组件中如果使用@Consume变量,则会在map中查找是否有该变量名/alias(别名)对应的@Provide的变量,如果查找不到,框架会抛出JS ERROR;
  • 在初始化@Consume变量时,和@State/@Link的流程类似,@Consume变量会在map中查找到对应的@Provide变量进行保存,并把自己注册给@Provide。

    2.当@Provide装饰的数据变化时:

  • 通过初始渲染的步骤可知,子组件@Consume已把自己注册给父组件。父组件@Provide变量变更后,会遍历更新所有依赖它的系统组件(elementid)和状态变量(@Consume);
  • 通知@Consume更新后,子组件所有依赖@Consume的系统组件(elementId)都会被通知更新。以此实现@Provide对@Consume状态数据同步。

   3.当@Consume装饰的数据变化时:

  • 通过初始渲染的步骤可知,子组件@Consume持有@Provide的实例。在@Consume更新后调用@Provide的更新方法,将更新的数值同步回@Provide,以此实现@Consume向@Provide的同步更新。

  • @Observed:@Observed装饰class,需要观察多层嵌套场景的class需要被@Observed装饰。单独使用@Observed没有任何作用,需要和@ObjectLink、@Prop联用。
  • @ObjectLink:@ObjectLink装饰的变量接收@Observed装饰的class的实例,应用于观察多层嵌套场景,和父组件的数据源构建双向同步。

@Observed 首先是针对对象使用的不管是class对象,,或者struct对象。

@Observed声明对象范围,@ObjectLink或者@Prop声明实例后对象指针的类型。

this.objLink.a = ... #允许修改this.objLink = ... #不允许修改,想要修改的话,objLink需要使用@Prop关键词修饰,拷贝。

框架行为

  • 初始渲染:

              @Observed装饰的class的实例会被不透明的代理对象包装,代理了class上的属性的settergetter方法

                子组件中@ObjectLink装饰的从父组件初始化,接收被@Observed装饰的class的实例,@ObjectLink的包装类会将自己注册给@Observed class。

  • 属性更新:当@Observed装饰的class属性改变时,会走到代理的setter和getter,然后遍历依赖它的@ObjectLink包装类,通知数据更新。

!说明

仅@Observed/@ObjectLink可以观察嵌套场景,其他的状态变量仅能观察第一层,详情见各个装饰器章节的“观察变化和行为表现”小节。

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

2024权益商城系统网站源码

2024权益商城系统源码,支持多种支付方式,后台商品管理,订单管理,串货管理,分站管理,会员列表,分销日志,应用配置。 上传到服务器,修改数据库信息,导入数据库…

四、GD32 MCU 常见外设介绍 (7) 7.I2C 模块介绍

7.1.I2C 基础知识 I2C(Inter-Integrated Circuit)总线是一种由Philips公司开发的两线式串行总线,用于内部IC控制的具有多端控制能力的双线双向串行数据总线系统,能够用于替代标准的并行总线,连接各种集成 电路和功能模块。I2C器件能够减少电…

deepin深度操作系统安装教程(完整安装步骤·详细图文教程)

官方下载教程 一、概述 如果您首次使用deepin ISO镜像文件来安装deepin系统,无论您之前是否有安装过Windows电脑系统或者Debian、Ubuntu等其他Linux发行版桌面操作系统,我们都建议您先阅读本文档再安装。安装时,您可以选择只安装deepin系统…

Angular由一个bug说起之八:实践中遇到的一个数据颗粒度的问题

互联网产品离不开数据处理,数据处理有一些基本的原则包括:准确性、‌完整性、‌一致性、‌保密性、‌及时性。‌ 准确性:是数据处理的首要目标,‌确保数据的真实性和可靠性。‌准确的数据是进行分析和决策的基础,‌因此…

思维(交互题),CF 1990E2 - Catch the Mole(Hard Version)

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 E2 - Catch the Mole(Hard Version) 二、解题报告 1、思路分析 考虑每次误判都会让鼹鼠上升一层,相应的,最外层的一层结点都没用了 由于数据范围为5000,我们随便找个叶子…

OSPF概述

OSPF OSPF属于内部网关路由协议【IGP】 用于单一自治系统【Autonomous System-AS】内决策路由 自治系统【AS】 执行统一路由策略的一组网络设备的组合 OSPF概述 为了适应大型的网络,OSPF在AS内划分多个区域 每个OSPF路由器只维护所在区域的完整的链路状态信息 …

微服务实战系列之玩转Docker(五)

前言 在我们日常的工作生活中,经常听到的一句话:“是骡子是马拉出来遛遛”。目的是看一个人/物是不是名副其实。我们在使用docker时,也要看看它究竟是如何RUN起来的。当面试官问你的时候,可以如是回答,保你“一文通关…

prometheus tsdb索引布局及查询流程

prometheus 磁盘布局 采集到的数据每两个小时形成一个block。每个block由一个目录组成,并存放在data路径下。该目录包含一个包含该时间窗口的所有时间序列样本的块子目录、一个元数据文件和一个索引文件(将metric_name和label索引到目录下的时间序列&am…

导航不是GPS吗,有人用北斗吗?

在现代生活中,提到导航,人们脑海中最先浮现的往往是GPS。然而,近年来,中国自主研发的北斗导航系统(BeiDou Navigation Satellite System, BDS)正在迅速崛起,逐步占据全球导航市场的一席之地&…

SQL-REGEX-常见正则表达式的使用

SQL-REGEX-常见正则表达式的使用 在SQL中,正则表达式(Regex)的使用可以帮助进行更灵活和精确的模式匹配和数据筛选。不同的数据库管理系统对于正则表达式的支持略有差异,但大体都是相似的。 Tips: 模式描述匹配内容…

洗地机哪个牌子好?推荐四款口碑最好的洗地机

在追求高效、便捷的现代居家环境中,洗地机已然跃升为家庭清洁的新风尚。面对市场上琳琅满目的洗地机产品,洗地机哪个牌子好?如何筛选出那些既拥有卓越清洁能力,又兼备智能化操作及高用户满意度的佼佼者,成为了消费者关…

计算机视觉与图像分类:技术原理、应用与发展前景

引言 随着科技的不断进步,计算机视觉逐渐成为了人工智能领域的重要分支之一。计算机视觉旨在让计算机具备“看懂”图像和视频的能力,从而理解和分析视觉信息。作为计算机视觉中的一个关键任务,图像分类涉及将输入的图像归类到预定义的类别中&…

基于Delaunay三角网的边缘检测

1、背景介绍 Delaunay三角网是一种在平面上对一组点构造三角网格的方法,其中任何点都不在由其周围点形成的任何三角形的外接圆内部。这种方法确保了三角形尽可能接近等边三角形,从而避免了狭长的三角形。如下图所示,为利用平面上点集构建生成…

Pytorch使用教学2-Tensor的维度

在PyTorch使用的过程中,维度转换一定少不了。而PyTorch中有多种维度形变的方法,我们该在什么场景下使用什么方法呢? 本小节我们使用的张量如下: # 一维向量 t1 torch.tensor((1, 2)) # 二维向量 t2 torch.tensor([[1, 2, 3], …

【数据结构--查找】

目录 一、查找(Searching)的概念1.1、基本概念1.2、算法的评价指标 二、顺序查找2.1、算法思想2.2、算法实现2.2.1、常规顺序查找2.2.2、带哨兵的顺序查找 2.3、效率分析2.4、优化2.4.1、针对有序表2.4.2、被查效率不相等 三、折半查找3.1、算法思想3.2、…

mysql面试(四)

前言 本章节有些长,主要的篇幅是介绍缓存页的算法,如何快速的定位哪些是没有用过的,哪些是用过的,哪些是要淘汰掉的。 建议可以阅读一下这里面LRU算法相关的内容,和很多组件里面基本原理都是想通的,比如re…

总结20个Python接单赚钱的平台,兼职月入6000+_让你早日实现财富自由

今天就给大家盘点几个基本入门接私活的资源,让你轻松学python,实现经济独立。 一、Python兼职种类: 接私活刚学会python那会,就有认识的朋友介绍做一个网站的私活,当时接单赚了4K,后又自己接过开发网站后…

Delphi5实现随机数生成并查找最大值

效果图 输入框不可修改 设置edit控件的readonly属性为true。 生成随机数 Randomize 函数通过获取系统时钟的当前时间(或其他系统特定的随机源)来自动设置随机数生成器的种子。这样,每次程序运行时,由于系统时间的不同&#xff…

NLP之词的向量化

文章目录 前言One-hot编码one-hot编码-缺点 word2vec-词向量基于语言模型的训练方式基于窗口——CBOW基于窗口——SkipGram 前言 向量对于机器学习非常重要,大量的算法都需要基于向量来完成。对于机器来说,字符是没有含义的,只是有区别。只使用字符无法去…

爬虫开发中AttributeError的快速解决方法

在网络爬虫开发过程中,AttributeError是一个常见且令人头疼的问题。这个错误通常是由于尝试访问一个对象中不存在的属性而引发的。本文将概述如何快速定位和解决AttributeError,并提供使用爬虫代理IP和多线程技术提高爬取效率的示例代码。 概述 Attrib…