鸿蒙开发之状态管理

@State 组件内状态

  • @State装饰的变量,会和自定义组件的渲染绑定起来。当状态改变时,UI会发生对应的渲染改变。
  • 在状态变量相关装饰器中,@State是最基础的,使变量拥有状态属性的装饰器,它也是大部分状态变量的数据源。

装饰器使用规则

  • 同步类型:不与父组件中任何类型的变量同步。
  • 允许装饰的变量类型:Object、class、string、number、boolean、enum类型,以及这些类型的数组,且类型必须被指定。
  • 被装饰变量的初始值:必须本地初始化。

变量的传递/访问规则

  • 从父组件初始化:可选,从父组件初始化或者本地初始化。如果从父组件初始化将会覆盖本地初始化。但实际上编辑器并不希望你这样做,代码不会报错但是会划红线提示。
  • 用于初始化子组件:@State装饰的变量支持初始化子组件的常规变量、@State、@Link、@Prop、@Provide。
  • 是否支持组件外访问:不支持,只能在组件内访问。

在这里插入图片描述

观察变化和行为表现

  • 并不是状态变量的所有更改都会引起UI的刷新,只有可以被框架观察到的修改才会引起UI刷新。
  • 当装饰的数据类型为boolean、string、number类型时,可以观察到数值的变化。
  • 当装饰的数据类型为class或者Object时,可以观察到自身的赋值的变化,和其属性赋值的变化。
  • 当装饰的对象是array时,可以观察到数组本身的赋值和添加、删除、更新数组的变化。

@Props 父组件传入的状态 - 单向同步

  • @Prop变量允许在本地修改,但修改后的变化不会同步回父组件。
  • 当父组件中的数据源更改时,与之相关的@Prop装饰的变量都会自动更新。
  • 如果子组件已在本地修改了@Prop变量,而在父组件中对应的@State变量被修改后,子组件本地修改的@Prop变量值将被覆盖。
  • @Prop装饰器不能在@Entry装饰的自定义组件中使用。

装饰器使用规则

  • 同步类型:单向同步。
  • 允许装饰的变量类型:string、number、boolean、enum类型。不支持any,必须指定类型。
  • 被装饰变量的初始值:允许本地初始化。

变量的传递/访问规则

  • 从父组件初始化:如果本地有初始化,则是可选的(但这种方式编辑器会报etslint错误)。没有的话,则必选
  • 用于初始化子组件:@Prop支持去初始化子组件中的常规变量、@State、@Link、@Prop、@Provide。
  • 是否支持组件外访问:不支持,只能在组件内访问。

在这里插入图片描述

思考:如何单向绑定非简单类型数据?

@Link 父子组件共用的状态 - 双向同步

  • 子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。
  • @Link装饰器不能在@Entry装饰的自定义组件中使用。

装饰器使用规则

  • 同步类型:双向同步。
  • 允许装饰的变量类型:Object、class、string、number、boolean、enum类型,以及这些类型的数组。类型必须被指定,且和双向绑定状态变量的类型相同。
  • 被装饰变量的初始值:禁止本地初始化。

变量的传递/访问规则

  • 从父组件初始化和更新:必选
  • 用于初始化子组件:允许,可用于初始化常规变量、@State、@Link、@Prop、@Provide。
  • 是否支持组件外访问:私有,只能在所属组件内访问。

在这里插入图片描述

@Provide 与 @Consume 跨组件双向通信

  • @Provide装饰的状态变量自动对其所有后代组件可用,即该变量被“provide”给他的后代组件。由此可见,@Provide的方便之处在于,开发者不需要多次在组件之间传递变量。
  • 后代通过使用@Consume去获取@Provide提供的变量,建立在@Provide和@Consume之间的双向数据同步,与@State/@Link不同的是,前者可以在多层级的父子组件之间传递。
  • @Provide和@Consume可以通过相同的变量名或者相同的变量别名绑定,变量类型必须相同。
// 通过相同的变量名绑定
@Provide a: number = 0;
@Consume a: number;

// 通过相同的变量别名绑定
@Provide('a') b: number = 0;
@Consume('a') c: number;

装饰器说明

  • @State的规则同样适用于@Provide,差异为@Provide还作为多层后代的同步源。
  • @Link的规则同样适用于@Consume,差异为@Consume可在多层父代的找到同步源。

变量的传递/访问规则

在这里插入图片描述
在这里插入图片描述

@Observed装饰器和@ObjectLink装饰器:嵌套类对象属性变化

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

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

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

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

  • 具体用法看Demo5、Demo6

AppStorage:应用全局的UI状态存储

  • AppStorage是在应用启动的时候会被创建的单例。它提供应用状态数据的中心存储。
  • 这些状态数据在应用级别都是可访问的,属性通过唯一的键字符串值访问。
  • AppStorage中的属性可以被双向同步

@StorageLink-双向同步

@StorageProp-单向同步

PersistentStorage:持久化存储UI状态

  • PersistentStorage的作用是持久化存储选定的AppStorage属性,以确保这些属性在应用程序重新启动时的值与应用程序关闭时的值相同。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

@Watch装饰器:状态变量更改通知

  • @Watch用于监听状态变量的变化,当状态变量变化时,@Watch的回调方法将被调用。
  • @Watch在ArkUI框架内部判断数值有无更新使用的是严格相等(===)
  • 对象类型的属性修改,以及数组类型的修改,均会触发@Watch

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

OpenGL ES之深入解析图像的腐蚀、膨胀、边缘检测处理

一、图像腐蚀(Image Erosion) 图像腐蚀用于缩小或消除图像中物体的边界,主要用于去除图像中的小细节、噪声或不规则物体:实现图像腐蚀的片段着色器代码,基本原理就是寻找附近的最小 color 作为输出:precision highp float; varying highp vec2 vTextureCoord; uniform lo…

高速CAN总线 A B节点竞争总线时 电压分析

CAN收发器放大图 前4步简化过程同<<高速CAN总线 A节点发送 B节点接收 电压分析>> A B节点同时发送显性电平 A B节点同时发送显性电平时 初步简化后如下图所示: 图① A B 节点同时发送显性电平, 则 4 个三极管全部导通, 假定三极管压降0.5V 则电路简化如下图.(导…

2024年美国各州即将生效的新隐私保护法(上)

2024年美国各州即将生效的新隐私保护法&#xff08;上&#xff09; 文章目录 2024年美国各州即将生效的新隐私保护法&#xff08;上&#xff09;前言一、2023年隐私保护法开始生效的五个州二、2023年通过了新的隐私保护法的八个州三、2024年确定截止的州及法律法规&#xff08;…

项目管理工具——禅道在企业内部的使用

目录 一、禅道的下载安装 1.1 禅道官网 1.2 安装步骤 二、禅道启动 2.1 访问禅道 三、禅道的使用 3.1 公司信息编辑 3.2 admin管理组织结构 3.2.1 岗位母部门添加 3.2.2 岗位子部门添加 3.2.3 用户新增 3.2.4 用户职位编辑 3.3 产品经理使用禅道 3.3.1 添加产品…

2024-01-17(SpringCloud)

1.使用openFeign的itemClient接口去做远程调用其他微服务中的接口。但我们直接使用了itemClient接口&#xff0c;而不是该接口的实现类&#xff0c;说明我们是使用该接口的代理对象帮我们做远程调用的。这个代理对象是invocationHandler来生成的。 2.openFeign底层发起远程调用…

Mybatis-Plus基础学习

目录 第一章、快速了解mybatis-plus1.1&#xff09;相关概念介绍1.2&#xff09;为什么使用MyBatis-Plus1.3&#xff09;学习过程中的疑问 第二章、 SpringBoot集成MyBatis-Plus2.1&#xff09;idea快速创建spring boot项目2.2&#xff09;setting里查看编译器2.3&#xff09;添…

K8s调试积累

文章目录 一、K8S 集群服务访问失败&#xff1f;二、K8S 集群服务访问失败&#xff1f;三、K8S 集群服务暴露失败&#xff1f;四、外网无法访问 K8S 集群提供的服务&#xff1f;五、pod 状态为 ErrImagePull&#xff1f;六、探测存活 pod 状态为 CrashLoopBackOff&#xff1f;七…

阿里云ECS使用docke搭建redis服务

目录 1.确保正确安装好docker 2.安装redis镜像 3.创建容器设置端口映射 1.确保正确安装好docker 安装教程&#xff1a; 阿里云ECS(CentOS镜像)安装docker-CSDN博客https://blog.csdn.net/qq_62262918/article/details/135686614?spm1001.2014.3001.5501 2.安装redis镜像…

94.乐理基础-记号篇-装饰音记号(二)助音的四种类型

内容参考于&#xff1a;三分钟音乐社 上一个内容&#xff1a;93.乐理基础-记号篇-装饰音记号&#xff08;一&#xff09;级进、跳进、经过音、辅助音-CSDN博客 当前写的助音是扩展的辅助音的内容&#xff0c;所以要先看上一个内容 助音的四种类型&#xff1a;下方的三个辅助…

网卡:初始化,frame组装,网卡处理电信号过程

ip模块中存储的是一堆数字信号&#xff0c;网卡内部会把数字信号转换成电信号或者光信号在网线中传输。 网卡只是一个硬件&#xff0c;需要驱动程序去操作他&#xff0c;计算机中已经把主流网卡的驱动程序&#xff08;不只是网卡的&#xff0c;还有鼠标&#xff0c;键盘这些硬件…

【opencv】python实现人脸检测和识别训练

人脸识别 OpenCV 中的人脸识别通常基于哈尔特征分类器&#xff08;Haar Cascade Classifier&#xff09;进行。以下是 OpenCV 人脸识别的基本原理&#xff1a; Haar Cascade Classifier&#xff1a; 特征分类器&#xff1a;Haar 特征是一种基于矩形区域的特征&#xff0c;可以…

2024--Django平台开发-订单项目管理用户认证+动态菜单+权限控制(十三)

day13 订单管理项目开发 1.表结构设计 1.1 abstract类 from django.db import modelsclass ActiveBaseModel(models.Model):active models.SmallIntegerField(verbose_name"状态", default1, choices((1, "激活"), (0, "删除"),))class Meta:…

MyBatis 使用报错: Can‘t generate mapping method with primitive return type

文章目录 前言问题原因解决方案个人简介 前言 今天在新项目中使用 MyBatis 报如下错误&#xff1a;Cant generate mapping method with primitive return type 问题原因 发现是 Mapper 注解引入错误&#xff0c;错误引入 org.mapstruct.Mapper, 实际应该引入 org.apache.ibat…

CodeGeex全能的智能编程助手

大家好我是在看&#xff0c;记录普通人学习探索AI之路。 一、介绍 CodeGeeX&#xff0c;一款由清华大学知识工程实验室研发的基于大型模型的全能智能编程辅助工具&#xff0c;能够实现包括代码生成与补全、自动注释添加、代码翻译以及智能问答等多种功能。经过对包含前后端工…

【代码随想录08】232. 用栈实现队列 225. 用队列实现栈

目录 232. 用栈实现队列题目描述参考代码 225. 用队列实现栈题目描述参考代码 232. 用栈实现队列 题目描述 请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作&#xff08;push、pop、peek、empty&#xff09;&#xff1a; 实现 MyQueue 类&#xff1a…

leetcode2312卖木头块

其实不难&#xff0c;主要是你得一眼看出来这个问题缩小规模然后就可以用DP来做了 using ll long long; class Solution { public:long long sellingWood(int m, int n, vector<vector<int>>& prices) {ll f[m10][n10];ll p[m10][n10];memset(p,0,sizeof p)…

JS封装本地缓存的设置,读取,移除,清空方法及使用示例

我封装了一个JS通用的缓存管理对象&#xff0c;可以提供缓存的设置&#xff0c;读取&#xff0c;移除&#xff0c;清空操作&#xff0c;使用也很方便&#xff0c;封装方法的代码在最下方。 Q: 为什么不直接用原生的缓存方法&#xff0c;要封装&#xff1f; A1:原生的缓存管理…

【随机化约束控制 解的概率_2024.01.19】

约束控制 //constraint_mode() constraint c {length inside {[1:32]};} p.c.constraint.mode(0);//0关闭&#xff0c;1打开&#xff0c;默认打开//rand_mode p.length.rand_mode(0);//随机进行关闭 p.length42;//randomiza()with{} assert(c.randmize()with{data<10;});//…

Python中HTTP代理的配置和使用

在Python中&#xff0c;HTTP代理是一种常用的技术&#xff0c;用于控制和修改HTTP请求和响应。通过使用HTTP代理&#xff0c;我们可以更好地控制网络请求的行为&#xff0c;提高安全性、隐私性和效率。下面我们将详细介绍如何在Python中配置和使用HTTP代理。 一、配置HTTP代理…

Linux编写简易shell

思路&#xff1a;​ ​ ​ 所以要写一个shell&#xff0c;需要循环以下过程:​ 获取命令行解析命令行建立一个子进程&#xff08;fork&#xff09;替换子进程&#xff08;execvp&#xff09;父进程等待子进程退出&#xff08;wait&#xff09; 实现代码&#xff1a;​ #inc…