鸿蒙 状态管理-应用存储

前提:基于官网3.1/4.0文档。参考官网文档
基于Android开发体系来进行比较和思考。(或有偏颇,自行斟酌)

1.概念

装饰器(@State、@Prop等)是用于组件的状态修饰符,本篇讲的是更上一层级别,页面及应用级别。

  • LocalStorage:页面级UI状态存储,通常用于UIAbility内、页面间的状态共享。
  • AppStorage:特殊的单例LocalStorage对象,由UI框架在应用程序启动时创建,为应用程序UI状态属性提供中央存储;
  • PersistentStorage:持久化存储UI状态,通常和AppStorage配合使用,选择AppStorage存储的数据写入磁盘,以确保这些属性在应用程序重新启动时的值与应用程序关闭时的值相同;
  • Environment:应用程序运行的设备的环境参数,环境参数会同步到AppStorage中,可以和AppStorage搭配使用。

2. 内容详解

1.LocalStorage:页面级UI状态存储

是什么?
内存。

作用范围?

应用程序决定LocalStorage对象的生命周期。当应用释放最后一个指向LocalStorage的引用时,比如销毁最后一个自定义组件,LocalStorage将被JS Engine垃圾回收。

@LocalStorageProp:@LocalStorageProp装饰的变量和与LocalStorage中给定属性建立单向同步关系。
@LocalStorageLink:@LocalStorageLink装饰的变量和在@Component中创建与LocalStorage中给定属性建立双向同步关系。

怎么用?

let storage = new LocalStorage({ 'PropA': 47 }); // 创建新实例并使用给定对象初始化
let propA = storage.get('PropA') // propA == 47
let link1 = storage.link('PropA'); // link1.get() == 47
let link2 = storage.link('PropA'); // link2.get() == 47
let prop = storage.prop('PropA'); // prop.get() = 47
link1.set(48); // two-way sync: link1.get() == link2.get() == prop.get() == 48
prop.set(1); // one-way sync: prop.get()=1; but link1.get() == link2.get() == 48
link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49

在下面的用例中,Index页面中的propA通过getShared()方法获取到共享的LocalStorage实例。点击Button跳转到Page页面,点击Change propA改变propA的值,back回Index页面后,页面中propA的值也同步修改。

// index.ets
import router from '@ohos.router';// 通过getShared接口获取stage共享的LocalStorage实例
let storage = LocalStorage.getShared()
@Entry(storage)
@Component
struct Index {// can access LocalStorage instance using // @LocalStorageLink/Prop decorated variables@LocalStorageLink('PropA') propA: number = 1;build() {Row() {Column() {Text(`${this.propA}`).fontSize(50).fontWeight(FontWeight.Bold)Button("To Page").onClick(() => {router.pushUrl({url:'pages/Page'})})}.width('100%')}.height('100%')}
}// Page.ets
import router from '@ohos.router';let storage = LocalStorage.getShared()
@Entry(storage)
@Component
struct Page {@LocalStorageLink('PropA') propA: number = 2;build() {Row() {Column() {Text(`${this.propA}`).fontSize(50).fontWeight(FontWeight.Bold)Button("Change propA").onClick(() => {this.propA = 100;})Button("Back Index").onClick(() => {router.back()})}.width('100%')}}
}

由此可见:@LocalStorageProp@LocalStorageLink``修饰符其实就是获取对LocalStorage```的权限,获取的是单项数据监听和双向数据操作的权限。

2. AppStorage:应用全局的UI状态存储

是什么?
顾名思义,相较于LocalStorage是页面及页面间的数据存储,AppStorage是进程级别。

它也有类似于@LocalStorageProp@LocalStorageLink的修饰符,为:@StorageProp@StorageLink修饰符。具体的作用和前述类似,只不过作用域提升到了应用级别。
关于命名,其实它定义为@AppStorageProp@AppStorageLink更为统一一点,没有必要做这样的简化。

怎么用?

AppStorage.SetOrCreate('PropA', 47);let storage: LocalStorage = new LocalStorage({ 'PropA': 17 });
let propA: number = AppStorage.Get('PropA') // propA in AppStorage == 47, propA in LocalStorage == 17
var link1: SubscribedAbstractProperty<number> = AppStorage.Link('PropA'); // link1.get() == 47
var link2: SubscribedAbstractProperty<number> = AppStorage.Link('PropA'); // link2.get() == 47
var prop: SubscribedAbstractProperty<number> = AppStorage.Prop('PropA'); // prop.get() == 47link1.set(48); // two-way sync: link1.get() == link2.get() == prop.get() == 48
prop.set(1); // one-way sync: prop.get() == 1; but link1.get() == link2.get() == 48
link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49storage.get('PropA') // == 17 
storage.set('PropA', 101);
storage.get('PropA') // == 101AppStorage.Get('PropA') // == 49
link1.get() // == 49
link2.get() // == 49
prop.get() // == 49

用法倒是不难理解。

AppStorage.SetOrCreate('PropA', 47);
let storage = new LocalStorage({ 'PropA': 48 });@Entry(storage)
@Component
struct CompA {@StorageLink('PropA') storLink: number = 1;@LocalStorageLink('PropA') localStorLink: number = 1;build() {Column({ space: 20 }) {Text(`From AppStorage ${this.storLink}`).onClick(() => this.storLink += 1)Text(`From LocalStorage ${this.localStorLink}`).onClick(() => this.localStorLink += 1)}}
}

不建议开发者使用@StorageLink和AppStorage的双向同步的机制来实现事件通知,AppStorage是和UI相关的数据存储,改变会带来UI的刷新,相对于一般的事件通知,UI刷新的成本较大。

如果是不建议的类型,那么其实可以通过限制应用于UI 变化和编译器报错的方式来约束。一般情况下,开发为了快速进行,很可能就直接使用了。(当然程序开发,谁也无法保证完全无问题。)

3.PersistentStorage:持久化存储UI状态

是什么?

PersistentStorage和AppStorage中的属性建立双向同步。应用开发通常通过AppStorage访问PersistentStorage,另外还有一些接口可以用于管理持久化属性,但是业务逻辑始终是通过AppStorage获取和设置属性的。

既然如此,直接使用AppStorage不就可以了,为什么还要另外添加这样一个概念?

PersistentStorage不允许的类型和值有:
不支持嵌套对象(对象数组,对象的属性是对象等)。因为目前框架无法检测AppStorage中嵌套对象(包括数组)值的变化,所以无法写回到PersistentStorage中。
不支持undefined 和 null 。

那这就纯粹是设计缺陷,实现上的能力不足了。数组应该要支持的,这都是基本的结构、属性值

PersistentStorage的持久化变量最好是小于2kb的数据,不要大量的数据持久化,因为PersistentStorage写入磁盘的操作是同步的,大量的数据本地化读写会同步在UI线程中执行,影响UI渲染性能。如果开发者需要存储大量的数据,建议使用数据库api。
PersistentStorage只能在UI页面内使用,否则将无法持久化数据。

为什么只能在UI页面使用?不是要通过AppStorage来操作的么?为什么限制在UI 线程中进行读写同步操作!!!=

怎么用?

PersistentStorage.PersistProp('aProp', 47);@Entry
@Component
struct Index {@State message: string = 'Hello World'@StorageLink('aProp') aProp: number = 48build() {Row() {Column() {Text(this.message)// 应用退出时会保存当前结果。重新启动后,会显示上一次的保存结果Text(`${this.aProp}`).onClick(() => {this.aProp += 1;})}}}
}

在PersistentStorage之后访问AppStorage中的属性
开发者可以先判断是否需要覆盖上一次保存在PersistentStorage中的值,如果需要覆盖,再调用AppStorage的接口进行修改,如果不需要覆盖,则不调用AppStorage的接口。

PersistentStorage.persistProp('aProp', 48);
if (AppStorage.get('aProp') > 50) {// 如果PersistentStorage存储的值超过50,设置为47AppStorage.setOrCreate('aProp',47);
}

这个设计的槽点上面已经吐过了。

3.疑问与总结

  1. 如果组件中有多个状态变量,多个状态变量发生状态变化时,是否会触发多次组件初始化?如果是,那么有没有什么办法减少渲染?

  2. 一直都有个疑问,状态变量在后台发生状态值变更时,UI 是否会渲染?

  3. PersistentStorage的设计无法理解,因为看起来冗余且麻烦
    若是想直接本地持久化的数据直接作用于UI 元素渲染,其实通过其他方式实现更简单。(譬如,注解之类,再不济包裹一层通用对象也可以的。和UI 线程直接搅在一起不是明智之举)

总的来说,能理解设计者直接打通数据驱动UI 变化的想法,但是设计、实现上面目前还有缺陷,这样会导致真正开发过程中,开发者有些场景头疼不已。(既然Android的系统设计、实现已有参考,其实鸿蒙这块就可以做得稳妥一点的。)

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

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

相关文章

牛客周赛 Round 31(A~F)

文章目录 ABCDEF A #include <bits/stdc.h> #define int long long #define rep(i,a,b) for(int i (a); i < (b); i) #define fep(i,a,b) for(int i (a); i > (b); --i) #define pii pair<int, int> #define pll pair<long long, long long> #defi…

华为自动驾驶干不过特斯拉?

文 | AUTO芯球 作者 | 李诞 什么&#xff1f; 华为的智能驾驶方案干不过蔚小理&#xff1f; 特斯拉的智能驾驶[FSD]要甩中国车企几条街&#xff1f; 这华为问界阿维塔刚刚推送“全国都能开”的城区“无图 NCA” 就有黑子来喷了 这是跪久了站不起来了吧 作为玩车14年&…

Pytorch: nn.dropout

Dropout 是一种用于深度学习模型的正则化技术&#xff0c;旨在减少模型对特定训练样本的过度拟合。其主要作用包括&#xff1a; 减少过拟合&#xff1a; Dropout 阻止神经网络对某些特定输入值过度依赖&#xff0c;从而提高模型的泛化能力。通过随机地失活神经元&#xff08;将…

flutter开发实战-可扩展popup弹窗template模版样式

flutter开发实战-可扩展popup弹窗template模版样式 最近在看到一个flutter_beautiful_popup&#xff0c;可以美化弹窗窗口样式。该插件通过一个template模版的类BeautifulPopupTemplate作为抽象的base类。 一、基类BeautifulPopupTemplate 在BeautifulPopupTemplate中&…

1-1 动手学深度学习v2-线性回归-笔记

简化核心模型 假设1: 影响房价的关键因素是卧室个数&#xff0c;卫生间个数和居住面积&#xff0c;记为 x 1 x_{1} x1​&#xff0c; x 2 x_{2} x2​&#xff0c; x 3 x_{3} x3​假设2: 成交价是关键因素的加权和 y w 1 x 1 w 2 x 2 w 3 x 3 b yw_{1}x_{1}w_{2}x_{2}w_{3…

RabbitMQ——基于 KeepAlived + HAProxy 搭建 RabbitMQ 高可用负载均衡集群

一、集群简介 1.1 集 群架构 当单台 RabbitMQ 服务器的处理消息的能力达到瓶颈时&#xff0c;此时可以通过 RabbitMQ 集群来进行扩展&#xff0c;从而达到提升吞吐量的目的。 RabbitMQ 集群是一个或多个节点的逻辑分组&#xff0c;集群中的每个节点都是对等的&#xff0c;每…

目标检测及相关算法介绍

文章目录 目标检测介绍目标检测算法分类目标检测算法模型组成经典目标检测论文 目标检测介绍 目标检测是计算机视觉领域中的一项重要任务&#xff0c;旨在识别图像或视频中的特定对象的位置并将其与不同类别中的对象进行分类。与图像分类任务不同&#xff0c;目标检测不仅需要…

OfficeWeb365 Readfile 任意文件读取漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

主品牌竞争方向之洞察竞争环境变化

随着市场环境加速变化&#xff0c;如果只停留在过去&#xff0c;未能及时进化的主品牌可能会逐渐老化&#xff0c;失去市场竞争力&#xff0c;甚至被新兴竞争对手所取代。因此&#xff0c;企业需要不断洞察竞争环境变化&#xff0c;避免企业走向衰退&#xff0c;让主品牌进化&a…

TrinityCore安装记录

TrinityCore模拟魔兽世界&#xff08;World of Warcraft&#xff09;的开源项目&#xff0c;并且该项目代码广泛的优化、改善和清理代码。 前期按照官方手册按部就班的安装即可。 注意几点&#xff1a; 1 需要配置Ubuntu22.04版本的服务器或者Debian11 服务器。2 需要使用gi…

网易和腾讯面试题精选---缓存面试问题和答案

介绍 在当今快节奏的数字环境中,数据和资源的高效管理对于确保最佳应用程序性能、可扩展性和响应能力变得至关重要。缓存是一种用于将频繁访问的数据存储在更接近使用点的技术,在提高系统效率、减少延迟和改善各种计算环境中的用户体验方面发挥着关键作用。本文深入探讨了缓存…

Office恢复旧UI|Office UI问题|Word UI|小喇叭找不到

Office恢复旧UI&#xff5c;Office UI问题&#xff5c;Word UI&#xff5c;小喇叭找不到 问题描述&#xff1a;Office新版本默认新UI&#xff0c;主界面没有小喇叭可以切换到旧UI. 解决方案&#xff1a; 以下述内容新建.txt&#xff0c;保存并改后缀为.reg&#xff0c;双击打开…

Flink生产环境常见问题及解决方法

在Flink生产环境中&#xff0c;可能会遇到一些常见的问题。下面简单的介绍几个常见问题&#xff0c;并且提供一些解决方法&#xff0c;来帮助你更好地应对这些问题。 故障转移和高可用性 Flink提供了故障转移和高可用性机制&#xff0c;但在配置和使用时可能会遇到问题。如果…

154基于matlab的二维元胞自动机模拟森林火灾(生命游戏 )和模拟收费站交通流

基于matlab的二维元胞自动机模拟森林火灾&#xff08;生命游戏 &#xff09;和模拟收费站交通流。全国大学生美国建模竞赛&#xff0c;程序已调通&#xff0c;可直接运行。 154 元细胞自动机 森林起火 收费站交通 (xiaohongshu.com)

unity 如何将字典显示在Inspector面板上

主要通过ISerializationCallbackReceiver接口来实现, 将所有的Value值存入List显示即可. 这里在value里存了一个Key 也可以将Key和value分别保存 public interface RecordValue<T>{public T Key { get; }}[Serializable]public class RecordDictionary<TKey, TValue&g…

Linux的库文件

概述&#xff1a; 库文件一般就是编译好的二进制文件&#xff0c;用于在链接阶段同目标代码一块生成可执行文件&#xff0c;或者运行可执行文件的时候被加载&#xff0c;以遍调用库文件中的某段代码。 动态链接都是索引的.so文件&#xff0c;静态链接都是压缩打包的.a文件。 …

rust原生语言对比 <在rust内> 执行javascirpt与lua解释型语言的性能

对于javascript我使用的是js-sandbox库。我测试当前js-sandbox的release版本是0.1.6不知道为什么无法在mac下正常运行,只能以path的方式指向js-sandbox的源码了。 对于lua我使用的是rlua库,版本号为0.19.8。 我有两个系统都做了测试,ubuntu和mac。 先看代码 use js_sandb…

Python新春烟花盛宴

写在前面 哈喽小伙伴们&#xff0c;博主在这里提前祝大家新春快乐呀&#xff01;我用Python绽放了一场新春烟花盛宴&#xff0c;一起来看看吧&#xff01; 环境需求 python3.11.4及以上PyCharm Community Edition 2023.2.5pyinstaller6.2.0&#xff08;可选&#xff0c;这个库…

深度学习的进展:人工智能时代的里程碑

深度学习的进展&#xff1a;人工智能时代的里程碑 摘要 深度学习作为机器学习领域的重要分支&#xff0c;近年来取得了巨大的进展。本文将回顾深度学习的发展历程&#xff0c;探讨其在图像识别、自然语言处理和语音识别等领域的重要应用&#xff0c;并展望深度学习在人工智能…

报错:string sub-command REGEX, mode MATCH needs at least 5 arguments

编译的时候碰到这个报错string sub-command REGEX, mode MATCH needs at least 5 arguments搜索到这个issue&#xff1a;Error with cmake build "string sub-command REGEX, mode MATCH needs at least 5 arguments" Issue #12959 zephyrproject-rtos/zephyr Git…