西安网站建设推广优化,获取网站js,百度一下官方网,soho需不需要做网站弄企业邮箱前提#xff1a;基于官网3.1/4.0文档。参考官网文档 基于Android开发体系来进行比较和思考。#xff08;或有偏颇#xff0c;自行斟酌#xff09; 1.概念
装饰器#xff08;State、Prop等#xff09;是用于组件的状态修饰符#xff0c;本篇讲的是更上一层级别#xff… 前提基于官网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垃圾回收。 LocalStoragePropLocalStorageProp装饰的变量和与LocalStorage中给定属性建立单向同步关系。 LocalStorageLinkLocalStorageLink装饰的变量和在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 variablesLocalStorageLink(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: SubscribedAbstractPropertynumber AppStorage.Link(PropA); // link1.get() 47
var link2: SubscribedAbstractPropertynumber AppStorage.Link(PropA); // link2.get() 47
var prop: SubscribedAbstractPropertynumber 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 WorldStorageLink(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.疑问与总结 如果组件中有多个状态变量多个状态变量发生状态变化时是否会触发多次组件初始化如果是那么有没有什么办法减少渲染 一直都有个疑问状态变量在后台发生状态值变更时UI 是否会渲染 PersistentStorage的设计无法理解因为看起来冗余且麻烦 若是想直接本地持久化的数据直接作用于UI 元素渲染其实通过其他方式实现更简单。譬如注解之类再不济包裹一层通用对象也可以的。和UI 线程直接搅在一起不是明智之举
总的来说能理解设计者直接打通数据驱动UI 变化的想法但是设计、实现上面目前还有缺陷这样会导致真正开发过程中开发者有些场景头疼不已。既然Android的系统设计、实现已有参考其实鸿蒙这块就可以做得稳妥一点的。
