鸿蒙 OS-05 状态管理
声明式 UI
状态驱动UI 渲染
-
@State装饰器:组件内状态, @State totalTask: number = 0;
-
@Prop装饰器:父子单向同步,使用值传递 this.totalTask .支持
-
@Link装饰器:父子双向同步,使用引用传递 $totalTask
-
@Provider @Consume 双向同步, 跨组件传递。不需要手写传递,同样的名称变量就好。1:N Provider/Consume
-
@Observed装饰器和@ObjectLink装饰器:嵌套类对象属性变化。需要传递。this.p
less@Observed class Person //class 属性可被观察 @Component //子组件订阅,属性变化。 struct ViewA { @ObjectLink p:Person }
父子 对比 prop link provider
@State装饰器:组件内状态
- 允许装饰的变量类型: Object、class、string、number、boolean、enum类型,以及这些类型的数组。嵌套类型的场景请参考观察变化。 类型必须被指定。
不支持any,嵌套类型、 数组中的对象属性无法触发。不允许使用undefined和null。 数组:增删、对象被覆盖引用变化 才会刷新视图。
- 必须本地初始化。
官网:developer.harmonyos.com/cn/docs/doc...
demo:s
@Prop装饰器:父子单向同步
developer.harmonyos.com/cn/docs/doc...
@Link装饰器:父子双向同步
developer.harmonyos.com/cn/docs/doc...
@Provider @Consume 跨组件传递。
TypeScript
//父
@Entry
@Component
struct PropPage {
// 统计信息
@Provide stat: StatInfo = new StatInfo()
...}}
//son 1
@Component
struct TaskStatistics {
@Consume stat: StatInfo
//son 2
@Component
struct TaskList {
// 总任务数量
@Consume stat: StatInfo
@Observed装饰器和@ObjectLink装饰器:嵌套类对象属性变化
developer.harmonyos.com/cn/docs/doc...
- 被@Observed装饰的类,可以被观察到属性的变化;
- 子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例
@Observed class Person //class 属性可被观察
@Component //子组件订阅,属性变化。 struct ViewA { @ObjectLink p:Person }