HarmonyOS(十一)——初识状态管理

前言

在前文的描述中,我们构建的页面多为静态界面。如果希望构建一个动态的、有交互的界面,就需要引入“状态”的概念。

假设我们要实现如下一个动态的交互界面:
在这里插入图片描述

上面的示例中,用户与应用程序的交互触发了文本状态变更,状态变更引起了UI渲染,UI从“Hello World”变更为“Hello ArkUI”。

在声明式UI编程框架中,UI是程序状态的运行结果,用户构建了一个UI模型,其中应用的运行时的状态是参数。当参数改变时,UI作为返回结果,也将进行对应的改变。这些运行时的状态变化所带来的UI的重新渲染,在ArkUI中统称为状态管理机制。

自定义组件拥有变量,变量必须被装饰器装饰才可以成为状态变量,状态变量的改变会引起UI的渲染刷新。如果不使用状态变量,UI只能在初始化时渲染,后续将不会再刷新。 下图展示了State和View(UI)之间的关系。

在这里插入图片描述

  1. View(UI):UI渲染,一般指自定义组件的build方法和@Builder装饰的方法内的UI描述。
  2. State:状态,一般指的是装饰器装饰的数据。用户通过触发组件的事件方法,改变状态数据。状态数据的改变,引起UI的重新渲染。

初识状态管理

认识状态管理,需要先明白如下基本概念:

  1. 状态变量:被状态装饰器装饰的变量,改变会引起UI的渲染更新。
  2. 常规变量:没有状态的变量,通常应用于辅助计算。它的改变永远不会引起UI的刷新。
  3. 数据源/同步源:状态变量的原始来源,可以同步给不同的状态数据。通常意义为父组件传给子组件的数据。
  4. 命名参数机制:父组件通过指定参数传递给子组件的状态变量,为父子传递同步参数的主要手段。示例:CompA: ({ aProp: this.aProp })。
  5. 从父组件初始化:父组件使用命名参数机制,将指定参数传递给子组件。本地初始化的默认值在有父组件传值的情况下,会被覆盖。示例:
@Component
struct MyComponent {@State count: number = 0;private increaseBy: number = 1;build() {}
}@Component
struct Parent {build() {Column() {// 从父组件初始化,覆盖本地定义的默认值MyComponent({ count: 1, increaseBy: 2 })}}
}
  1. 初始化子节点:组件中状态变量可以传递给子组件,初始化子组件对应的状态变量。示例同上。
  2. 本地初始化:变量声明的时候赋值,作为初始化的默认值。示例:@State count: number = 0。

装饰器总览

ArkUI提供了多种装饰器,通过使用这些装饰器,状态变量不仅可以观察在组件内的改变,还可以在不同组件层级间传递,比如父子组件、跨组件层级,也可以观察全局范围内的变化。根据状态变量的影响范围,将所有的装饰器可以大致分为:

  1. 管理组件拥有状态的装饰器:组件级别的状态管理,可以观察组件内变化,和不同组件层级的变化,但需要唯一观察同一个组件树上,即同一个页面内。
  2. 管理应用拥有状态的装饰器:应用级别的状态管理,可以观察不同页面,甚至不同UIAbility的状态变化,是应用内全局的状态管理。

从数据的传递形式和同步类型层面看,装饰器也可分为:

  1. 只读的单向传递;
  2. 可变更的双向传递。

图示如下,具体装饰器的介绍,可详见管理组件拥有的状态和管理应用拥有的状态。开发者可以灵活地利用这些能力来实现数据和UI的联动。

在这里插入图片描述

上图中,Components部分的装饰器为组件级别的状态管理,Application部分为应用的状态管理。开发者可以通过@StorageLink/@LocalStorageLink和@StorageProp/@LocalStorageProp实现应用和组件状态的双向和单向同步。图中箭头方向为数据同步方向,单箭头为单向同步,双箭头为双向同步。

1:管理组件拥有的状态

管理组件拥有的状态,即图中Components级别的状态管理:

  • @State:@State装饰的变量拥有其所属组件的状态,可以作为其子组件单向和双向同步的数据源。当其数值改变时,会引起相关组件的渲染刷新。
  • @Prop:@Prop装饰的变量可以和父组件建立单向同步关系,@Prop装饰的变量是可变的,但修改不会同步回父组件。
  • @Link:@Link装饰的变量和父组件构建双向同步关系的状态变量,父组件会接受来自@Link装饰的变量的修改的同步,父组件的更新也会同步给@Link装饰的变量。
  • @Provide/@Consume:@Provide/@Consume装饰的变量用于跨组件层级(多层组件)同步状态变量,可以不需要通过参数命名机制传递,通过alias(别名)或者属性名绑定。
  • @Observed:@Observed装饰class,需要观察多层嵌套场景的class需要被@Observed装饰。单独使用@Observed没有任何作用,需要和@ObjectLink、@Prop连用。
  • @ObjectLink:@ObjectLink装饰的变量接收@Observed装饰的class的实例,应用于观察多层嵌套场景,和父组件的数据源构建双向同步。

注意⚠️:仅@Observed/@ObjectLink可以观察嵌套场景,其他的状态变量仅能观察第一层,详情见各个装饰器章节的“观察变化和行为表现”小节。

2:管理应用拥有的状态

管理应用拥有的状态,即图中Application级别的状态管理:

  • AppStorage是应用程序中的一个特殊的单例LocalStorage对象,是应用级的数据库,和进程绑定,通过@StorageProp和@StorageLink装饰器可以和组件联动。
  • AppStorage是应用状态的“中枢”,需要和组件(UI)交互的数据存入AppStorage,比如持久化数据PersistentStorage和环境变量Environment。UI再通过AppStorage提供的装饰器或者API接口,访问这些数据;
  • 框架还提供了LocalStorage,AppStorage是LocalStorage特殊的单例。LocalStorage是应用程序声明的应用状态的内存“数据库”,通常用于页面级的状态共享,通过@LocalStorageProp和@LocalStorageLink装饰器可以和UI联动。

3:其他状态管理功能

  1. @Watch用于监听状态变量的变化。
  2. $$运算符:给内置组件提供TS变量的引用,使得TS变量和内置组件的内部状态保持同步。

总结

  • 运行时的状态变化所带来的UI的重新渲染,在ArkUI中统称为状态管理机制。
  • 自定义组件拥有变量,变量必须被装饰器装饰才可以成为状态变量,状态变量的改变会引起UI的渲染刷新。如果不使用状态变量,UI只能在初始化时渲染,后续将不会再刷新

后续会持续更新状态管理相关的各个状态管理装饰器。

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

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

相关文章

SQL server 根据已有数据库创建相同的数据库

文章目录 用导出的脚本创建相同的数据库导出建表脚本再次建表 一些sql语句 用导出的脚本创建相同的数据库 导出建表脚本 首先,右击要导出的数据库名,依次选择任务-生成脚本。 简介(第一页)处选择下一步,然后来到选择…

uniapp 打包H5页面时候清除手机缓存问题

最近遇到一个情况: uniapp 写了一个H5 页面,挂在一个小程序上面,但是每次更新代码,新增新功能,总是有的用户看到的还是上一个版本的样式,前端打包的时候,已经在Uniapp项目的根目录下面新建了一个…

Python替代Adobe从PDF提取数据

大家好,PDF文件是官方报告、发票和数据表的通用格式,然而从PDF文件中提取表格数据是一项挑战。尽管Adobe Acrobat等工具提供了解决方案,但它们并不总是易于获取或可自动化运行,而Python则是编程语言中的瑞士军刀。本文将探讨如何利…

使用 MITRE ATTCK® 框架缓解网络安全威胁

什么是MITRE ATT&CK框架 MITRE Adversarial Tactics, Techniques, and Common Knowledge(ATT&CK)是一个威胁建模框架,用于对攻击者用来入侵企业、云和工业控制系统(ICS)并发起网络攻击…

java 集合拆分成多个子集合

package com.jiayou.peis.report.biz.utils;import org.apache.poi.ss.formula.functions.T;import java.util.ArrayList; import java.util.List;public class SplitListUtil {/*** 拆分集合* param resultList 原集合* param count 指定的长度* return resultLists 拆分后的…

矩母函数,概率生成函数, 随机变量的变换方法

这个标题真帅 Thanks Ni Zihan.随机变量的变换方法总结概率生成函数 (probability-generating function, PGF)矩母函数(Moment Generating Function , MGF)矩母函数详细介绍特征函数Thanks Ni Zihan. 随机变量的变换方法总结 (Thanks Dr. Ni Zihan) 时域信号和频域信号…

【WPF】扫描的方式发现局域网中的Android设备

C#部分 扫描局域网的IP地址范围 检查每个IP地址是否可达 using System.Net; using System.Net.Sockets;public static class NetworkScanner {public static List<IPAddress> ScanLocalNetwork(){List<IPAddress> devices new List<IPAddress>();string lo…

AI伦理专题报告:2023年全球人工智能伦理治理报告

今天分享的是人工智能系列深度研究报告&#xff1a;《AI伦理专题报告&#xff1a;2023年全球人工智能伦理治理报告》。 &#xff08;报告出品方&#xff1a;钛媒体&#xff09; 报告共计&#xff1a;239页 摘要 人工智能(ArtificialIntelligence)作为新一轮科技革命和产业变…

vscode 安装插件

打开VSCode编辑器&#xff0c;点击左侧的扩展图标&#xff08;或使用快捷键CtrlShiftX&#xff09;打开扩展面板。 vue插件 在搜索框中输入"Vue"&#xff0c;会显示出一系列与Vue相关的插件。 1. "Vetur"是一个非常强大的Vue开发插件&#xff0c;它提供…

在 Node-RED 中引入 ECharts 实现数据可视化

Node-RED 提供了强大的可视化工具&#xff0c;而通过引入 ECharts 图表库&#xff0c;您可以更直观地呈现和分析数据。在这篇博客中&#xff0c;我们将介绍两种在 Node-RED 中实现数据可视化的方法&#xff1a;一种是引入本地 ECharts 库&#xff0c;另一种是直接使用 CDN&…

springboot(ssm电商个性化推荐系统 在线销售系统Java(codeLW)

springboot(ssm电商个性化推荐系统 在线销售系统Java(code&LW) 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&…

网络和Linux网络_11(数据链路层)以太网(MAC帧)协议+局域网转发+ARP协议

目录 1. 以太网协议 1.1 MAC地址 1.2 以太网帧格式 2. 局域网转发原理 2.1 数据碰撞和交换机 2.2 最大传输单元MTU 3. ARP协议 3.1 ARP协议格式 3.2 模拟APR协议工作过程 3.3 ARP缓存表 4. 重看TCP/IP四层模型 本篇完。 1. 以太网(MAC帧)协议 网络层的IP协议并不是…

Flink基础之DataStream API

流的合并 union联合&#xff1a;被unioin的流中的数据类型必须一致connect连接&#xff1a;合并的两条流的数据类型可以不一致 connec后&#xff0c;得到的是ConnectedStreams合并后需要根据数据流是否经过keyby分区 coConnect: 将两条数据流合并为同一数据类型keyedConnect …

泛洪填充(Flood Fill)

图像形态学是图像处理中的一种基础技术&#xff0c;泛洪填充&#xff08;Flood Fill&#xff09;是其中的一种操作&#xff0c;用于在图像中填充特定区域。 原理和作用 原理 泛洪填充是基于种子点开始的区域生长算法。它从一个种子点开始&#xff0c;通过选择相邻像素并根据一…

什么是数据清洗、特征工程、数据可视化、数据挖掘与建模?

1.1什么是数据清洗、特征工程、数据可视化、数据挖掘与建模&#xff1f; 视频为《Python数据科学应用从入门到精通》张甜 杨维忠 清华大学出版社一书的随书赠送视频讲解1.1节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。内容涵…

Jtti:网站服务器如何预防CC攻击?

CC攻击主要通过大量的请求或连接不断地向目标网站服务器发送流量&#xff0c;以消耗其带宽、资源和处理能力。为了有效应对CC攻击&#xff0c;以下是一些关键的防御策略&#xff1a; 1.使用防火墙 安装和配置一个强大的防火墙是预防CC攻击的首要步骤。防火墙可以根据IP地址、用…

python HTML文件标题解析问题的挑战

引言 在网络爬虫中&#xff0c;HTML文件标题解析扮演着至关重要的角色。正确地解析HTML文件标题可以帮助爬虫准确地获取所需信息&#xff0c;但是在实际操作中&#xff0c;我们常常会面临一些挑战和问题。本文将探讨在Scrapy中解析HTML文件标题时可能遇到的问题&#xff0c;并…

微软 Power Platform 零基础 Power Pages 网页搭建高阶实际案例实践(四)

微软 Power Platform 零基础 Power Pages 网页搭建教程之高阶案例实践学习&#xff08;四&#xff09; Power Pages 实际案例学习进阶 微软 Power Platform 零基础 Power Pages 网页搭建教程之高阶案例实践学习&#xff08;四&#xff09;1、新增视图&#xff0c;添加List页面2…

http的 content-type都有哪些?

HTTP请求中的Content-Type是用来指定请求或者响应的内容类型&#xff0c;告诉浏览器或者相关设备如何显示或处理加载的数据&#xff0c;此属性的值可以查看MIME&#xff08;Multipurpose Internet Mail Extensions&#xff0c;多用途互联网邮件扩展&#xff09;的类型。 如果设…

Java集合进阶(上)

集合 集合在Java开发中应用极为广泛&#xff0c;它其实就是一些常用的数据结构的包装类&#xff0c;分为单列集合&#xff08;Collecton接口类&#xff0c;例如LinkdeList集合&#xff09;和双列集合&#xff08;Map接口类&#xff0c;例如HashMap集合)两种 Collection Coll…