鸿蒙ArkTS装饰器@State、@Observed和@ObjectLink详解
本文主要讲解关于鸿蒙ArkTS装饰器@State、@Observed和@ObjectLink详解相关内容,让我们来一起学习下吧!
@State装饰器:组件内状态
@State状态数据具有以下特征:
- 1、支持多种类型:允许class、number、boolean、string强类型的按值和按引用类型。允许这些强类型构成的数组,即Array、Array、Array、Array。不允许object和any。
- 2、支持多实例:组件不同实例的内部状态数据独立。
- 3、内部私有:标记为@State的属性是私有变量,只能在组件内访问。
- 4、需要本地初始化:必须为所有@State变量分配初始值,将变量保持未初始化可能导致框架行为未定义。
- 5、 创建自定义组件时支持通过状态变量名设置初始值:在创建组件实例时,可以通过变量名显式指定@State状态属性的初始值。
@State向@Link传参时,用**$**引用@State父组件变量的值,如:
ComponentA({ highScore: $highScore })
@State向@Prop传参时,用**this.**引用@State父组件变量的值,如:
ComponentA({ highScore: this.highScore })
@Observed
- @Observed应用于类,表示该类中的数据变更被UI页面管理,例如:
@Observed class ClassA {}
@ObjectLink
- @ObjectLink应用于被@Observed所装饰类的对象(变量),例如:
@ObjectLink a: ClassA
使用要求
- 1、@Observed 用于类,@ObjectLink 用于变量。
- 2、@ObjectLink装饰的变量类型必须为类(class type)。
- 3、类要被@Observed装饰器所装饰。
- 不支持简单类型参数,可以使用@Prop进行单向同步。
- 4、@ObjectLink装饰的对象变量是不可变的,但可以修改对象里面变量的值。
- 属性的改动是被允许的,当改动发生时,如果同一个对象被多个@ObjectLink变量所引用,那么所有拥有这些变量的自定义组件都会被通知去重新渲染。
- 5、@ObjectLink装饰的变量不可设置默认值。
- 必须让父组件中有一个由@State、@Link、@StorageLink、@Provide或@Consume所装饰变量参与的TS表达式进行初始化。
- 6、@ObjectLink装饰的变量是私有变量,只能在组件内访问。
代码示例:
@Observed class ClassA { public name : string; public c: number; constructor(c: number, name: string = '') { this.name = name; this.c = c; } } class ClassB { public a: ClassA; constructor(a: ClassA) { this.a = a; } } @Component struct ViewA { label : string = "ep1"; @ObjectLink a : ClassA; build() { Column() { Text(`ViewA [${this.label}]: a.c=${this.a.c}`) .fontSize(20) Button(`+1`) .width(100) .margin(2) .onClick(() => { this.a.c += 1; }) Button(`reset`) .width(100) .margin(2) .onClick(() => { this.a = new ClassA(0); // 错误:ObjectLink装饰的变量a是不可变的 }) } } } @Entry @Component struct ViewB { @State b : ClassB = new ClassB(new ClassA(10)); build() { Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center}) { ViewA({label: "ViewA #1", a: this.b.a}) ViewA({label: "ViewA #2", a: this.b.a}) Button(`ViewB: this.b.a.c += 1` ) .width(320) .margin(4) .onClick(() => { this.b.a.c += 1; }) Button(`ViewB: this.b.a = new ClassA(0)`) .width(240) .margin(4) .onClick(() => { this.b.a = new ClassA(0); }) Button(`ViewB: this.b = new ClassB(ClassA(0))`) .width(240) .margin(4) .onClick(() => { this.b = new ClassB(new ClassA(0)); }) } } }
以上就是关于鸿蒙ArkTS装饰器@State、@Observed和@ObjectLink详解相关的全部内容,希望对你有帮助。欢迎持续关注潘子夜个人博客(www.frpkj.com),学习愉快哦!