状态管理概述

        ArkTS UI的状态管理到这里就叙述完了,现在做一个概述,也可以认为是一个总结。

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

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

  • View(UI):UI渲染,指将build方法内的UI描述和@Builder装饰的方法内的UI描述映射到界面。
  • State:状态,指驱动UI更新的数据。用户通过触发组件的事件方法,改变状态数据。状态数据的改变,引起UI的重新渲染。

1、基本概念 

        

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

  build() {
  }
}

@Component
struct Parent {
  build() {
    Column() {
      // 从父组件初始化,覆盖本地定义的默认值
      MyComponent({ count: 1, increaseBy: 2 })
    }
  }
}
  • 初始化子节点:父组件中状态变量可以传递给子组件,初始化子组件对应的状态变量。示例同上。
  • 本地初始化:在变量声明的时候赋值,作为变量的默认值。示例:@State count: number = 0。

2、装饰器总览

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

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

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

  • 只读的单向传递;
  • 可变更的双向传递。

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

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

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

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

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

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

 3、其他状态管理功能

        @Watch用于监听状态变量的变化。

        $$运算符:给内置组件提供TS变量的引用,使得TS变量和内置组件的内部状态保持同步。

        @Watch及$$运算符的使用具体看其他状态管理-CSDN博客

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

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

相关文章

Vue(一):Vue 入门与 Vue 指令

Vue 01. Vue 快速上手 1.1 Vue 的基本概念 用于 构建用户界面 的 渐进性 框架 构建用户界面:基于数据去渲染用户看到的界面渐进式:不需要学习全部的语法就能完成一些功能,学习是循序渐进的框架:一套完整的项目解决方案&#x…

探索Apache Commons Imaging处理图像

第1章:引言 大家好,我是小黑,咱们今天来聊聊图像处理。在这个数字化日益增长的时代,图像处理已经成为了一个不可或缺的技能。不论是社交媒体上的照片编辑,还是专业领域的图像分析,图像处理无处不在。而作为…

JavaSE50题:26. (数组练习题)使奇数位于偶数之前

概述 调整数组顺序使得奇数位于偶数之前,调整之后,不关心大小顺序。 如数组:{1,2,3,4,5,6} 调整后可能是:{1,5,3,4,2,6} 方法 定义 left 和 right,二者分别…

位运算|比特位计数、汉明距离

位运算|比特位计数、汉明距离 338 比特位计数 /** 比特位计数法一:Brian Kernighan 算法的原理是:对于任意整数 x,令 xx & (x−1),该运算将 x 的二进制表示的最后一个 1 变成 0。因此,对 x 重复该操作&#xff0…

中职网络安全Web2003-2——Web渗透测试

需要环境或换,有问题可以私信我或加Q 1.通过URL访问http://靶机IP/1,对该页面进行渗透测试,将完成后返回的结果内容作为Flag值提交; FLAGflag{htmlcode} 2.通过URL访问http://靶机IP/2,对该页面进行渗透测试&#xff…

数字钥匙进入3.0时代,他们要做智能汽车时代的「微信」

“假设用我们的即时通讯的工具来说,我们想造一个微信,我们希望跟更多的主机厂拥抱融合,而不是造一个飞信。” 11月24日,在银基科技承办的第三届数字钥匙及生态大会期间,银基科技CEO单宏寅尝试向到场的媒体&#xff0c…

Flink Kafka[输入/输出] Connector

本章重点介绍生产环境中最常用到的Flink kafka connector。使用Flink的同学,一定会很熟悉kafka,它是一个分布式的、分区的、多副本的、 支持高吞吐的、发布订阅消息系统。生产环境环境中也经常会跟kafka进行一些数据的交换,比如利用kafka con…

代码随想录刷题题Day24

刷题的第二十四天,希望自己能够不断坚持下去,迎来蜕变。😀😀😀 刷题语言:C Day24 任务 ● 491.递增子序列 ● 46.全排列 ● 47.全排列 II 1 递增子序列 491.递增子序列 思路: 本题求自增子序…

Translation翻译插件

Translation插件是为IntelliJ IDEA开发的,因此只能在IntelliJ IDEA中使用。但是,如果你需要在其他软件中进行翻译,可以考虑使用其他的翻译工具或服务。例如,一些在线翻译网站(如Google翻译、百度翻译等)提供…

由浅入深走进Python异步编程【协程与yield】(含代码实例讲解 || 迭代器、生成器、协程、yield from)

写在前面 从底层到第三方库,全面讲解python的异步编程。这节讲述的是python异步编程的底层原理第一节,详细了解需要配合下一节观看哦。纯干货,无概念,代码实例讲解。 本系列有6章左右,点击头像或者专栏查看更多内容&…

C++学习实践(一)高频面试问题总结(附详细答案)

文章目录 一、基础常见面试题1、数组和链表区别2、深拷贝和浅拷贝相关问题的区别3、a和a区别4、c内存模型5、四种强制转换和应用场景 二、指针相关1、指针和引用的区别2、函数指针和指针函数3、传指针、引用和值4、常量指针和指针常量5、野指针6、智能指针的用法 三、关键字作用…

YOLOv8可视化:引入多种可视化CAM方法,为科研保驾护航

💡💡💡本文内容:调用pytorch下的CAM可视化库,支持十多种可视化方法,打开“黑盒”,让YOLOv8变得相对可解释性 收录 YOLOv8原创自研 https://blog.csdn.net/m0_63774211/category_12511737.html?spm=1001.2014.3001.5482 💡💡💡全网独家首发创新(原创),适…

桥接模式-举例

概叙:桥接模式用一种巧妙的方式处理多层继承存在的问题, 用抽象关联取代了传统的多层继承, 将类之间的静态继承关系转换为动态的对象组合关系, 使得系统更加灵活,并易于扩展, 同时有效控制了系统中类的个数…

企业如何购买腾讯云服务器?(详细指南)

腾讯云服务器购买流程直接在官方秒杀活动上购买比较划算,在云服务器CVM或轻量应用服务器页面自定义购买价格比较贵,但是自定义购买云服务器CPU内存带宽配置选择范围广,活动上购买只能选择固定的活动机,选择范围窄,但是…

专题四:前缀和

前缀和 一.一维前缀和(模板):1.思路一:暴力解法2.思路二:前缀和思路 二. 二维前缀和(模板):1.思路一:构造前缀和数组 三.寻找数组的中心下标:1.思路一:前缀和 四.除自身以外数组的乘积&#xff…

php最常出现的错误

目录 1. E_WARNING:为 foreach ()提供的参数无效 2. PDOException:拒绝SQLSTATEHY000连接 3.错误使用empty函数 1. E_WARNING:为 foreach ()提供的参数无效 PHP foreach构造在PHP 4中引入&am…

web3方向产品调研

每次互联网形态的改变,都会对世界产生很大的影响,上一次对社会产生重大影响的互联网形态(Web2.0)催生了一批改变人类生活和信息交互方式的企业。 目录 概述DAO是什么?为什么我们需要DAO? 金融服务金融桥接及周边服务D…

Unity中Shader 齐次坐标

文章目录 前言一、什么是齐次坐标二、齐次坐标增加分量 w 的意义1、当 w ≠ \neq  0时:2、当 w 0时:3、用方程组,直观的看一下w的意义 前言 在之前的文章中,我们进行了正交相机视图空间转化到裁剪空间的推导。 Unity中Shade…

3DMAX 中的 VR 渲染器如何设置局部区域渲染?

3DMAX 中的 VR 渲染器如何设置局部渲染? 首先我们要得打开渲染设置,在3damx里按F10,调出渲染设置。选定渲染器为Vary渲染器: 设置VR的局部渲染,需要打开帧缓冲,我们在V-ary项下,打开帧缓冲(点击…

腾讯云服务器怎么买划算?最新优惠价格表

2023腾讯云轻量应用服务器优惠价格表,12月最新报价,腾讯云轻量2核2G3M带宽62元一年、2核2G4M轻量服务器118元一年,540元三年、2核4G5M带宽218元一年,756元三年、4核8G12M轻量服务器646元15个月,CVM云服务器S5实例2核2G…