当前位置: 首页 > news >正文

鸿蒙状态管理概述

状态管理

  • 状态管理之v1
    • @LocalStorage
      • LocalStorageLink的框架行为
      • LocalStorageProp的框架行为
      • LocalStorage使用场景
    • @AppStorage
      • StorageLink的框架行为
      • StorageProp的框架行为
      • AppStorage的使用场景
    • @PersistentStorage
    • @Environment
      • Environment内置参数
    • @Watch
      • Watch的使用场景
    • $$语法
      • $$ 使用场景
    • @Track

状态管理之v1

  • @State 管理组件内部状态
  • @Prop 用于父组件传递数据,子组件不能修改
  • @Link 实现双向绑定,子组件可以修改
  • @Provide 与 @Consume 则提供了全局共享状态的机制。
  • @Observed:声明可观察对象,
  • @ObjectLink:用于实现双向数据绑定,允许子组件直接修改父组件的对象,适合复杂对象的双向传递。
  • @LocalStorage: 页面级UI状态存储,装饰器有@LocalStorageProp和@LocalStorageLink
  • @AppStorage: 应用全局的UI状态存储,装饰器有@StorageProp和@StorageLink
  • @PersistentStorage: 持久化存储UI状态,需要依赖AppStorage
  • @Environment: 设备环境查询,需要依赖AppStorage
  • @Watch:状态变量更改通知
  • $$语法:内置组件双向同步
  • @Track:class对象属性级更新

@LocalStorage

  • 应用程序可以创建多个LocalStorage实例,LocalStorage实例可以在页面内共享,也可以通过getShared接口,实现跨页面、UIAbility实例内共享。
  • 组件树的根节点,即被@Entry装饰的@Component,可以被分配一个LocalStorage实例,此组件的所有子组件实例将自动获得对该LocalStorage实例的访问权限。
  • @Component装饰的组件既可以自动继承来自父组件的LocalStorage实例,也可以传入指定的LocalStorage的实例。
  • LocalStorage中的所有属性都是可变的。

LocalStorageLink的框架行为

  • 当@LocalStorageLink(key)装饰的数值改变被观察到时,修改将被同步回LocalStorage对应属性键值key的属性中。
  • LocalStorage中属性键值key对应的数据一旦改变,属性键值key绑定的所有的数据(包括双向@LocalStorageLink和单向@LocalStorageProp)都将同步修改。
  • 当@LocalStorageLink(key)装饰的数据本身是状态变量,它的改变不仅仅会同步回LocalStorage中,还会引起所属的自定义组件的重新渲染。

LocalStorageProp的框架行为

  • 被@LocalStorageProp装饰的变量的值的变化不会同步回LocalStorage里。
  • @LocalStorageProp装饰的变量变化会使当前自定义组件中关联的组件刷新。
  • LocalStorage(key)中值的变化会引发所有被@LocalStorageProp对应key装饰的变量的变化,会覆盖@LocalStorageProp本地的改变。

LocalStorage使用场景

  • 可以在应用逻辑使用LocalStorage
  • 可以从UI内部使用 或者 自定义组件外使用
  • 根结点可通过@Entry来接收 LocalStorage ,子节点可通过构造参数来传递 LocalStorage
  • 可以从UIAbility共享到一个或多个视图(关键api:windowStage.loadContentgetShared()
  • LocalStorageLink 的双向同步
  • LocalStorageProp 的单向同步

@AppStorage

  • AppStorage是在应用启动的时候会被创建的单例。它的目的是为了提供应用状态数据的中心存储,这些状态数据在应用级别都是可访问的。AppStorage将在应用运行过程保留其属性。属性通过唯一的键字符串值访问。
  • AppStorage可以和UI组件同步,且可以在应用业务逻辑中被访问。
  • AppStorage支持应用的主线程内多个UIAbility实例间的状态共享。

StorageLink的框架行为

  • 当@StorageLink(key)装饰的数值改变被观察到时,修改将被同步回AppStorage对应属性键值key的属性中。
  • AppStorage中属性键值key对应的数据一旦改变,属性键值key绑定的所有的数据(包括双向@StorageLink和单向@StorageProp)都将同步修改。
  • 当@StorageLink(key)装饰的数据本身是状态变量,它的改变不仅仅会同步回AppStorage中,还会引起所属的自定义组件的重新渲染。

StorageProp的框架行为

  • 当@StorageProp(key)装饰的数值改变被观察到时,修改不会被同步回AppStorage对应key的属性中。
  • 当前@StorageProp(key)单向绑定的数据会被修改,即仅限于当前组件的私有成员变量改变,其他绑定该key的数据不会同步改变。
  • 当@StorageProp(key)装饰的数据本身是状态变量,它的改变虽然不会同步回AppStorage中,但是会引起所属的自定义组件重新渲染。
  • 当AppStorage中key对应的属性发生改变时,会同步给所有@StorageProp(key)装饰的数据,@StorageProp(key)本地的修改将被覆盖。

AppStorage的使用场景

  • 可以在应用逻辑使用AppStorage
  • 可以从UI内部使用 AppStorage
  • 应用的主线程内多个UIAbility实例间的状态共享
  • StorageProp 的单向同步
  • StorageLink 的双向同步

@PersistentStorage

  • PersistentStorage将选定的AppStorage属性保留在设备磁盘上。(关键api: PersistentStorage.persistProp('aProp', 47);)
  • UI和业务逻辑不直接访问PersistentStorage中的属性,所有属性访问都是对AppStorage的访问
  • PersistentStorage和AppStorage中的属性建立双向同步。

@Environment

  • 开发者如果需要应用程序运行的设备的环境参数,以此来作出不同的场景判断,比如多语言,深浅色模式等,需要用到Environment设备环境查询。
  • Environment是ArkUI框架在应用程序启动时创建的单例对象。它为AppStorage提供了一系列描述应用程序运行状态的属性。Environment的所有属性都是不可变的(即应用不可写入),所有的属性都是简单类型。
  • Environment提供了读取系统某些环境变量的能力,具体见Environment内置参数,并将其值写入AppStorage里,所以开发者需要通过AppStorage才能获取环境变量的值。
  • 关键api: Environment.envProp('languageCode', 'en');

Environment内置参数

数据类型描述
accessibilityEnabledboolean获取无障碍屏幕读取是否启用。
colorModeColorMode色彩模型类型:选项为ColorMode.LIGHT: 浅色,ColorMode.DARK: 深色。
fontScalenumber字体大小比例。开发者需要配置configuration使fontScale跟随系统变化
fontWeightScalenumber字体粗细程度。
layoutDirectionLayoutDirection布局方向类型:包括LayoutDirection.LTR: 从左到右,LayoutDirection.RTL: 从右到左。
languageCodestring当前系统语言值,取值必须为小写字母, 例如zh。

@Watch

  • @Watch提供了状态变量的监听能力,@Watch仅能监听到可以观察到的变化。
  • @Watch应用于对状态变量的监听。如果开发者需要关注某个状态变量的值是否改变,可以使用@Watch为状态变量设置回调函数。
  • @Watch在ArkUI框架内部判断数值有无更新使用的是严格相等(===)

Watch的使用场景

  • 建议@State、@Prop、@Link等装饰器在@Watch装饰器之前,以保持整体风格的一致。
@State @Watch('change') num: number = 10;
change() {console.log(`xxx`);
}

$$语法

  • 为系统内置组件提供TS变量的引用,使得TS变量和系统内置组件的内部状态保持同步。
  • 用于@Builder装饰器的按引用传递参数
  • $$支持基础类型变量,以及@State、@Link和@Prop装饰的变量。

$$ 使用场景

// xxx.ets
@Entry
@Component
struct TextInputExample {@State text: string = ''controller: TextInputController = new TextInputController()build() {Column({ space: 20 }) {Text(this.text)TextInput({ text: $$this.text, placeholder: 'input your word...', controller: this.controller }).placeholderColor(Color.Grey).placeholderFont({ size: 14, weight: 400 }).caretColor(Color.Blue).width(300)}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

@Track

  • @Track应用于class对象的属性级更新。@Track装饰的属性变化时,只会触发该属性关联的UI更新。
  • @Track是class对象的属性装饰器。当一个class对象是状态变量时,@Track装饰的属性发生变化,只会触发该属性关联的UI更新
  • 如果class类中使用了@Track装饰器,则未被@Track装饰器装饰的属性不能在UI中使用,如果使用,会发生运行时报错。

参考资料:状态管理(V1)

相关文章:

鸿蒙状态管理概述

状态管理 状态管理之v1LocalStorageLocalStorageLink的框架行为LocalStorageProp的框架行为LocalStorage使用场景 AppStorageStorageLink的框架行为StorageProp的框架行为AppStorage的使用场景 PersistentStorageEnvironmentEnvironment内置参数 WatchWatch的使用场景 $$语法$$…...

【核心算法篇十三】《DeepSeek自监督学习:图像补全预训练方案》

引言:为什么自监督学习成为AI新宠? 在传统监督学习需要海量标注数据的困境下,自监督学习(Self-Supervised Learning)凭借无需人工标注的特性异军突起。想象一下,如果AI能像人类一样通过观察世界自我学习——这正是DeepSeek图像补全方案的技术哲学。根据,自监督学习通过…...

由浅入深学习大语言模型RLHF(PPO强化学习- v1浅浅的)

最近,随着DeepSeek的爆火,GRPO也走进了视野中。为了更好的学习GRPO,需要对PPO的强化学习有一个深入的理解,那么写一篇文章加深理解吧。纵观网上的文章,要么说PPO原理,各种复杂的公式看了就晕,要…...

网络安全三件套

一、在线安全的四个误解     Internet实际上是个有来有往的世界,你可以很轻松地连接到你喜爱的站点,而其他人,例如黑客也很方便地连接到你的机器。实际上,很多机器都因为自己很糟糕的在线安全设置无意间在机器和系统中留下了“…...

瑞芯微RV1126部署YOLOv8全流程:环境搭建、pt-onnx-rknn模型转换、C++推理代码、错误解决、优化、交叉编译第三方库

目录 1 环境搭建 2 交叉编译opencv 3 模型训练 4 模型转换 4.1 pt模型转onnx模型 4.2 onnx模型转rknn模型 4.2.1 安装rknn-toolkit 4.2.2 onn转成rknn模型 5 升级npu驱动 6 C++推理源码demo 6.1 原版demo 6.2 增加opencv读取图片的代码 7 交叉编译x264 ffmepg和op…...

【ISO 14229-1:2023 UDS诊断(会话控制0x10服务)测试用例CAPL代码全解析⑤】

ISO 14229-1:2023 UDS诊断【会话控制0x10服务】_TestCase05 作者:车端域控测试工程师 更新日期:2025年02月15日 关键词:UDS诊断、0x10服务、诊断会话控制、ECU测试、ISO 14229-1:2023 TC10-005测试用例 用例ID测试场景验证要点参考条款预期…...

python-leetcode 35.二叉树的中序遍历

给定一个二叉树的根节点root,返回它的中序遍历。 方法一:递归 二叉树的中序遍历:按照访问左子树——根节点——右子树的方式遍历这棵树,而在访问左子树或者右子树的时候我们按照同样的方式遍历,直到遍历完整棵树。因此整个遍历过…...

glob 用法技巧

目录 处理大量文件节省内存 匹配多个文件扩展名 遍历多种格式文件 遍历某一个文件: 查找当前目录和子目录 6. 排除特定文件 7. 大小写不敏感匹配 8. 获取绝对路径 9. 处理特殊字符 处理大量文件节省内存 技巧:用 iglob 替代 glob,逐…...

CodeGPT 使用教程(适用于 VSCode)

CodeGPT 使用教程(适用于 VSCode) CodeGPT 是一个 VSCode 插件,可以让你在代码编辑器中直接调用 GPT 进行代码补全、优化、调试等操作。以下是详细的安装和使用步骤: 1. 安装 CodeGPT 方式 1:从 VSCode 插件市场安装…...

以下是MySQL中常见的增删改查语句

以下是MySQL中常见的增删改查语句: 增加数据(INSERT) 基本语法: INSERT INTO table_name (column1, column2,...) VALUES (value1, value2,...); 示例:向名为 students 的表中插入一条学生记录, id 为1&am…...

Vue3 与 TypeScript 实战:核心细节与最佳实践

引言 Vue3 的 Composition API 与 TypeScript 的强类型支持完美契合,极大提升了代码的可维护性和开发体验。本文将深入探讨 Vue3 TypeScript 的关键细节,并通过实际代码示例展示如何高效结合二者。 一、组合式 API 与类型推导 Vue3 的 setup 函数与 T…...

23种设计模式 - 解释器模式

模式定义 解释器模式(Interpreter Pattern)是一种行为型设计模式,用于为特定语言(如数控系统的G代码)定义文法规则,并构建解释器来解析和执行该语言的语句。它通过将语法规则分解为多个类,实现…...

常用的 React Hooks 的介绍和示例

目录 1. useState2. useEffect3. useContext4. useReducer5. useCallback6. useMemo7. useRef8. useImperativeHandle9. useLayoutEffect10. useDebugValue 常用的 React Hooks 的介绍和示例: 1. useState useState 是一个用于在函数组件中添加状态的 Hook。 impo…...

ChatGLM-6B模型

ChatGLM-6B 是由 清华大学人工智能研究院(THU AI) 和 智源研究院(BAAI) 开发的一款中文对话生成大语言模型。它是ChatGLM系列的一个版本,其核心特点是基于GLM(General Language Model)架构&…...

编译安装php

前置准备 这里的可能不全,每个人安装的模块不一致,依赖也不不相同,按实际情况调整 yum install libxml2 -y yum install libxml2-devel -y yum install openssl-devel -y yum install sqlite-devel -y yum install libcurl-devel -yyum ins…...

【JavaEE进阶】Spring MVC(3)

欢迎关注个人主页:逸狼 创造不易,可以点点赞吗 如有错误,欢迎指出~ 返回响应 返回静态页面 //RestController Controller RequestMapping("/response") public class ResponseController {RequestMapping("/returnHtmlPage&…...

30 款 Windows 和 Mac 下的复制粘贴软件对比

在日常电脑操作中,复制粘贴是极为高频的操作,一款好用的复制粘贴软件能极大提升工作效率。以下为你详细介绍 30 款 Windows 和 Mac 下的复制粘贴软件,并对比它们的优缺点,同时附上官网下载地址,方便大家获取软件。 Pa…...

【LLAMA】羊驼从LLAMA1到LLAMA3梳理

every blog every motto: Although the world is full of suffering, it is full also of the overcoming of it 0. 前言 LLAMA 1到3梳理 1. LLAMA 1 论文: LLaMA: Open and Efficient Foundation Language Models 时间: 2023.02 1.1 前言…...

【OS安装与使用】part3-ubuntu安装Nvidia显卡驱动+CUDA 12.4

文章目录 一、待解决问题1.1 问题描述1.2 解决方法 二、方法详述2.1 必要说明2.2 应用步骤2.2.1 更改镜像源2.2.2 安装NVIDIA显卡驱动:nvidia-550(1)查询显卡ID(2)PCI ID Repository查询显卡型号(3&#xf…...

【蓝桥杯集训·每日一题2025】 AcWing 6123. 哞叫时间 python

6123. 哞叫时间 Week 1 2月18日 农夫约翰正在试图向埃尔茜描述他最喜欢的 USACO 竞赛,但她很难理解为什么他这么喜欢它。 他说「竞赛中我最喜欢的部分是贝茜说 『现在是哞哞时间』并在整个竞赛中一直哞哞叫」。 埃尔茜仍然不理解,所以农夫约翰将竞赛以…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能,我们需要对它的功能特点进行分析: 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具: mysql:关系型数据库&am…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​: 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​: File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码: https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题:docker pull 失败 网络不同,需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲:核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用,还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议,专门用于在数字音频设备之间传输数字音频数据。它由飞利浦(Philips)公司开发,以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

CSS | transition 和 transform的用处和区别

省流总结: transform用于变换/变形,transition是动画控制器 transform 用来对元素进行变形,常见的操作如下,它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1)下载安装包2)配置环境变量3)安装镜像4)node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1)使用 http-server2)详解 …...

Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)

引言 工欲善其事,必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后,我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集,就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...