五、鸿蒙开发-组件状态管理

提示:本文根据b站尚硅谷2024最新鸿蒙开发HarmonyOS4.0+鸿蒙NEXT星河版零基础教程课整理

链接指引 => 尚硅谷2024最新鸿蒙开发HarmonyOS4.0+鸿蒙NEXT星河版零基础教程



文章目录

  • 一、状态管理入门
    • 1.1 @State
    • 1.2 @Prop
    • 1.3 @Link
    • 1.4 @Provide和@Consume
  • 二、状态管理深入
    • 2.1 @State
      • 2.1.1 允许装饰的类型
      • 2.1.2 框架能够观察到的变化
        • 2.1.2.1 boolean、string、number类型
        • 2.1.2.2 class、object类型
        • 2.1.2.3 数组类型
        • 2.1.2.4 总结
    • 2.2 @Prop
      • 2.2.1 允许装饰的类型
      • 2.2.2 框架能够观察到的变化
    • 2.3 @Link
      • 2.3.1 允许装饰的类型(同`@State`)
      • 2.3.2 框架能够观察到的变化(同@State)
    • 2.4 @Provide 和 @Consume
      • 2.4.1 允许装饰的类型(同`@State`)
      • 2.4.2 框架能够观察到的变化(同`@State`)
    • 2.5 @ObjectLink 和 @Observed


一、状态管理入门

为了方便开发者管理组件状态,ArkTS 提供了一系列状态相关的装饰器,例如@State@Prop@Link@Provide@Consume等等。

1.1 @State

@State用于装饰当前组件的状态变量,@State装饰的变量发生变化时会驱动当前组件的视图刷新。

注意:@State装饰的变量必须进行本地初始化。

具体语法如下

@State count:number = 1;

1.2 @Prop

@Prop也可用于装饰状态变量,@Prop装饰的变量发生变化时也会驱动当前组件的视图刷新,除此之外,@Prop装饰的变量还可以同步父组件中的状态变量,但只能单向同步,也就是父组件的状态变化会自动同步到子组件,而子组件的变化不会同步到父组件。
sdas

注意:@Prop装饰的变量不允许本地初始化,只能通过父组件向子组件传参进行初始化。

具体语法如下:
父组件

@Entry
@Component
struct Parent{@State count:number = 1;build(){Column(){Child({count:this.count});}}
}

子组件

@Component
export struct Child{@Prop count:number;build(){Text(this.count.toString());}
}

1.3 @Link

@Link也可用于装饰状态变量,@Link装饰的变量发生变化时也会驱动当前组件的视图刷新,除此之外,@Link变量同样会同步父组件状态,并且能够双向同步。也就是父组件的变化会同步到子组件,子组件的变化也会同步到父组件。

gggg

注意:@Link装饰的变量不允许本地初始化,只能由父组件通过传参进行初始化,并且父组件必须使用$变量名的方式传参,以表示传递的是变量的引用。

具体语法如下
父组件

@Entry
@Component
struct Parent{@State count:number = 1;build(){Column(){Child({count:$count});}}
}

子组件

@Component
export struct Child{@Link count:number;build(){Text(this.count.toString());}
}

1.4 @Provide和@Consume

@Provide@Consume用于跨组件层级传递状态信息,其中@Provide用于装饰祖先组件的状态变量,@Consume用于装饰后代组件的状态变量。可以理解为祖先组件提供(Provide)状态信息供后代组件消费(Consume),并且祖先和后代的状态信息可以实现双向同步。

vzxdsad

注意:@Provide装饰变量必须进行本地初始化,而@Consume装饰的变量不允许进行本地初始化。另外,@Provide@Consume装饰的变量不是通过父组件向子组件传参的方式进行绑定的,而是通过相同的变量名进行绑定的。

具体语法如下

祖先组件

@Entry
@Component
struct GrandParent {@Provide count: number = 1;build() {Column() {Parent()}}
}

父组件

@Component
struct Parent {build() {Column() {Child()}}
}

子组件

@Component
struct Child {@Consume count:number;build() {Column() {Text(this.count.toString());}}
}

除了通过变量名进行绑定,还可通过变量的别名进行绑定,具体语法如下:
祖先组件

@Entry
@Component
struct GrandParent {@Provide('count') parentCount: number = 1;build() {Column() {Parent()}}
}

父组件

@Component
struct Parent {build() {Column() {Child()}}
}

子组件

@Component
struct Child {@Consume('count') childCount:number;build() {Column() {Text(this.count.toString());}}
}

二、状态管理深入

2.1 @State

2.1.1 允许装饰的类型

@State允许装饰的变量类型有stringnumberbooleanobjectclassenum类型,以及这些类型的数组

2.1.2 框架能够观察到的变化

并不是@State状态变量的所有更改都会引起UI的刷新,只有可以被框架观察到的修改才会引起UI刷新。能被框架观察到的变化如下

2.1.2.1 boolean、string、number类型

@State装饰的变量类型为booleanstringnumber类型时,可以观察到赋值的变化
例如

//状态变量定义
@State count:number = 1; //状态变量操作
this.count++; //可以观察到
2.1.2.2 class、object类型

@State装饰的变量类型为class或者object时,可以观察到变量自身赋值的变化,和其属性赋值的变化。需要注意的是,若某个属性也为 class 或者 object,则嵌套属性的变化是观察不到的。
例如

//类型定义
class Employee {name: string;age: number;job: Job;constructor(name: string, age: number, job: Job) {this.name = name;this.age = age;this.job = job;}
}class Job {name: string;salary: number;constructor(name: string, salary: number) {this.name = name;this.salary = salary;}
}//状态定义
@State employee: Employee = new Employee('张三', 28, new Job('销售', 8000))//状态操作
employee = new Employee('李四', 26, new Job('行政', 6000))//状态变量重新赋值,可以观察到
employee.age++;//修改状态变量的属性,可以观察到
employee.job.salary++;//修改状态变量的属性的属性,不可以观察到
2.1.2.3 数组类型

@State装饰的变量类型为数组时,可以观察到数组本身赋值的变化,和其元素的添加、删除及更新的变化,若元素类型为 class 或者 object 时,元素属性的变化,是观察不到的。
例如

//类型定义
export class Person {name: string;age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}
}//状态定义
@State persons: Person[] = [new Person('张三', 19), new Person('李四', 20)];//状态操作
persons = [];//状态变量重新赋值,可以观察到
persons.push(new Person('王五',21));//新增数组元素,可以观察到
persons[0]=new Person('张三',22);//对数组元素重新赋值,可以观察到
persons[1].age++;//修改数组元素的属性,不可以观察到
2.1.2.4 总结

对于classobject和数组类型,框架仅能观察到@State变量第一层属性的变化,例如employee.age++persons[0]=new Person('张三',22),但第二层属性的变化是观察不到的,例如employee.job.salary++persons[1].age++

2.2 @Prop

2.2.1 允许装饰的类型

@Prop允许装饰的变量类型有stringnumberbooleanenum,注意不支持classobject数组
框架能够观察到的变化

2.2.2 框架能够观察到的变化

当装饰的类型是允许的类型,即string、number、boolean、enum类型时,所有赋值的变化都可以观察到。

2.3 @Link

2.3.1 允许装饰的类型(同@State

@Link允许装饰的变量类型有string、number、boolean、object、class和enum类型,以及这些类型的数组。

2.3.2 框架能够观察到的变化(同@State)

  • 当装饰的数据类型为booleanstringnumber类型时,可以观察到数值的变化。
  • 当装饰的数据类型为class或者object时,可以观察到变量自身赋值的变化,和其属性赋值的变化。需要注意的是,若某个属性也为 class 或者 object,则嵌套属性的变化是观察不到的。
  • 当装饰的数据类型为数组时,可以可以观察到数组本身赋值的变化,和其元素的添加、删除及更新的变化,若元素类型为 class 或者 object 时,元素属性的变化,是观察不到的。

2.4 @Provide 和 @Consume

2.4.1 允许装饰的类型(同@State

@Provide@Consume允许装饰的变量类型有stringnumberbooleanobjectclassenum类型,以及这些类型的数组。

2.4.2 框架能够观察到的变化(同@State

  • 当装饰的数据类型为booleanstringnumber类型时,可以观察到数值的变化
  • 当装饰的数据类型为class或者object时,可以观察到变量自身赋值的变化,和其属性赋值的变化。需要注意的是,若某个属性也为 class 或者 object,则嵌套属性的变化是观察不到的。
  • 当装饰的数据类型为数组时,可以可以观察到数组本身赋值的变化,和其元素的添加、删除及更新的变化,若元素类型为class或者object时,元素属性的变化,是观察不到的。

2.5 @ObjectLink 和 @Observed

前文所述的装饰器都仅能观察到状态变量第一层的变化,而第二层的变化是观察不到的。如需观察到这些状态变量第二层的变化,则需要用到@ObjectLink@Observed装饰器。
具体用法为:

  1. 将第二层内容抽取为一个子组件,并将第二层的数据作为子组件的状态变量,该变量需要使用@ObjectLink装饰。
    sadasd
  2. 第二层数据的类定义需要使用@Observed装饰器进行装饰。
@Observed
export class Job {name: string;salary: number;constructor(name: string, salary: number) {this.name = name;this.salary = salary;}
}

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

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

相关文章

STM32学习笔记-GPIO

参考江科大32单片机学习相关知识 GPIO基本构造 APB2(Advanced Peripheral Bus 2)是STM32微控制器架构中的一个外设总线,用于连接一些高性能外设,如定时器、USART、ADC和GPIO等。这些外设通常对性能要求较高,需要更快的…

java陕西民俗网源码(springboot)

项目简介 陕西民俗网实现了以下功能: 中国陕西民俗网的主要使用者分为: 管理员增删改查商品信息和商品信息资料,审核商品信息预订订单,查看订单评价和评分,通过留言功能回复用户提问。 💕💕作…

【python】OpenCV—WaterShed Algorithm

文章目录 1、功能描述2、代码实现3、完整代码4、效果展示5、涉及到的库函数5.1、cv2.pyrMeanShiftFiltering5.2、cv2.morphologyEx5.3、cv2.distanceTransform5.4、cv2.normalize5.5、cv2.watershed 6、更多例子7、参考 1、功能描述 基于分水岭算法对图片进行分割 分水岭分割…

选择最佳SCRM系统的综合指南

内容概要 在如今竞争激烈的市场中,企业不能仅仅依靠传统的客户管理方式,需要借助现代化的SCRM系统来提升效率和服务水平。SCRM系统,就是“社交客户关系管理”系统,旨在通过社交媒体等渠道与客户进行更深层次的互动。在选择合适的…

学习threejs,导入OBJ格式的模型

👨‍⚕️ 主页: gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏:threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.OBJLoader OBJ模型加…

动态规划 —— 路径问题-下降路径最小和

1. 下降路径最小和 题目链接: 931. 下降路径最小和 - 力扣(LeetCode)https://leetcode.cn/problems/minimum-falling-path-sum/description/ 2. 算法原理 状态表示:以莫一个位置位置为结尾 dp[i,j]表示:到…

ubuntu20.04 加固方案-设置限制su命令用户组

一、编辑/etc/pam.d/su配置文件 打开终端。 使用文本编辑器(如vim)编辑/etc/pam.d/su文件。 vim /etc/pam.d/su 二、添加配置参数 在打开的配置文件的中,添加以下参数: auth required pam_wheel.so 创建 wheel 组 并添加用户 …

ElementUI学习笔记

一、ElementUI概述 官网:https://element.eleme.cn/#/zh-CN (一)定义 Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。是基于Vue的一个UI框架,该框架基于Vue开发了很多相关组件&#xf…

JS面试八股文(四)

😊JS面试八股文(四) 31.精灵图和base64的区别是什么?32.svg格式了解多少?33.了解过JWT吗?34.npm的底层环境是什么?35.HTTP协议规定的协议头和请求头有什么?36.说一下浏览器的缓存策略…

Android平台RTSP|RTMP播放器高效率如何回调YUV或RGB数据?

技术背景 我们在做Android平台RTSP、RTMP播放器的时候,经常遇到这样的技术诉求,开发者希望拿到播放器解码后的YUV或RGB数据,投递给视觉算法,做AI分析,本文以ffmpeg和大牛直播SDK的SmartPlayer为例,介绍下相…

深度学习常见面试题及答案(41~45)

关注公众号:『AI学习星球』 算法学习、4对1辅导、论文辅导或核心期刊可以通过公众号或➕v:codebiubiubiu滴滴我 文章目录 41、解释一下神经网络中的激活函数的作用是什么?常见的激活函数有哪些?一、激活函数的作用二、常见的激活…

Ethernet 系列(5)-- 物理层测试::PMA Test::MDI

车载以太网物理层PMA (Physical Media Attachment--物理媒质接入层)主要评估车载以太网的电气特性,针对PMA测试方面,OPEN联盟于2014年6月发布“ BroadR-Reach Physical Layer Transceiver Specification For Automotive Applicati…

史上最清晰的uniap安卓ios热更新,附带每一步截图,亲测可用

uniap安卓ios热更新 插件市场导入到你的项目里1新建项目如图2关联服务空间项目3然后运行起来,将代码上传到托管中心4 新建一个应用项目5 发版测试 官方文档,我是看了几遍没看懂 自己弄一遍回头来看终于懂了,若果对你有用,点个赞就…

Vue生成名片二维码带logo并支持下载

一、需求 生成一张名片,名片上有用户信息以及二维码,名片支持下载功能(背景样式可更换,忽略本文章样图样式)。 二、参考文章 这不是我自己找官网自己摸索出来的,是借鉴各位前辈的,学以致用&am…

零基础学西班牙语,柯桥专业小语种培训泓畅学校

No te comas el coco, seguro que te ha salido bien la entrevista. Ya te llamarn. 别瞎想了!我保证你的面试很顺利。他们会给你打电话的。 这里的椰子是"头"的比喻。在西班牙的口语中,我们也可以听到其他同义表达,比如&#x…

【Python各个击破】numpy

简介 NumPy是一个开源的Python库,它提供了一个强大的N维数组对象和许多用于操作这些数组的函数。它是大多数Python科学计算的基础,包括Pandas、SciPy和scikit-learn等库都建立在NumPy之上。 安装 !pip install numpy导入 import numpy as np用法 # …

一文详细讲解进销存系统(附架构图、流程、功能介绍)

企业经营的七大要素是“人、财、物、产、供、销、存”,进销存管理就占到了其中的多项。然而,许多企业在进销存管理方面面临着诸多痛点问题,例如库存管理混乱、采购销售流程不清晰、数据不准确等。这些问题不仅影响企业的运营效率,…

Error in eval(family$initialize): y值必需满足0 <= y <= 1解决

今天在使用R语言对Weekly进行交叉验证时&#xff0c;发生如下报错&#xff1a; 错误于eval(family$initialize): y值必需满足0 < y < 1 错误代码为&#xff1a; Weekly<-read.csv("Weekly.csv") set.seed(1) attach(Weekly) glm.fit1 glm(Direction~Lag…

[论文阅读] Improved Baselines with Visual Instruction Tuning

启发&#xff1a; 1、LLaVA-1.5和LLaVA以及其他大模型相比&#xff0c;做出了哪些改进&#xff1f; &#xff08;1&#xff09;使用CLIP-ViT-L-336px作为视觉编码器&#xff0c;使模型能处理336px的高分辨率图像&#xff0c;这使得模型能从图像中提取出更多细节信息。此外&am…

微积分复习笔记 Calculus Volume 1 - 4.2 Linear Approximations and Differentials

4.2 Linear Approximations and Differentials - Calculus Volume 1 | OpenStax