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.mzph.cn/web/49026.shtml

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

相关文章

C# Nmodbus,EasyModbusTCP读写操作

Nmodbus读写 两个Button控件分别为 读取和写入 分别使用控件的点击方法 ①引用第三方《NModbus4》2.1.0版本 全局 public SerialPort port new SerialPort("COM2", 9600, Parity.None, 8, (StopBits)1); ModbusSerialMaster master; public Form1() port.Open();…

UWA Gears正式上线,助力移动平台性能优化

亲爱的开发者朋友们, 我们非常激动地向大家宣布,UWA最新的无SDK性能分析工具 - UWA Gears,现已正式发布!无论您使用的是哪种开发引擎,这款工具都能轻松应对,为您的项目保驾护航。更令人心动的是&#xff0c…

后台管理系统登录安全和权限要求

一、前言 几乎所有的系统都有后台管理系统,后台登录需要账号和密码,后台管理员权限需要有控制。所有管理员的操作都应该有操作日志。 二、存在的问题 现在很多系统只需要账号和密码就能登录,有的还是简单账号和简单密码,就是弱口…

虚拟机之ip配置,ssh连接到虚拟机

右边是我的虚拟机,左边是我使用vscode来连接(终端也可以。然后注意vscode配置后点一下刷新,不会自动刷新的QA)(吐槽一下,虚拟机都不能复制内容呢,确实仿真,centos仿真就是因为没有图…

二手车小程序

本文来自:FastAdmin二手车小程序 - 源码1688 一款基于ThinkPHPFastAdmin开发的原生微信小程序二手车管理系统。 前端小程序码: 后台演示地址: https://facars.site100.cn/OHNYSKzuba.php/carswxsys/sysinit?refaddtabs

视觉巡线小车——STM32+OpenMV(四)

目录 前言 一、整体控制思路 二、代码实现 1.主函数 2.定时器回调函数 总结 前言 通过以上三篇文章已将基本条件实现,本文将结合以上内容,进行综合控制,实现小车的视觉巡线功能。 系列文章请查看:视觉巡线小车——STM32OpenMV系列…

【轨物方案】电表红外抄表物联网装置

对于光伏运维工程师来说,电表抄表是一件并不陌生的工作,不过很多并网电表的RS485通讯接口一般都被占用了,并且电表的外壳也被铅封起来。在这种情况下电站通常采用人工抄表的方式采集电量数据,这种方式费时费力,对电站运…

京东科技集团将在香港发行与港元1:1挂钩的加密货币稳定币

据京东科技集团旗下公司京东币链科技(香港)官网信息,京东稳定币是一种基于公链并与港元(HKD) 1:1挂钩的稳定币,将在公共区块链上发行,其储备由高度流动且可信的资产组成,这些资产安全存放于持牌金融机构的独立账户中,通…

【OpenCV C++20 学习笔记】扫描图片数据

扫描图片数据 应用情景图像数据扫描的难点颜色空间缩减(color space reduction)查询表 扫描算法计算查询表统计运算时长连续内存3种扫描方法C风格的扫描方法迭代器方法坐标方法LUT方法 算法效率对比结论 应用情景 图像数据扫描的难点 在上一篇文章《基…

OAK-FFC 分体式相机使用入门介绍

概述 OAK FFC 主控板和多种可选配镜头模组非常适合灵活的搭建您的3D人工智能产品原型。由于镜头是分体式的,因此你可以根据需要测量的距离,自定义深度相机安装基线,并根据你的项目要求(分辨率、快门类型、FPS、光学元件&#xff…

FPGA教程|零基础到实战的全方位指导

在数字化时代,FPGA(现场可编程门阵列)作为一种灵活的硬件编程平台,正逐渐成为电子工程师和计算机科学家必备的技能之一。无论你是电子专业的学生,还是职场中的工程师,掌握FPGA开发技术,都将为你…

前端与HTML

前端与HTML 什么是前端? 解决GUI人机交互问题跨终端(PC/移动浏览器)(客户端小程序)(VR/AR等)Web技术栈 前端工程师:利用web技术栈解决多端图形界面用户交互的工程师 前端技术栈 …

CDGA|数据治理:安全如何贯穿数据供给、流通、使用全过程

随着信息技术的飞速发展,数据已经成为企业运营、社会管理和经济发展的核心要素。然而,数据在带来巨大价值的同时,也伴随着诸多安全风险。因此,数据治理的重要性日益凸显,它不仅仅是对数据的简单管理,更是确…

rv1126物体检测 rkmedia、opencv……

整体码流流向: 因此代码也分为这几部分: VI:采集视频 配置视频采集信息 模型推理线程:获取VI码流、载入模型、进行模型推理、保存推理结果 画框线程:获取VI码流、获取推理结果、显示推理结果、输出码流到VENC VENC…

如何使用C#快速创建定时任务

原文链接:https://www.cnblogs.com/zhaotianff/p/17511040.html 使用Windows的计划任务功能可以创建定时任务。 使用schtasks.exe可以对计划任务进行管理,而不需要编写额外代码 这里掌握schtasks /CREATE 的几个核心参数就可以快速创建计划任务 /SC …

论文总结:A Survey on Evaluation of Large Language Models-鲁棒性相关内容

A Survey on Evaluation of Large Language Models 只取了鲁棒性相关的内容 LLMs:《A Survey on Evaluation of Large Language Models大型语言模型评估综述》理解智能本质(具备推理能力)、AI评估的重要性(识别当前算法的局限性设 3.2.1 Robustness鲁棒性&#xf…

Gitlab以及分支管理

一、概述 Git 是一个分布式版本控制系统,用于跟踪文件的变化,尤其是源代码的变化。它由 Linus Torvalds 于 2005 年开发,旨在帮助管理大型软件项目的开发过程。 二、Git 的功能特性 Git 是关注于文件数据整体的变化,直接会将文件…

HTTP模块(二)

HTTP 设置 HTTP 响应报文 HTTP报文常见属性: const http require(http);const server http.createServer((request, response) > {// 设置请求状态码 2xx 4xx 5xxresponse.statusCode 200;// 设置请求描述 了解即可response.statusMessage hello// 指定响…

谷粒商城实战笔记-59-商品服务-API-品牌管理-使用逆向工程的前后端代码

文章目录 一, 使用逆向工程生成的代码二,生成品牌管理菜单三,几个小问题 在本次的技术实践中,我们利用逆向工程的方法成功地为后台管理系统增加了品牌管理功能。这种开发方式不仅能快速地构建起功能模块,还能在一定程度…

uni-app声生命周期

应用的生命周期函数在App.vue页面 onLaunch:当uni-app初始化完成时触发(全局触发一次) onShow:当uni-app启动,或从后台进入前台时显示 onHide:当uni-app从前台进入后台 onError:当uni-app报错时触发,异常信息为err 页面的生命周期 onLoad…