鸿蒙开发之状态管理

news2024/11/25 20:36:38

@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.coloradmin.cn/o/1393601.html

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

相关文章

数据库事务隔离级别的总结

一、数据库四种隔离级别 RU(READ-UNCOMMITTED) 读取事务未提交的数据。RC(READ-COMMITTED) 读取到事务已提交的数据。RR(REPEATABLE-READ) 可重复读SR(SERIALIZABLE) 串行化 二、四…

chisel入门初步1——基4的booth编码的单周期有符号乘法器实现

基4的booth编码乘法器原理说明 基2的booth编码 本质来说就是一个裂项重组,乘法器最重要的设计是改变部分积的数量,另外在考虑有符号数的情况下,最高位符号位有特别的意义。 (注:部分积是指需要最后一起加和的所有部分…

Qt6入门教程 8:信号和槽机制(连接方式)

目录 一.一个信号与槽连接的例子 二.第五个参数 1.Qt::AutoConnection 2.Qt::DirectConnection 3.Qt::QueuedConnection 4.Qt::BlockingQueuedConnection 5.Qt::UniqueConnection 三.信号 四.connect函数原型 五.信号与槽的多种用法 六.槽的属性 一.一个信号与槽连接…

统信UOS上使用liveCD解决系统使用问题

原文链接:统信UOS上使用liveCD解决系统使用问题 大家好!继我们上次关于UDOM工具箱的深入探讨之后,今天我带来了另一项实用的技巧——在统信UOS上使用liveCD来解决系统相关的问题。 liveCD是一个非常强大的工具,它可以让您在不影响…

Skywalking链路追踪

目录 一、简介1.1、APM系统1.2、SkyWalking 简介 二、快速入门2.1、下载、启动2.2、界面认识 三、持久化存储四、告警通知五、自定义追踪-细粒度追踪service方法 一、简介 1.1、APM系统 APM(Application Performance Monitoring)系统是一种用于监控和管…

QT中操作word文档

QT中操作word文档: 参考如下内容: C(Qt) 和 Word、Excel、PDF 交互总结 Qt对word文档操作总结 QT中操作word文档 Qt/Windows桌面版提供了ActiveQt框架,用以为Qt和ActiveX提供完美结合。ActiveQt由两个模块组成: QAxContainer模…

vue3 实现简单计数器示例——一个html文件展示vue3的效果

目的&#xff1a;作为一个新手开发&#xff0c;我想使用 Vue 3 将代码封装在 HTML 文件中时&#xff0c;进行界面打开展示。 一、vue计数示例 学了一个简单计数器界面展示&#xff0c;代码如下&#xff1a; <!DOCTYPE html> <html lang"en"><head&…

SSM(Spring,SpringMVC,MyBatis)整合项目

文章目录 SSM(Spring,SpringMVC,MyBatis)整合项目1.创建表2.创建工程3.pom.xml4.log4j.properties5.db.properties6.applicationContext-dao.xml7.applicationContext-tx.xml8.applicationContext-service.xml9.springmvc.xml10.web.xml11.pojo12.mapper13.service14.controlle…

【小笔记】算法训练基础超参数调优思路

【学而不思则罔&#xff0c;思维不学则怠】 本文总结一下常见的一些算法训练超参数调优思路&#xff08;陆续总结更新&#xff09;&#xff0c;包括&#xff1a; batchsize学习率epochsdropout&#xff08;待添加&#xff09; Batch_size 2023.9.29 简单来说&#xff0c;较…

(C++)大数计算问题

文章目录 一、实验目的、内容二、实验程序设计及结构1.需求分析类变量函数 2.设计结构或流程图 三、设计过程四、测试分析第一组第二组实验中出现的bug及解决方案 五、设计的特点和结果 一、实验目的、内容 大数是超过整数表示范围的整数&#xff0c;针对正整数运算&#xff0…

VSCODE使用CMAKE显示命令无法找到

背景&#xff1a;使用了code server&#xff0c;安装CMAKE和CMAKE TOOLS&#xff0c;但是通过ctrlshiftp打开命令面板&#xff0c;运行随便一个cmake指令&#xff0c;都出现了指令无法找到。具体为“命令"CMake: 配置"导致错误 (command ‘cmake.configure’ not fou…

Tomcat10.X部署老版本axis2 webservice项目不生效

目录 一、使用场景 二、问题描述 三、原因排查 四、解决方案 一、使用场景 原来项目是OpenJDK8tomcat9构建&#xff0c;现在需要升级到OpenJDK17tomcat10的组合。原来的webservice项目打包成aar格式&#xff0c;通过axis2部署在tomcat上。 二、问题描述 在配置好jdk和to…

【办公类-21-01】20240117育婴员操作题word合并1.0

背景需求&#xff1a; 最近学校组织老师们学习“育婴员”高级&#xff0c;每周学习2题操作&#xff0c;所以我是把每个学习内容单独做在一个word文件里 上周8套保健操作学完了&#xff0c;需要整理&#xff0c;并将8份Word文件合并 第一步&#xff1a;doc装docx 合并时程序报…

Kafka-消费者-KafkaConsumer分析-ConsumerCoordinator

在前面介绍了Kafka中Rebalance操作的相关方案和原理。 在KafkaConsumer中通过ConsumerCoordinator组件实现与服务端的GroupCoordinator的交互&#xff0c;ConsumerCoordinator继承了AbstractCoordinator抽象类。 下面我们先来介绍AbstractCoordinator的核心字段&#xff0c;如…

mysql 容器化安装(docker)离线和在线

前言&#xff1a;在部署hive或airflow 升级过程中&#xff0c;总需要一个对应的数据库存储元数据&#xff0c;一个轻量级的mysql容器刚刚好。轻量、可快速移植、具有隔离性。 文章目录 1、查看机器版本2、安装 docker3、启动docker 服务4、docker 常用命令docker5、拉取mysql …

更适合3D项目的UI、事件交互!纯国产数字孪生引擎持续升级中!!!

UI和事件交互是3D可视化项目中最常见的模块&#xff0c;主要用于信息添加、展示&#xff0c;用来确保按照用户需求呈现内容并完成交互。 平时工作在进行UI和交互设计时&#xff0c;经常出现以下问题&#xff1a;UI过于复杂导致3D项目内交互效率低下&#xff0c;或者是结合3D项目…

ubuntu18.04 安装mysql(命令)

1.安装MySQL #命令1 sudo apt-get update #命令2 sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 2.2 检查mysql服务状态 systemctl status mysql.service 3.配置远程访问 在Ubuntu下MySQL缺省是只允许本地访问的 3.1 首先用根用户进入…

NR SCell Addition/Modification/Release过程详解

当配置 CA 时&#xff0c;UE 与网络只会有一个RRC 连接。 在 RRC 连接建立/重建/切换时&#xff0c;只有一个serving cell会提供 NAS mobility info&#xff0c;在 RRC connection reestablishment/handover时&#xff0c;同样只有一个serving cell会提供security info&#xf…

关于KT6368A双模蓝牙芯片的BLE在ios的lightblue大数量数据测试

测试简介 关于KT6368A双模蓝牙芯片的BLE在ios的lightblue app大数量数据测试 测试环境&#xff1a;iphone7 。KT6368A双模程序96B6 App&#xff1a;lightblue ios端 可以打开log日志查看通讯流程 测试数据&#xff1a;长度是1224个字节&#xff0c;单次直接发给KT6368A&a…

C++ mapsetOJ

目录 1、138. 随机链表的复制 2、692. 前K个高频单词 3、349. 两个数组的交集 1、138. 随机链表的复制 /* // Definition for a Node. class Node { public:int val;Node* next;Node* random;Node(int _val) {val _val;next NULL;random NULL;} }; */class Solution { pub…