HarmonyOS学习-状态管理

140 阅读2分钟

注意:随着API版本更新,语法可能略有差异,以官方文档为准 HarmonyOS NEXT Release版本API 12

状态管理

在声明式UI中,是以状态驱动视图更新:

image.png

  • 状态(State):指驱动视图更新的数据(被装饰器标记的变量)
  • 视图(View):基于UI描述渲染得到用户界面

说明

  • @State 装饰器标记的变量必须初始化,不能为空值
  • @State 支持Object、class、string、number、boolean、enum类型以及这些类型的数组
  • 不是状态变量的所有更改都会引起刷新,只有可以被框架观察到的修改才会引起UI刷新

嵌套类型以及数组中的对象类型无法触发视图更新

  1. boolean、string、number类型时,可以观察到数值的变化
  2. class或者object时,可观察自身被赋值的变化,第一层属性赋值的变化,即object.keys(observedObject)返回的属性。

@Prop - 单向同步

@Prop 装饰的变量可以和父组件建立单向的同步关系

@Prop 装饰的变量是可变的,但是变化不会同步回其父组件

允许装饰的变量类型:

  • @Prop只支持string、number、boolean、enum类型
  • 父组件对象类型,子组件是对象属性
  • 不可以是数组、any

image.png

@Link - 双向同步

使用 @Link 可以实现父组件和子组件的双向同步

允许装饰的变量类型:

  • 父子类型一致:string、number、boolean、enum、object、class,以及他们的数组
  • 数组中元素增、删、替换会引起刷新
  • 嵌套类型以及数组中的对象属性无法触发视图更新

使用步骤:

  1. 将父组件的状态属性传递给子组件
  2. 子组件通过 @Link 修饰接收

注意:子组件无默认值

image.png

@Provide、@Consume 跨级传递

将数据传递给后代,和后代的数据进行双向同步

使用步骤:

  1. 将父组件的状态属性使用 @Provide 修饰
  2. 子组件通过 @Consume 修饰
  3. 无需传递参数,保持命名一致即可

image.png

@Observed & @ObjectLink 嵌套对象数组 属性变化

说明:装饰器仅能观察到第一层的变化。对于多层嵌套的复杂情况,比如对象数组等。他们的第二层属性变化是无法观察到的。这就引出了 @Observed 和 @ObjectLink 装饰器

作用:用于在涉及嵌套对象或数组的场景中进行双向数据同步

注意:@ObjectLink 修饰符不能用在 @Entry 修饰的组件中

使用步骤

  1. @Observed 修饰符用于需要被观察的 class 上
  2. 子组件用 @ObjectLink 修饰符接收