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.rhkb.cn/news/383833.html

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

相关文章

FPGA开发——奇数分频器的设计

一、概论 在我们进行FPGA分频器的学习当中,我们通常会学习怎样完成任意分频器的设计,其中就包括偶数分频最为常见。在实现的分频器的同时我们也会不定时的要求同时设置对应的占空比。今天我们就来看看怎样同时设置奇数分频器和其对应50%的占空比。 二、…

oracle读写时相关字符集详解

服务器端操作系统(Oracle linux)字符集 服务器端数据库字符集 客户端操作系统(Oracle linux)字符集 客户端工具sqlplus字符集 结论1:客户端工具sqlplus的会话,使用的字符集,是数据库字符集。…

【CPS出版】2024年智能计算与数据分析国际学术会议(ICDA 2024,9月6日-8)

为探讨数据科学和计算智能领域的关键问题,促进相关交流,2024年智能计算与数据分析国际学术会议(ICDA 2024)将于2024年9月6日-8日在中国青岛召开。 本届会议拟邀请数据分析和计算智能领域的顶级专家、学者和产业界优秀人才,围绕当前…

数据结构(Java):七大排序算法【详解】

目录 1、排序的概念 1.1 排序 1.2 排序的稳定性 1.3 内部排序&外部排序 1.4 各排序算法总结对比 2、 插入排序 2.1 🌸直接插入排序 2.2 🌸希尔排序 3、 选择排序 3.1 🌸直接选择排序 3.2 直接选择排序优化 3.3 🌸…

[红明谷CTF 2021]write_shell 1

目录 代码审计check()$_GET["action"] ?? "" 解题 代码审计 <?php error_reporting(0); highlight_file(__FILE__); function check($input){if(preg_match("/| |_|php|;|~|\\^|\\|eval|{|}/i",$input)){// if(preg_match("/| |_||p…

C语言------指针讲解(3)

一、字符指针 在指针中&#xff0c;我们知道有一类指针类型为字符指针char*; int main() {char ch w;char* pc &ch;*pc w;return 0; } 还有一种使用方式如下&#xff1a; 上述代码中&#xff0c;本质是把hello的首字符的地址放到了pstr中。即把一个常量字符串的首字符…

神经网络处理器模拟器的一点思考

一 神经网络处理器 通常基于FPGA的神经网络处理器进行部署某种网络&#xff0c;考虑的因素较多&#xff0c;具体包括网络模型的不同&#xff0c;涵盖不同的算子、激活函数、调度策略等等&#xff1b;具体硬件实现&#xff0c;涉及神经网络处理器并行度、硬件资源消耗&#xff0…

OpenGL入门第六步:材质

目录 结果显示 材质介绍 函数解析 具体代码 结果显示 材质介绍 当描述一个表面时,我们可以分别为三个光照分量定义一个材质颜色(Material Color):环境光照(Ambient Lighting)、漫反射光照(Diffuse Lighting)和镜面光照(Specular Lighting)。通过为每个分量指定一个颜色,…

C++STL详解(五)——list类的接口详解

一.list的介绍 list容器的底层是双向循环带头链表&#xff0c;在CPP中&#xff0c;我们对双向循环带头链表进行了一定程度的封装。 如果你不了解双向链表&#xff0c;那么可以浏览此片博文&#xff1a;双向链表 二.list的定义方式以及赋值 2.1list的构造方式 在这里我们要…

Haproxy 下载、编译部署、使用

文章目录 前言Haproxy 下载、编译部署、使用1. 下载2. 编译部署3. 使用3.1. 验证配置文件3.2. 启动 HAProxy 并指定配置文件路径3.3. 关闭HAProxy3.4. 重载HAProxy 3. 测试 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&am…

PCB工艺边设计准则

在PCB设计时&#xff0c;通常会在电路板的边缘预留一定的空间&#xff0c;这部分空间被称为工艺边。它有助于在生产过程中确保电路板的尺寸和形状的准确性。以使得组装时更加顺畅、便捷。而工艺边的加工&#xff0c;使得线路板上的元件可以精准地与设备对接&#xff0c;从而提高…

pythonGame-实现简单的贪食蛇游戏

通过python简单复现贪食蛇游戏。 使用到的库函数&#xff1a; import pygame import time import random 游戏源码&#xff1a; import pygame import time import randompygame.init()white (255, 255, 255) yellow (255, 255, 102) black (0, 0, 0) red (213, 50, 80…

鸿蒙(HarmonyOS)下拉选择控件

一、操作环境 操作系统: Windows 11 专业版、IDE:DevEco Studio 3.1.1 Release、SDK:HarmonyOS 3.1.0&#xff08;API 9&#xff09; 二、效果图 三、代码 SelectPVComponent.ets Component export default struct SelectPVComponent {Link selection: SelectOption[]priva…

【C++】选择结构案例-三只小猪称体重

案例问题 假设有三只小猪A、B、C&#xff0c;在输入三者体重后希望能输出他们各自的体重并测出谁最重 思路 先让A与B相比较&#xff0c;如果A重&#xff0c;则让A和C相比较&#xff0c;如果A重则输出A最重&#xff0c;否则输出C最重 在最开始的条件&#xff08;AB相比较&am…

Jetpack Compose 通过 OkHttp 发送 HTTP 请求的示例

下面是一个使用 Kotlin 和 Jetpack Compose 来演示通过 OkHttp 发送 HTTP 请求的示例。这个示例包括在 Jetpack Compose 中发送一个 GET 请求和一个 POST 请求&#xff0c;并显示结果。 添加okhttp依赖 首先&#xff0c;在你的 build.gradle.kts 文件中添加必要的依赖&#xf…

【Python系列】isin用法

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

通过强大的语义层增强现代数据湖

在现代数据湖架构中&#xff0c;语义层通过向数据添加有意义的上下文来发挥至关重要的作用&#xff0c;否则这些上下文会丢失。此层充当现代数据湖&#xff08;数据仓库和查询引擎&#xff09;处理层中未整理的原始数据与利用此数据的工具和应用程序之间的桥梁。此服务对 AI 特…

微信小程序-自定义tabBar

通过官网给出的示例自己实现了自定义的tabBar&#xff0c;但结果发现 无法监听页面生命周期函数 结语&#xff1a;原想的是实现不一样的效果&#xff08;如下&#xff09; 故尝试了自定义tabBar&#xff0c;虽然做出来了&#xff0c;但也发现这个做法存在不足&#xff1a; 在…

电子签章-开放签应用

开放签电子签章系统开源工具版旨在将电子签章、电子合同系统开发中的前后端核心技术开源开放&#xff0c;适合有技术能力的个人 / 团队学习或自建电子签章 \ 电子合同功能或应用&#xff0c;避免研发同仁在工作过程中重复造轮子&#xff0c;降低电子签章技术研发要求&#xff0…

Maven 的模块化开发示例

Maven 的模块化开发是一种非常有效的软件开发方式&#xff0c;它允许你将一个大型的项目分割成多个更小、更易于管理的模块&#xff08;modules&#xff09;。每个模块都可以独立地构建、测试和运行&#xff0c;这不仅提高了开发效率&#xff0c;也便于团队协作和项目的维护。以…