鸿蒙开发之状态管理

@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.mzph.cn/news/632595.shtml

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

相关文章

wiadefui.dll文件丢失导致程序无法运行,怎么办?文件下载

很多用户在启动游戏或扫描仪的时候,电脑会报错提示“wiadefui.dll文件找到不到,程序无法启动”,这是怎么回事呢? 首先,我们先来了解wiadefui.dll文件是什么?有什么作用? wiadefui.dll是Windows…

渗透测试-靶机DC-2-知识点总结

靶机DC-2-知识点总结 一、前言二、实验环境三、渗透测试工具1. cewl&#xff08;1&#xff09;cewl简介&#xff08;2&#xff09;cewl常见用法 2. wpscan&#xff08;1&#xff09;wpscan简介&#xff08;2&#xff09;wpscan常见用法<1>直接扫描<2>-e u爆破用户名…

Elasticsearch各种高级文档操作2

本文来记录下Elasticsearch各种文档操作 文章目录 初始化文档数据 初始化文档数据 在进行各种文档操作之前&#xff0c;我们先进行初始化文档数据的工作

C++的命名空间域

一、域作用限定符 :: 即是域作用限定符&#xff0c;它的作用是指明一个标识符&#xff08;变量、函数或类&#xff09;来自哪一个作用域范围 二、编译器搜索变量、函数等的原则 1.先搜索局部变量&#xff0c;2.再搜索全局变量&#xff0c;3.最后搜索指定的命名空间域 三、…

回调函数和钩子函数的区别

文章目录 一、 回调函数和钩子函数的异同点1.1 回调函数和钩子函数的区别1.2 举例 二、回调函数和钩子函数的相同点 一、 回调函数和钩子函数的异同点 1.1 回调函数和钩子函数的区别 钩子函数和回调函数都是编程中常用的概念&#xff0c;它们在实现某些特定功能时都非常有用&…

android 和 opencv 开发环境搭建

本文详细说明给android项目添加opencv库的详细步骤&#xff0c;并通过实现图片灰度化来查看配置是否成功。 下载OPENCV ANDROID SDK 到官网下载 打开 https://opencv.org/releases/ 选择android&#xff0c;下载完成后解压出下面的文件&#xff1a; 安装android sdk 和 ndk …

快手二面:节流和防抖知道吗?

面试官:节流与防抖&#xff0c;说说两者各自适用场景&#xff1f; 回答&#xff1a;面试官&#xff0c;在前端开发中&#xff0c;节流&#xff08;Throttle&#xff09;和防抖&#xff08;Debounce&#xff09;是两种常用的优化高频率执行JavaScript代码的技术。我将分别阐述它…

数据库(基础理论+MySQL安装和部署)

目录 基础理论 1.1 什么是数据库&#xff1f; 1.2 DBMS数据库管理系统 1.3 数据库与文件系统的区别 1.4 数据库的发展和规划 1.5 常见的数据库 1.5.1 关系型数据库 1.5.2 非关系型数据库 1.6 DBMS支持的数据模型 层次模型 网状模型 关系模型 面向对象模型&#xf…

T2T VIT 学习笔记(附代码)

论文地址&#xff1a;https://arxiv.org/abs/2101.11986 代码地址&#xff1a;https://github.com/PaddlePaddle/PASSL/tree/main/configs/t2t_vit 1.是什么&#xff1f; T2T-ViT是一种基于Transformer的视觉模型&#xff0c;用于图像分类任务。它通过将图像分割成小的图块&…

在uni-app中使用sku插件,实现商品详情页规格展示和交互。

商品详情 - SKU 模块 学会使用插件市场&#xff0c;下载并使用 SKU 组件&#xff0c;实现商品详情页规格展示和交互。 存货单位&#xff08;SKU&#xff09; SKU 概念 存货单位&#xff08;Stock Keeping Unit&#xff09;&#xff0c;库存管理的最小可用单元&#xff0c;通…

【MyBatis-Plus】逻辑删除

对于一些比较重要的数据&#xff0c;我们通常采用逻辑删除。&#xff08;即用一个字段表示是否删除&#xff0c;实际上始终在数据库没有被删除&#xff09; 当逻辑删除字段为 true&#xff0c;业务处理的时候会自动把该数据当做一个“不存在”的数据处理。&#xff08;即不处理…

计算机网络课程设计-Tracert 与 Ping 程序设计与实现

目录 前言 1 实验题目 2 实验目的 3 实验内容 3.1 步骤 3.2 关键代码 3.2.1 发送ICMP数据报 3.2.2 解析收到的数据报 4 实验结果与分析 5 代码 5.1 ping代码 5.2 Tracert代码 前言 本实验为计算机网络课程设计内容&#xff0c;基本上所有代码都是根据指导书给的附录…

BigeMap在Unity3d中的应用,助力数字孪生

1. 首先需要用到3个软件&#xff0c;unity&#xff0c;gis office 和 bigemap离线服务器 Unity下载地址:点击前往下载页面(Unity需要 Unity 2021.3.2f1之后的版本) Gis office下载地址:点击前往下载页面 Bigemap离线服务器 下载地址: 点击前往下载页面 Unity用于数字孪生项…

ilqr 算法说明

1 Introduction 希望能用比较简单的方式将ilqr算法进行整理和总结。 2 HJB方程 假定我们现在需要完成一个从A点到B点的任务&#xff0c;执行这段任务的时候&#xff0c;每一步都需要消耗能量&#xff0c;可以用下面这个图表示。 我们在执行这个A点到B点的任务的时候&#xf…

什么是区块链?

区块链 区块链 &#xff08;英语&#xff1a;blockchain&#xff09;是借由 密码学 与 共识机制 等技术建立&#xff0c;存储数据的 保证不可篡改和不可伪造的 分布式技术。 什么是区块 区块 就是将一批数据打包在一起&#xff0c;并且给打包出来的区块编号。第一个区块的编…

vue3-事件处理

事件监听 DOM 事件监听指令 v-on 简写 v-on:click"handler" 或者 click"handler"事件处理器 (handler) 的值可以是&#xff1a; 内联事件处理器&#xff1a;比如 click 方法事件处理器&#xff1a;一个指向组件上定义的方法的属性名或是路径。 在内联…

【干货】网络安全之URL过滤

热门IT课程【视频教程】-华为/思科/红帽/oraclehttps://xmws-it.blog.csdn.net/article/details/134398330?spm1001.2014.3001.5502 URL过滤是一种针对用户的URL请求进行上网控制的技术&#xff0c;通过允许或禁止用户访问某些网页资源&#xff0c;达到规范上网行为和降低安全…

matlab行操作快?还是列操作快?

在MATLAB中&#xff0c;通常情况下&#xff0c;对矩阵的列进行操作比对行进行操作更有效率。这是因为MATLAB中内存是按列存储的&#xff0c;因此按列访问数据会更加连续&#xff0c;从而提高访问速度。 一、实例代码 以下是一个简单的测试代码&#xff0c; % 测试矩阵大小 ma…

Python实战 -- PySide6 制作天气查询软件

一、环境准备 开发环境&#xff1a;Python 3.9.2 pycharm PySide6 申请天气情况 API &#xff1a;https://console.amap.com/dev/key/app designer 设计 ui 目录下 Weather.ui 转换为 Weather.py 结果显示 二、完整代码 import sysfrom PySide6 import QtWidgetsimport…

Mysql深度分页优化的一个实践

问题简述: 最近在工作中遇到了大数据量的查询场景, 日产100w左右明细, 会查询近90天内的数据, 总数据量约1亿, 业务要求支持分页查询与导出. 无论是分页或导出都涉及到深度分页查询, mysql通过limit/offset实现的深度分页查询会存在全表扫描的问题, 比如offset1000w, limit10…