文章目录
- 一、V2所属装饰器
-
- 1、@ObservedV2装饰器和@Trace装饰器:类属性变化观测
- 2、@ComponentV2装饰器:自定义组件
- 3、@Local装饰器:组件内部状态
-
- [3.1 注意:](#3.1 注意:)
-
- [1. 复杂类型常量重复赋值给状态变量触发刷新](#1. 复杂类型常量重复赋值给状态变量触发刷新)
- 4、@Param:组件外部输入
- 5、@Once:初始化同步一次
- 6、@Event装饰器:规范组件输出
- 7、@Provider装饰器和@Consumer装饰器:跨组件层级双向同步
- 8、@Monitor装饰器:状态变量修改监听
- 9、@Computed装饰器:计算属性
- 10、@Type装饰器:标记类属性的类型
- 11、@ReusableV2装饰器:组件复用
- [12、AppStorageV2: 应用全局UI状态存储](#12、AppStorageV2: 应用全局UI状态存储)
- [13、PersistenceV2: 持久化存储UI状态](#13、PersistenceV2: 持久化存储UI状态)
一、V2所属装饰器
1、@ObservedV2装饰器和@Trace装饰器:类属性变化观测
为了增强状态管理框架对类对象中属性的观测能力,@ObservedV2和@Trace提供了对嵌套类对象属性变化直接观测的能力。
- @ObservedV2装饰器与@Trace装 饰器需要配合使用,单独使用@ObservedV2装饰器或@Trace装饰器没有任何作用。
- 被@Trace装饰器装饰的属性property变化时,仅会通知property关联的组件进行刷新。
使用:
-
在嵌套类中使用@Trace装饰的属性具有被观测变化的能力。
-
在继承类中使用@Trace装饰的属性具有被观测变化的能力。
-
类中使用@Trace装饰的静态属性具有被观测变化的能力。
限制:
-
非@Trace装饰的成员属性用在UI上无法触发UI刷新。
-
使用@ObservedV2与@Trace装饰的类不能和@State等V1的装饰器混合使用,编译时报错。
-
@ObservedV2的类实例目前不支持使用JSON.stringify进行序列化。
-
使用@ObservedV2与@Trace装饰器的类,需通过new操作符实例化后,才具备被观测变化的能力。
嵌套类场景:在嵌套类场景中,A 类是 B 类中最里层的类,A 类被
@ObservedV2装饰且属性length被@Trace装饰,此时length的变化能够被观测到。而 B 类的属性和类本身无法被观测,无法触发 UI 更新。继承类场景:@Trace支持在类的继承场景中使用,无论是在基类还是继承类中,只有被@Trace装饰的属性才具有被观测变化的能力。继承类可以调用 super() 方法,从而获取父类中的属性。如被@Trace修饰,则均可被观测。
2、@ComponentV2装饰器:自定义组件
为了在自定义组件中使用V2版本状态变量装饰器的能力,开发者可以使用@ComponentV2装饰器装饰自定义组件。
和@Component装饰器一样,@ComponentV2装饰器用于装饰自定义组件:
- 在@ComponentV2装饰的自定义组件中,开发者仅可以使用全新的状态变量装饰器。
- @ComponentV2装饰的自定义组件暂不支持LocalStorage等现有自定义组件的能力。
- 无法同时使用@ComponentV2与@Component装饰同一个struct结构。
- @ComponentV2支持一个可选的boolean类型参数freezeWhenInactive,来实现组件冻结功能。
3、@Local装饰器:组件内部状态
@Local表示组件内部的状态,使得自定义组件内部的变量具有观测变化的能力:
- 被@Local装饰的变量无法从外部初始化,因此必须在组件内部进行初始化。
- 当被@Local装饰的变量变化时,会刷新使用该变量的组件。
- @Local支持观测number、boolean、string、Object、class等基本类型以及Array、Set、Map、Date等内嵌类型。
- @Local的观测能力仅限于被装饰的变量本身。当装饰简单类型时,能够观测到对变量的赋值;当装饰对象类型时,仅能观测到对对象整体的赋值;当装饰简单类型数组时,能观测到数组整体以及数组元素项的变化;当装饰的变量是嵌套类或对象数组时,@Local无法观察深层对象属性的变化。对深层对象属性的观测依赖@ObservedV2与@Trace装饰器;当装饰Array、Set、Map、Date等内嵌类型时,可以观测到通过API调用带来的变化。
typescript
class RawObject {
name: string;
constructor(name: string) {
this.name = name;
}
}
@ObservedV2
class ObservedObject {
@Trace name: string;
constructor(name: string) {
this.name = name;
}
}
@Entry
@ComponentV2
struct Index {
@Local rawObject: RawObject = new RawObject('rawObject');
@Local observedObject: ObservedObject = new ObservedObject('observedObject');
build() {
Column() {
Text(`${this.rawObject.name}`)
Text(`${this.observedObject.name}`)
Button('change object')
.onClick(() => {
// 对类对象整体的修改均能观察到
this.rawObject = new RawObject('new rawObject');
this.observedObject = new ObservedObject('new observedObject');
})
Button('change name')
.onClick(() => {
// @Local不具备观察类对象属性的能力,因此对rawObject.name的修改无法观察到
this.rawObject.name = 'new rawObject name';
// 由于ObservedObject的name属性被@Trace装饰,因此对observedObject.name的修改能被观察到
this.observedObject.name = 'new observedObject name';
})
}
}
}
@State装饰器定义组件中的基础状态变量,在组件内使用。但由于@State装饰器又能够从外部初始化,因此无法确保@State装饰变量的初始值一定为组件内部定义的值。不利于自定义组件内部状态的管理。
@State @Local 参数 无。 无。 从父组件初始化 可选。 不允许外部初始化。 观察能力 能观测变量本身以及一层的成员属性,无法深度观测。 能观测变量本身,深度观测依赖@Trace装饰器。 数据传递 可以作为数据源和子组件中状态变量同步。 可以作为数据源和子组件中状态变量同步。
| @Local变量装饰器 | 说明 |
|---|---|
| 装饰器参数 | 无。 |
| 装饰变量的初始值 | 必须本地初始化,不允许外部传入初始化。 |
| 传递规则 | 说明 |
|---|---|
| 从父组件初始化 | @Local装饰的变量仅允许本地初始化,无法从外部传入初始化。 |
| 初始化子组件 | @Local装饰的变量可以初始化子组件中@Param装饰的变量。 |
3.1 注意:
1. 复杂类型常量重复赋值给状态变量触发刷新
以上示例每次点击Button('change to self'),把相同的Array类型常量赋值给一个Array类型的状态变量,都会触发刷新。原因是在状态管理V2中,会给使用状态变量装饰器如@Trace、@Local装饰的Date、Map、Set、Array添加一层代理用于观测API调用产生的变化。
当再次赋值list[0]时,dataObjFromList已经是Proxy类型,而list[0]是Array类型。由于类型不相等,会触发赋值和刷新。
为了避免这种不必要的赋值和刷新,可以使用UIUtils.getTarget()获取原始对象提前进行新旧值的判断,当两者相同时不执行赋值。
typescript
@Entry
@ComponentV2
struct Index {
list: string[][] = [['a'], ['b'], ['c']];
@Local dataObjFromList: string[] = this.list[0];
@Monitor('dataObjFromList')
onStrChange(monitor: IMonitor) {
console.info('dataObjFromList has changed');
}
build() {
Column() {
Button('change to self').onClick(() => {
// 新值和本地初始化的值相同
this.dataObjFromList = this.list[0];
})
}
}
}
4、@Param:组件外部输入
@Param不仅可以接受组件外部输入,还可以接受@Local的同步变化。
@Param表示组件从外部传入的状态,使得父子组件之间的数据能够进行同步:
- @Param装饰的变量支持本地初始化,但不允许在组件内部直接修改。
- 被@Param装饰的变量能够在初始化自定义组件时从外部传入,当数据源也是状态变量时,数据源的修改会同步给@Param。
- @Param装饰的变量变化时,会刷新该变量关联的组件。
- @Param支持对基本类型(如number、boolean、string、Object、class)、内嵌类型(如Array、Set、Map、Date),以及null、undefined和联合类型进行观测。
- 对于复杂类型如类对象,@Param会接受数据源的引用。在组件内可以修改类对象中的属性,该修改会同步到数据源。
- @Param的观测能力仅限于被装饰的变量本身。
| @Param变量装饰器 | 说明 |
|---|---|
| 装饰器参数 | 无。 |
| 能否本地修改 | 否。若需要修改值,可使用@Param搭配@Once修改子组件的本地值。或通过@Event装饰器,修改@Param数据源的值。 |
| 同步类型 | 由父到子单向同步。 |
| 允许装饰的变量类型 | Object、class、string、number、boolean、enum等基本类型以及Array、Date、Map、Set等内嵌类型。支持null、undefined以及联合类型。 |
| 被装饰变量的初始值 | 允许本地初始化,若不在本地初始化,则需要和@Require装饰器一起使用,要求必须从外部传入初始化。 |
| 传递规则 | 说明 |
|---|---|
| 从父组件初始化 | @Param装饰的变量允许本地初始化,若无本地初始化则必须从外部传入初始化。当同时存在本地初始值与外部传入值时,优先使用外部传入值进行初始化。 |
| 初始化子组件 | @Param装饰的变量可以初始化子组件中@Param装饰的变量。 |
5、@Once:初始化同步一次
想要实现仅从外部初始化一次且不接受后续同步变化的能力,可以使用@Once装饰器搭配@Param装饰器。
@Once装饰器在变量初始化时接受外部传入值进行初始化,后续数据源更改不会同步给子组件:
- @Once必须搭配@Param使用,单独使用或搭配其他装饰器使用都是不允许的。
- @Once不影响@Param的观测能力,仅针对数据源的变化做拦截。
- @Once与@Param装饰变量的先后顺序不影响使用功能。
- @Once与@Param搭配使用时,可以在本地修改@Param变量的值。本质上是修改子组件内部维护的
@Param副本。这个修改不会触发父组件的重新渲染,也不会影响其他依赖该@Param变量的子组件。搭配使用可以解除@Param无法在本地修改的限制,并能够触发UI刷新。此时,使用@Param和@Once的效果类似于@Local,但@Param和@Once还能接收外部传入的初始值。
@Once装饰器作为辅助装饰器,本身没有装饰类型要求和变量观察能力。
6、@Event装饰器:规范组件输出
为了实现子组件向父组件要求更新@Param装饰变量的能力,开发者可以使用@Event装饰器。使用@Event装饰回调方法是一种规范,表明子组件需要传入更新数据源的回调。@Event主要配合@Param实现数据的双向同步。
由于@Param装饰的变量在本地无法更改,使用@Event装饰器装饰回调方法并调用,可以实现更新数据源的变量,再通过@Local的同步机制,将修改同步回@Param装饰的变量,以此达到主动更新@Param装饰变量的效果。
@Event用于装饰组件对外输出的方法:
- @Event装饰的回调方法中参数以及返回值由开发者决定。
- @Event装饰非回调类型的变量不会生效。当@Event没有初始化时,会自动生成一个空的函数作为默认回调。
- 当@Event未被外部初始化,但本地有默认值时,会使用本地默认的函数进行处理。
@Param标志着组件的输入,表明该变量受父组件影响,而@Event标志着组件的输出,可以通过该方法影响父组件。使用@Event装饰回调方法是一种规范,表明该回调作为自定义组件的输出。父组件需要判断是否提供对应方法用于子组件更改@Param变量的数据源。
| @Event属性装饰器 | 说明 |
|---|---|
| 装饰器参数 | 无。 |
| 允许装饰的变量类型 | 回调方法,例如()=>void、(x:number)=>boolean等。回调方法是否含有参数以及返回值由开发者决定。 |
| 允许传入的函数类型 | 箭头函数。 |
@Event只能用在@ComponentV2装饰的自定义组件中。当装饰非方法类型的变量时,不会有任何作用。
7、@Provider装饰器和@Consumer装饰器:跨组件层级双向同步
@Provider和@Consumer用于跨组件层级数据双向同步。
-
@Provider,即数据提供方,其所有的子组件都可以通过@Consumer绑定相同的key来获取@Provider提供的数据。
-
@Consumer,即数据消费方,可以通过绑定同样的key获取其最近父节点的@Provider的数据,当查找不到@Provider的数据时,使用本地默认值。
开发者在使用@Provider和@Consumer时要注意:
- @Provider和@Consumer强依赖自定义组件层级,@Consumer会因为所在组件的父组件不同,而被初始化为不同的值。
- @Provider和@Consumer相当于把组件粘合在一起了,从组件独立角度考虑,应减少使用@Provider和@Consumer。
| 能力 | V2装饰器@Provider和@Consumer | V1装饰器@Provide和@Consume |
|---|---|---|
| @Consume® | 必须本地初始化,当找不到@Provider时使用本地默认值。 | API version 20以前,@Consume禁止本地初始化,当找不到对应@Provide的时候,会抛出异常;从API version 20开始,@Consume支持设置默认值,如果没有设置默认值,且找不到对应@Provide时,会抛出异常。 |
| 支持类型 | 支持function。 | 不支持function。 |
| 观察能力 | 仅能观察自身赋值变化,如果要观察嵌套场景,配合@Trace一起使用。 | 观察第一层变化,如果要观察嵌套场景,配合@Observed和@ObjectLink一起使用。 |
| alias和属性名 | alias是唯一匹配的key,缺省时默认属性名为alias。 | alias和属性名都为key,优先匹配alias,匹配不到可以匹配属性名。 |
| @Provide® 从父组件初始化 | 不允许。 | 允许。 |
| @Provide®支持重载 | 默认开启,即@Provider可以重名,@Consumer向上查找最近的@Provider。 | 默认关闭,即在组件树上不允许有同名@Provide。如果需要重载,则需要配置allowOverride。 |
- @Provider(aliasName?: string) varName : varType = initValue
@Provider属性装饰器 说明 装饰器参数 aliasName?: string,别名,缺省时默认为属性名。 支持类型 自定义组件中成员变量。属性的类型可以为number、string、boolean、class、Array、Date、Map、Set等类型。支持装饰箭头函数。 从父组件初始化 禁止。 本地初始化 必须本地初始化。 观察能力 能力等同于@Trace。变化会同步给对应的@Consumer。
- @Consumer(aliasName?: string) varName : varType = initValue
@Consumer属性装饰器 说明 装饰器参数 aliasName?: string,别名,缺省时默认为属性名,向上查找最近的@Provider。 可装饰的变量 自定义组件中成员变量。属性的类型可以为number、string、boolean、class、Array、Date、Map、Set等类型。支持装饰箭头函数。 从父组件初始化 禁止。 本地初始化 必须本地初始化。 观察能力 能力等同于@Trace。变化会同步给对应的@Provider。
- aliasName和属性名
@Provider和@Consumer接受可选参数aliasName,没有配置参数时,使用属性名作为默认的aliasName。
typescript
@ComponentV2
struct Parent {
// 未定义aliasName, 使用属性名'str'作为aliasName
@Provider() str: string = 'hello';
}
@ComponentV2
struct Child {
// 定义aliasName为'str',使用aliasName去寻找
// 能够在Parent组件上找到, 使用@Provider的值'hello'
@Consumer('str') str: string = 'world';
}
8、@Monitor装饰器:状态变量修改监听
为了增强状态管理框架对状态变量变化的监听能力,开发者可以使用@Monitor装饰器对状态变量进行监听。
- @Monitor装饰器支持在类中与@ObservedV2、@Trace配合使用,不允许在未被@ObservedV2装饰的类中使用@Monitor装饰器。未被@Trace装饰的属性无法被@Monitor监听到变化。
- 当观测的属性变化时,@Monitor装饰器定义的回调方法将被调用。判断属性是否变化使用的是严格相等(===),当严格相等判断的结果是false的情况下,就会触发回调。当在一次事件中多次改变同一个属性时,将会使用初始值和最终值进行比较以判断是否变化。
- 单个@Monitor装饰器能够同时监听多个属性的变化,当这些属性在一次事件中共同变化时,只会触发一次@Monitor的回调方法。
- @Monitor装饰器具有深度监听的能力,能够监听嵌套类、多维数组、对象数组中指定项的变化。对于嵌套类、对象数组中成员属性变化的监听要求该类被@ObservedV2装饰且该属性被@Trace装饰。
- 当@Monitor监听整个数组时,更改数组的某一项不会被监听到。无法监听内置类型(Array、Map、Date、Set)的API调用引起的变化。
- 在继承类场景中,可以在父子组件中对同一个属性分别定义@Monitor进行监听,当属性变化时,父子组件中定义的@Monitor回调均会被调用。
- 和@Watch装饰器类似,开发者需要自己定义回调函数,区别在于@Watch装饰器将函数名作为参数,而@Monitor直接装饰回调函数。@Monitor与@Watch的对比可以查看@Monitor与@Watch的对比。
现有状态管理V1版本无法实现对对象、数组中某一单个属性或数组项变化的监听,且无法获取变化之前的值。在业务逻辑更加复杂的场景下,无法准确知道是哪一个属性或元素发生了改变从而触发了@Watch事件,这不便于开发者对变量的更改进行准确监听。因此推出@Monitor装饰器实现对对象、数组中某一单个属性或数组项变化的监听,并且能够获取到变化之前的值。
| @Monitor属性装饰器 | 说明 |
|---|---|
| 装饰器参数 | 字符串类型的对象属性名。可同时监听多个对象属性,每个属性以逗号隔开,例如@Monitor('prop1', 'prop2')。可监听深层的属性变化,如多维数组中的某一个元素,嵌套对象或对象数组中的某一个属性。 |
| 装饰对象 | @Monitor装饰成员方法。当监听的属性发生变化时,会触发该回调方法。该回调方法以IMonitor类型的变量作为参数,开发者可以从该参数中获取变化前后的相关信息。 |
@Monitor支持对数组中的项进行监听,包括多维数组,对象数组。@Monitor无法监听内置类型(Array、Map、Date、Set)的API调用引起的变化。当@Monitor监听数组整体时,只能观测到数组整体的赋值。可以通过监听数组的长度变化来判断数组是否有插入、删除等变化。当前仅支持使用"."的方式表达深层属性、数组项的监听。
对象整体改变,但监听的属性不变时,不触发@Monitor回调。
在一次事件中多次改变被@Monitor监听的属性,以最后一次修改为准。
@Monitor的参数需要为监听属性名的字符串,仅可以使用字符串字面量、const常量、enum枚举值作为参数。**如果使用变量作为参数,仅会监听@Monitor初始化时,变量值所对应的属性。**当更改变量时,@Monitor无法实时改变监听的属性,即@Monitor监听的目标属性从初始化时便已经确定,无法动态更改。不建议开发者使用变量作为@Monitor的参数进行初始化。
| @Watch | @Monitor | |
|---|---|---|
| 参数 | 回调方法名。 | 监听状态变量名、属性名。 |
| 监听目标数 | 只能监听单个状态变量。 | 能同时监听多个状态变量。 |
| 监听能力 | 跟随状态变量观察能力(一层)。 | 跟随状态变量观察能力(深层)。 |
| 能否获取变化前的值 | 不能获取变化前的值。 | 能获取变化前的值。 |
| 监听条件 | 监听对象为状态变量。 | 监听对象为状态变量或为@Trace装饰的类成员属性。 |
| 使用限制 | 仅能在@Component装饰的自定义组件中使用。 | 能在@ComponentV2装饰的自定义组件中使用,也能在@ObservedV2装饰的类中使用。 |
9、@Computed装饰器:计算属性
当开发者使用相同的计算逻辑重复绑定在UI上时,为了防止重复计算,可以使用@Computed计算属性。计算属性中的依赖的状态变量变化时,只会计算一次。这解决了UI多次重用该属性导致的重复计算和性能问题。
typescript
@Computed
get sum() {
return this.count1 + this.count2 + this.count3;
}
Text(`${this.count1 + this.count2 + this.count3}`) // 计算this.count1 + this.count2 + this.count3
Text(`${this.count1 + this.count2 + this.count3}`) // 重复计算this.count1 + this.count2 + this.count3
Text(`${this.sum}`) // 读取@Computed sum的缓存值,节省上述重复计算
Text(`${this.sum}`) // 读取@Computed sum的缓存值,节省上述重复计算
@Computed为方法装饰器,装饰getter方法。@Computed会检测被计算的属性变化,当被计算的属性变化时,@Computed只会被求解一次。不推荐在@Computed中修改变量,错误的使用会导致数据无法被追踪或appfreeze等问题,详情见使用限制。
但需要注意,对于简单计算,不建议使用计算属性,因为计算属性本身也有开销。对于复杂的计算,@Computed能带来性能收益。
@Computed为方法装饰器,装饰getter方法。@Computed会检测被计算的属性变化,当被计算的属性变化时,@Computed只会被求解一次。
| @Computed方法装饰器 | 说明 |
|---|---|
| 支持类型 | getter访问器。 |
| 从父组件初始化 | 禁止。 |
| 可初始化子组件 | @Param。 |
| 被执行的时机 | @ComponentV2中的@Computed会在自定义组件创建的时候初始化,触发@Computed计算。@ObservedV2装饰的类中的@Computed,会在@ObservedV2装饰的类实例创建后,异步初始化,触发@Computed计算。在@Computed中计算的状态变量被改变时,计算属性会重新计算。 |
| 是否允许赋值 | @Computed装饰的属性是只读的,不允许赋值。 |
- @Computed装饰的方法只有在初始化,或者其被计算的状态变量改变时,才会发生重新计算。不建议开发者在@Computed装饰的getter方法中做除获取数据外其余的逻辑操作。
typescript@Entry @ComponentV2 struct Page { @Local firstName: string = 'Hua'; @Local lastName: string = 'Li'; @Local showFullNameRequestCount: number = 0; private fullNameRequestCount: number = 0; @Computed get fullName() { console.info('fullName'); // 不推荐在@Computed的计算中做赋值逻辑,因为@Computed本质是一个getter访问器,用来节约重复计算 // 在这个例子中,fullNameRequestCount仅代表@Computed计算次数,不能代表fullName被访问的次数 this.fullNameRequestCount++; return this.firstName + ' ' + this.lastName; } build() { Column() { Text(`${this.fullName}`) // 获取一次fullName Text(`${this.fullName}`) // 获取一次fullName,累计获取两次fullName,但是fullName不会重新计算,读取缓存值 // 点击Button,获取fullNameRequestCount次数 Text(`count ${this.showFullNameRequestCount}`) Button('get fullName').onClick(() => { // 点击后输出 1 this.showFullNameRequestCount = this.fullNameRequestCount; }) } } }
- 在@Computed装饰的getter方法中,不能改变参与计算的属性,以防止重复执行计算属性导致的appfreeze。
- @Computed不能和双向绑定!!连用,@Computed装饰的是getter访问器,不会被子组件同步,也不能被赋值。
- 只有被观察到的变化才会触发@Computed fullName重新计算。
10、@Type装饰器:标记类属性的类型
用于在序列化和反序列化过程中提供类型信息。当你要持久化的对象包含了自定义类的属性时,Type 装饰器是必不可少的。
@Type的目的是标记类属性,配合PersistenceV2使用,防止序列化时类丢失,便于类的反序列化。
| @Type装饰器 | 说明 |
|---|---|
| 装饰器参数 | type:类型。 |
| 可装饰的类型 | Object class以及Array、Date、Map、Set等内嵌类型。 |
- 不支持collections.Set、collections.Map等类型。
- 不支持非built-in类型。如PixelMap、NativePointer、ArrayList等Native类型。
- 不支持简单类型。如string、number、boolean等。
- 不支持构造函数含参的类。
11、@ReusableV2装饰器:组件复用
为了降低反复创建销毁自定义组件带来的性能开销,开发者可以使用@ReusableV2装饰@ComponentV2装饰的自定义组件,达成组件复用的效果。
- @ReusableV2同样提供了aboutToRecycle和aboutToReuse的生命周期,在组件被回收时调用aboutToRecycle,在组件被复用时调用aboutToReuse,但与@Reusable不同的是,aboutToReuse没有入参。
- 在回收阶段,会递归地调用所有子组件的aboutToRecycle回调;在复用阶段,会递归地调用所有子组件的aboutToReuse回调。
- @ReusableV2装饰的自定义组件会在被回收期间保持冻结状态,即无法触发UI刷新、无法触发@Monitor回调,与freezeWhenInactive标记位不同的是,在解除冻结状态后,不会触发延后的刷新。
- @ReusableV2装饰的自定义组件会在复用时自动重置组件内状态变量的值、重新计算组件内@Computed以及与之相关的@Monitor。不建议开发者在aboutToRecycle中更改组件内状态变量。
| @ReusableV2装饰器 | 说明 |
|---|---|
| 装饰器参数 | 无 |
| 可装饰的组件 | @ComponentV2装饰的自定义组件 |
| 装饰器作用 | 表明该组件可被复用 |
typescript
@ReusableV2 // 装饰ComponentV2的自定义组件
@ComponentV2
struct ReusableV2Component {
@Local message: string = 'Hello World';
build () {
Column() {
Text(this.message)
}
}
}
- 下面的例子中使用了ForEach组件渲染了数个可复用组件,由于每次点击点击修改按钮时key值都会发生变化,因此从第二次点击开始都会触发回收与复用(由于ForEach先判断有无可复用节点时复用池仍未初始化,因此第一次点击会创建新的节点,而后初始化复用池同时回收节点)。
typescript@Entry @ComponentV2 struct Index { @Local simpleList: number[] = [0, 1, 2, 3, 4, 5]; build() { Column() { ForEach(this.simpleList, (num: number, index) => { Row() { Button('点击修改').onClick(()=>{this.simpleList[index]++;}) ReusableV2Component({ num: num }) } }) // 每次修改完key发生变化 } } } @ReusableV2 @ComponentV2 struct ReusableV2Component { @Require @Param num: number; aboutToAppear() { console.info('ReusableV2Component aboutToAppear', this.num); // 创建时触发 } aboutToRecycle() { console.info('ReusableV2Component aboutToRecycle', this.num); // 回收时触发 } aboutToReuse() { console.info('ReusableV2Component aboutToReuse', this.num); // 复用时触发 } build() { Column() { Text(`child: ${this.num}`) } } } // 日志: 11-18 20:03:55.621 3384-13100 A03d00/JSAPP I ReusableV2Component aboutToAppear 0 11-18 20:03:55.621 3384-13100 A03d00/JSAPP I ReusableV2Component aboutToAppear 1 11-18 20:03:55.621 3384-13100 A03d00/JSAPP I ReusableV2Component aboutToAppear 2 11-18 20:03:55.622 3384-13100 A03d00/JSAPP I ReusableV2Component aboutToAppear 3 11-18 20:03:55.622 3384-13100 A03d00/JSAPP I ReusableV2Component aboutToAppear 4 11-18 20:03:55.622 3384-13100 A03d00/JSAPP I ReusableV2Component aboutToAppear 5 11-18 20:06:17.586 3384-13100 A03d00/JSAPP I ReusableV2Component aboutToRecycle 0 11-18 20:06:17.586 3384-13100 A03d00/JSAPP I ReusableV2Component aboutToAppear 1 11-18 20:06:39.778 3384-13100 A03d00/JSAPP I ReusableV2Component aboutToRecycle 1 11-18 20:06:39.778 3384-13100 A03d00/JSAPP I ReusableV2Component aboutToReuse 2
12、AppStorageV2: 应用全局UI状态存储
AppStorageV2是提供状态变量在应用级全局共享的能力,开发者可以通过connect绑定同一个key,进行跨ability的数据共享。
AppStorageV2是在应用UI启动时会被创建的单例。它的目的是为了提供应用状态数据的中心存储,这些状态数据在应用级别都是可访问的。AppStorageV2将在应用运行过程保留其数据。数据通过唯一的键字符串值访问。需要注意的是,AppStorage与AppStorageV2之间的数据互不共享。
AppStorageV2可以修改connect的返回值,实现与UI组件的同步。AppStorageV2支持应用的主线程内多个UIAbility实例间的状态共享。
- connect:创建或获取存储的数据。
1、若未指定key,使用第二个参数作为默认构造器;否则使用第三个参数作为默认构造器(第二个参数非法也使用第三个参数作为默认构造器)。
2、确保数据已经存储在AppStorageV2中,可省略默认构造器,获取存储的数据;否则必须指定默认构造器,不指定将导致应用异常。
3、同一个key,connect不同类型的数据会导致应用异常,应用需要确保类型匹配。
4、key建议使用有意义的值,可由字母、数字、下划线组成,长度不超过255,使用非法字符或空字符的行为是未定义的。
5、关联@Observed对象时,由于该类型的name属性未定义,需要指定key或者自定义name属性。
remove:删除指定key的存储数据。
keys:返回所有AppStorageV2中的key。
限制:
1、只支持class类型。
2、需要配合UI使用(UI线程),不能在其他线程使用,如不支持@Sendable。
3、不支持collections.Set、collections.Map等类型。
4、不支持非built-in类型,如PixelMap、NativePointer、ArrayList等Native类型。
5、不支持存储基本类型,如string、number、boolean等。注意:不支持存储基本类型意味着connect接口传入的类型不能是基本类型,但connect传入的class中可以包含基本类型。
13、PersistenceV2: 持久化存储UI状态
PersistenceV2是应用程序中的可选单例对象。此对象的作用是持久化存储UI相关的数据,以确保这些属性在应用程序重新启动时的值与应用程序关闭时的值相同。
PersistenceV2提供状态变量持久化能力,开发者可以通过connect或者globalConnect绑定同一个key,在状态变量变化和应用冷启动时,实现持久化能力。
PersistenceV2是在应用UI启动时会被创建的单例。它的目的是提供应用状态数据的中心存储,这些状态数据在应用级别都是可访问的。数据通过唯一的键值字符串访问。不同于AppStorageV2,PersistenceV2还将最新数据存储在设备磁盘上(持久化)。这意味着,应用退出再次启动后,依然能保存选定的结果。
对于与PersistenceV2关联的@ObservedV2对象,该对象的@Trace属性的变化,会触发整个关联对象的自动持久化;非@Trace属性的变化则不会,如有必要,可调用PersistenceV2 API手动持久化。请注意:被PersistenceV2持久化的类属性必须要有初值,否则不支持持久化。
- connect:创建或获取存储的数据。
1、关联@Observed对象时,由于该类型的name属性未定义,需要指定key或者自定义name属性。
2、数据存储路径为module级别,即哪个module调用了connect,数据副本存入对应module的持久化文件中。如果多个module使用相同的key,则数据为最先使用connect的module,并且PersistenceV2中的数据也会存入最先使用connect的module里。
3、因为存储路径在应用第一个ability启动时就已确定,为该ability所属的module。如果一个ability调用了connect,并且该ability能被不同的module拉起, 那么ability存在多少种启动方式,就会有多少份数据副本。
- globalConnect:创建或获取存储的数据。
- remove:删除指定key的存储数据。删除PersistenceV2中不存在的key会报警告。
- keys:返回所有PersistenceV2中的key。包括module级别存储路径和应用级别存储路径中的所有key。
- save:手动持久化数据。
- notifyOnError:响应序列化或反序列化失败的回调。将数据存入磁盘时,需要对数据进行序列化;当某个key序列化失败时,错误是不可预知的;可调用该接口捕获异常。
1、需要配合UI使用(UI线程),不能在其他线程使用,如不支持@Sendable。
2、不支持collections.Set、collections.Map等类型。
3、不支持非built-in类型,如PixelMap、NativePointer、ArrayList等Native类型。
4、单个key支持数据大小约8k,过大会导致持久化失败。
5、持久化的数据必须是class对象,不支持容器类型(如Array、Set、Map),不支持built-in的构造对象(如Date、Number),不支持持久化基本类型(如string、number、boolean)。如果需要持久化非class对象,建议使用Preferences进行数据持久化。
6、只有@Trace的数据改变会触发自动持久化,如V1状态变量、@Observed对象、普通数据的改变不会触发持久化。