状态管理
为了方便开发者管理组件状态,ArkTS
提供了一系列状态相关的装饰器,例如@State
,@Prop
,@Link
,@Provide
和@Consume
等等。
@State
@State
用于装饰当前组件的状态变量,@State
装饰的变量发生变化时会驱动当前组件
的视图刷新。
注意:@State
装饰的变量必须
进行本地初始化。
具体语法如下
@State count:number = 1;
案例
@Entry
@Component
struct StatePage {@State count: number = 1;build() {Column({ space: 50 }) {Row({ space: 10 }) {Text('@State').textStyle()//计数器Counter() {Text(this.count.toString()).textStyle()}.onInc(() => this.count++).onDec(() => this.count--)}.width('100%').backgroundColor("#CCE3CB").padding(10).borderRadius(20).justifyContent(FlexAlign.Center)}.height('100%').width('100%').justifyContent(FlexAlign.Center).backgroundColor(Color.White).padding(10)}
}@Extend(Text) function textStyle() {.fontSize(25).fontWeight(FontWeight.Bold)
}
@Prop
@Prop
也可用于装饰状态变量,@Prop
装饰的变量发生变化时也会驱动当前组件的视图刷新,除此之外,@Prop
装饰的变量还可以同步父组件中的状态变量,但只能单向同步
,也就是父组件的状态变化会自动同步到子组件,而子组件的变化不会同步到父组件。
注意:@Prop
装饰的变量不允许
本地初始化,只能通过父组件向子组件传参进行初始化。
具体语法如下
父组件
@Entry
@Component
struct Parent{@State count:number = 1;build(){Column(){Child({count:this.count});}}
}
子组件
@Component
export struct Child{@Prop count:number;build(){Text(this.count.toString());}
}
@Link
@Link
也可用于装饰状态变量,@Link
装饰的变量发生变化时也会驱动当前组件的视图刷新,除此之外,@Link
变量同样会同步父组件状态,并且能够双向同步
。也就是父组件的变化会同步到子组件,子组件的变化也会同步到父组件。
注意:@Link
装饰的变量不允许本地初始化,只能由父组件通过传参进行初始化,并且父组件必须使用$
变量名的方式传参,以表示传递的是变量的引用。
父组件
@Entry
@Component
struct Parent{@State count:number = 1;build(){Column(){Child({count:$count});}}
}
子组件
@Component
export struct Child{@Link count:number;build(){Text(this.count.toString());}
}
@Provide
和@Consume
@Provide
和@Consume
用于跨组件层级传递状态信息,其中@Provide
用于装饰祖先组件的状态变量,@Consume
用于装饰后代组件的状态变量。可以理解为祖先组件提供(Provide
)状态信息供后代组件消费(Consume
),并且祖先和后代的状态信息可以实现双向同步
。
注意:@Provide
装饰变量必须进行本地初始化
,而@Consume
装饰的变量不允许进行本地初始化
。另外,@Provide
和@Consume
装饰的变量不是通过父组件向子组件传参的方式进行绑定的,而是通过相同的变量名进行绑定的。
祖先组件
@Entry
@Component
struct GrandParent {@Provide count: number = 1;build() {Column() {Parent()}}
}
父组件
@Component
struct Parent {build() {Column() {Child()}}
}
子组件
@Component
struct Child {@Consume count:number;build() {Column() {Text(this.count.toString());}}
}
除了通过变量名进行绑定,还可通过变量的别名
进行绑定,具体语法如下
祖先组件
@Entry
@Component
struct GrandParent {@Provide('count') parentCount: number = 1;build() {Column() {Parent()}}
}
父组件
@Component
struct Parent {build() {Column() {Child()}}
}
子组件
@Component
struct Child {@Consume('count') childCount:number;build() {Column() {Text(this.count.toString());}}
}