【鸿蒙HarmonyOS开发笔记】状态管理入门

状态管理

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


@State

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

注意:@State装饰的变量必须进行本地初始化。
具体语法如下

@State count:number = 1;

案例

@Entry
@Component
struct StatePage {@State count: number = 1;build() {Column({ space: 50 }) {Row({ space: 10 }) {Text('@State').textStyle()//计数器Counter() {Text(this.count.toString()).textStyle()}.onInc(() => this.count++).onDec(() => this.count--)}.width('100%').backgroundColor("#CCE3CB").padding(10).borderRadius(20).justifyContent(FlexAlign.Center)}.height('100%').width('100%').justifyContent(FlexAlign.Center).backgroundColor(Color.White).padding(10)}
}@Extend(Text) function textStyle() {.fontSize(25).fontWeight(FontWeight.Bold)
}

@Prop

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

在这里插入图片描述

注意:@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());}
}

@Link

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

注意:@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());}
}

@Provide@Consume

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

注意:@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());}}
}

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

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

相关文章

uniapp移动端 IOS系统下无法与webview通信

不知道有没有人遇到过这个问题 我的页面嵌套了一个webview(文件位于项目的hybrif/html)目录下 使用evalJS与webview进行通信 代码如下 在安卓里运行是没问题的,但在苹果手机上一直无法通信 连接真机,打印evalJS是个方法&#xf…

Blocks —— 《Objective-C高级编程 iOS与OS X多线程和内存管理》

目录 Blocks概要什么是BlocksOC转C方法关于几种变量的特点 Blocks模式Block语法Block类型 变量截获局部变量值__block说明符截获的局部变量 Blocks的实现Block的实质 Blocks概要 什么是Blocks Blocks是C语言的扩充功能,即带有局部变量的匿名函数。 顾名思义&#x…

email + celery+django 异步发送邮件功能的实现

主要流程: django通过发件服务器到收件服务器,最后到收件人 邮件配置设置需要打开SMTP/IMAP并获的授权码,完成授权功能实现发送给收件人 邮件配置请参考另一博客https://blog.csdn.net/qq_44238024/article/details/136277821 项目结构树…

【Linux杂货铺】进程的基本概念

目录 🌈前言🌈 📁进程的概念 📂描述进程-PCB 📂 查看进程 📂 查看正在运行的程序 📂杀死进程 📂通过系统调用获取进程标识符 📂通过系统调用创建进程 &#x1f…

纯 CSS 实现文字换行环绕效果

实现效果 实现代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document</title><…

蓝桥杯并查集|路径压缩|合并优化|按秩合并|合根植物(C++)

并查集 并查集是大量的树&#xff08;单个节点也算是树&#xff09;经过合并生成一系列家族森林的过程。 可以合并可以查询的集合的一种算法 可以查询哪个元素属于哪个集合 每个集合也就是每棵树都是由根节点确定&#xff0c;也可以理解为每个家族的族长就是根节点。 元素集合…

Transformer的前世今生 day02(神经网络语言模型

神经网络语言模型 使用神经网络的方法&#xff0c;去完成语言模型的两个问题&#xff0c;下图为两层感知机的神经网络语言模型&#xff1a; 以下为预备概念 感知机 线性模型可以用下图来表示&#xff1a;输入经过线性层得到输出 线性层 / 全连接层 / 稠密层&#xff1a;假…

Etcd 介绍与使用(入门篇)

etcd 介绍 etcd 简介 etc &#xff08;基于 Go 语言实现&#xff09;在 Linux 系统中是配置文件目录名&#xff1b;etcd 就是配置服务&#xff1b; etcd 诞生于 CoreOS 公司&#xff0c;最初用于解决集群管理系统中 os 升级时的分布式并发控制、配置文件的存储与分发等问题。基…

phpstudy搭建简单渗透测试环境upload-labs、DVWA、sqli-labs靶场

好久没有做渗透相关的试验了&#xff0c;今天打开phpstudy发现很多问题&#xff0c;好多环境都用不了&#xff0c;那就卸载重装吧&#xff0c;顺便记录一下。 小皮下载地址&#xff1a; https://www.xp.cn/download.html 下载安装完成 一、下载搭建upload-labs环境 github…

mysql与redis数据测试

题目要求 1.新建一张user表&#xff0c;在表内插入10000条数据。 2.①通过jdbc查询这10000条数据&#xff0c;记录查询时间。 ②通过redis查询这10000条数据&#xff0c;记录查询时间。 3.再次查询这一万条数据&#xff0c;要求根据年龄进行排序&#xff0c;mysql和redis各实现…

【GPT-SOVITS-03】SOVITS 模块-生成模型解析

说明&#xff1a;该系列文章从本人知乎账号迁入&#xff0c;主要原因是知乎图片附件过于模糊。 知乎专栏地址&#xff1a; 语音生成专栏 系列文章地址&#xff1a; 【GPT-SOVITS-01】源码梳理 【GPT-SOVITS-02】GPT模块解析 【GPT-SOVITS-03】SOVITS 模块-生成模型解析 【G…

vb.net+zxing.net随机彩色二维码、条形码

需要zxing库支持ZXing.NET Generate QR Code & Barcode in C# Alternatives | IronBarcode 效果图&#xff1a; 思路&#xff1a;先生成1个单位的二维码&#xff0c;然后再通过像素填充颜色&#xff0c;颜色数组要通过洗牌算法 洗牌算法 Dim shuffledCards As New List(…

Java八股文(MyBatis Plus)

Java八股文のMyBatis Plus MyBatis Plus MyBatis Plus MyBatis Plus 是什么&#xff1f;它与 MyBatis 有什么区别&#xff1f; MyBatis Plus 是基于 MyBatis 进行扩展的一款持久层框架&#xff0c;它提供了一系列增强功能&#xff0c;简化了 MyBatis 的使用。 与 MyBatis 相比…

K8S POD 启动探针 startupProbe 的使用

当我们启动一个POD 时&#xff0c; 当k8s detect 里面的容器启动成功时&#xff0c; 就会认为这个POD 启动完成了&#xff0c; 通常就会在状态里表示 ready 1/1 … 例如 rootk8s-master:~# kubectl get pods NAME READY STATUS RESTARTS AGE bq-api-demo 1…

有来团队后台项目-解析7

sass 安装 因为在使用vite 创建项目的时候&#xff0c;已经安装了sass&#xff0c;所以不需要安装。 如果要安装&#xff0c;那么就执行 npm i -D sass 创建文件 src 目录下创建文件 目录结构如图所示&#xff1a; reset.scss *, ::before, ::after {box-sizing: border-…

矩阵中移动的最大次数

文章目录 所属专栏:BFS算法 题目链接 思路如下&#xff1a; 1.首先我们需要从第一列开始遍历&#xff0c;寻找每一个都能够满足条件的位置&#xff0c;将它插入到数组里面 2.第一列遍历完了后我们先判断第一列的数是否都满足条件插入到数组里面&#xff0c;如果数组为空&#…

电脑充电器能充手机吗?如何给手机充电?

电脑充电器可以给手机充电吗&#xff1f; 电脑充电器可以给手机充电&#xff0c;但前提是电脑充电器的功率输出与手机的功率匹配且接口匹配。 假设电脑充电器的输出功率为5V/2A&#xff0c;手机也支持5V/2A的输入功率。 只要接口匹配&#xff0c;就可以使用电脑充电器给手机充…

Spring Boot Starter: 快速简明地创建Spring应用

Spring Boot Starter是Spring Boot的核心功能之一&#xff0c;它帮助开发人员快速简明地创建、配置和运行Spring应用。在本文中&#xff0c;我们将详细介绍Spring Boot Starter以及如何使用它创建一个Spring Boot应用。 文章目录 什么是Spring Boot Starter?为何使用Spring B…

Jenkins通知目标服务器拉取Harbor镜像部署

1.告诉目标服务器拉取哪个镜像 2.判断当前有没有正在运行此容器&#xff0c;有就删除 3.接着查看拉取的镜像目标服务器上是否已存在&#xff0c;有就删除 4.拉取Harbor镜像 5.运行容器 目标服务器编写脚本 创建个部署脚本 vim deploy.sh告诉目标服务器Harbor地址、仓库、镜像…

文字弹性跳动CSS3代码

文字弹性跳动CSS3代码&#xff0c;源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面&#xff0c;重定向这个界面 下载地址 文字弹性跳动CSS3代码