鸿蒙开发之状态管理

@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.hqwc.cn/news/410936.html

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

相关文章

[C++] opencv - Mat::convertTo函数介绍和使用场景

Mat::convertTo()函数 Converts an array to another data type with optional scaling. 该函数主要用于数据类型的相互转换。 The method converts source pixel values to the target data type. saturate_cast<> is applied at the end to avoid possible overf…

Chrome 浏览器插件 cookies API 解析

Chrome.cookie 前端开发肯定少不了和 cookie 打交道&#xff0c;此文较详细的介绍下 chrome.cookie 的 API 以及在 popup、service worker、content 中如何获取的 一、权限&#xff08;Permissions&#xff09; 如果需使用 Cookie API&#xff0c;需要在 manifest.json 文件…

分享一个基于easyui前端框架开发的后台管理系统模板

这是博主自己在使用的一套easyui前端框架的后台管理系统模版&#xff0c;包含了后端的Java代码&#xff0c;已经实现了菜单控制、权限控制功能&#xff0c;可以直接拿来使用。 springboot mybatis mybatis-plus实现的增删查改完整项目&#xff0c;前端使用了easyui前端框架。…

4种方法用Python批量实现多Excel多Sheet合并

目录 方法一&#xff1a;使用pandas库 方法二&#xff1a;使用openpyxl库 方法三&#xff1a;使用xlrd和xlwt库 方法四&#xff1a;使用os和glob库 在数据处理中&#xff0c;经常需要将多个Excel文件中的多个工作表进行合并。以下介绍了4种方法&#xff0c;使用Python批量实…

一、MySQL 卸载

目录 1、软件的卸载准备 2、软件的卸载 方式一&#xff1a;通过控制面板卸载 方式二&#xff1a;通过mysql8的安装向导卸载 1、双击mysql8的安装向导 2、取消更新 3、选择要卸载的mysql服务器软件的具体版本 4、确认删除数据目录 5、执行删除 6、完成删除 3、清理残…

视频美颜SDK技术解析与技术对比

当下&#xff0c;各类应用和服务纷纷采用视频美颜SDK&#xff0c;以提供更加令人满意的视觉效果。本文将深入探讨视频美颜SDK的技术原理&#xff0c;同时对比不同SDK的特性&#xff0c;为开发者和决策者提供全面的技术参考。 一、技术原理解析 1.图像处理基础 视频美颜SDK基…

【算法与数据结构】62、LeetCode不同路径

文章目录 一、题目二、解法2.1 动态规划解法2.2 数论解法 三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 2.1 动态规划解法 思路分析&#xff1a;机器人只能向下或者向右移动&#xff0c;那么到达&a…

CTF CRYPTO 密码学-4

题目名称&#xff1a;奇怪的先生 题目描述&#xff1a; 描述:oss先生将三个培根的中间一只移到了左边,然后咬了一小口最后一根&#xff0c;说真好吃&#xff0c;真是个奇怪的先生&#xff01; 密文&#xff1a;VlM5WnlXc0ZibEhmMmE1ZHYxMDlhVkdmMlk5WmtRPT0 分析 应该是根据题…

VUE 中的 v-for 和 v-if 是否可以共存

VUE 中的 v-for 和 v-if 是否可以共存 前言1、面试经2、正确回答3、总结总结&#xff1a; 前言 要成功&#xff0c;先发疯&#xff0c;头脑简单往前冲&#xff01; 三金四银&#xff0c;金九银十&#xff0c;多学知识&#xff0c;也不能埋头苦干&#xff0c;要成功&#xff0c…

【动态规划】【数学】【C++算法】18赛车

作者推荐 视频算法专题 本文涉及知识点 动态规划 数学 LeetCode818赛车 你的赛车可以从位置 0 开始&#xff0c;并且速度为 1 &#xff0c;在一条无限长的数轴上行驶。赛车也可以向负方向行驶。赛车可以按照由加速指令 ‘A’ 和倒车指令 ‘R’ 组成的指令序列自动行驶。 当…

物联网中的通信技术

阅读引言&#xff1a; 本文主要大致为大家带来物联网中的常见的通信方式的知识梳理。 目录 一、概述 二、无线通信技术 1.物联网电子标签 RFID 1.1 RFID 概念 1.2 RFID 系统组成 2.WI-FI技术 3.UWB技术 4.ZigBee技术 5.NFC技术 6.蓝牙技术 7.EnOcean技术 一、概述 物…

Spark SQL函数定义

目录 窗口函数 SQL函数分类 Spark原生自定义UDF函数 Pandas的UDF函数 Apache Arrow框架基本介绍 基于Arrow完成Pandas DataFrame和Spark DataFrame互转 基于Pandas完成UDF函数 自定义UDF函数 自定义UDAF函数 窗口函数 分析函数 over(partition by xxx order by xxx [as…