自学内容网 自学内容网

HarmonyOS 状态管理(一)

1. HarmonyOS 状态管理

1.1. 说明

  官方文档(https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-state-management-V5)
在这里插入图片描述

1.1.1. 状态管理(V1稳定版)

  状态管理(V1稳定版)提供了多种装饰器,用于在组件级别管理状态 。这些装饰器包括:
  @State:用于声明组件的状态变量,可以作为其子组件的单向和双向同步数据源 。
  @Prop:用于建立组件与父组件的单向数据同步关系 。
  @Link:用于建立组件与父组件的双向数据同步关系 。
  @Observed:用于观察多层嵌套的变化。
  @ObjectLink:用于观察嵌套的数据变化,并与父组件的数据源建立双向同步。
  @Provide和**@Consume**:用于跨组件层级同步状态变量 。
  @Watch:用于监听状态变量的变化 。
  这些装饰器主要用于在组件内部管理状态变量,并通过不同的同步方式(单向、双向)与父组件或其他组件进行数据交换。

1.1.2. 状态管理(V2试用版)

  状态管理(V2试用版)在V1版本的基础上进行了增强,主要特点包括:
(1)深度观察:状态变量独立于UI,更改数据会触发相应视图的更新。
(2)对象深度观测:支持对象的深度观测和深度监听。
(3)属性级更新:支持对象中属性级精准更新及数组中元素的最小化更新 。
(4)装饰器易用性高:装饰器间配合使用更灵活,有利于组件化 。
(5)状态管理(V2试用版)引入了一些新的装饰器,如:
  @ObservedV2:用于装饰class,使得被装饰的class具有深度监听的能力。
  @Trace:用于装饰被@ObservedV2装饰的class中的属性,使得属性具有深度观测的能力 。
  @ComponentV2:用于装饰struct,支持新的装饰器,如@Local、@Param、@Once、@Event、@Monitor、@Provider、@Consumer等 。

1.1.3. 关系总结

  虽然两者不能混合使用,但V2版本在V1版本的基础上进行了扩展和优化,为开发者提供了更强大的状态管理能力。
  状态管理(V1稳定版)和状态管理(V2试用版)在功能上有以下关系:

1.1.3.1. V1版本

(1)状态变量不能独立于UI,需要通过UI组件来同步更新 。
(2)支持多层嵌套的状态变化,但观测性能有限。
(3)提供了多种装饰器用于组件级别的状态管理和双向数据同步 。

1.1.3.2. V2版本

(1)状态变量独立于UI,支持深度观测和深度监听 。
(2)提供了更灵活的装饰器,支持对象级的精准更新和数组元素的最小化更新。
(3)增强了观测性能和装饰器的易用性,更有利于组件化开发。

1.2. 状态管理(V1稳定版)组件间数据共享

1.2.1. 共享方向:父到子

  @Prop 作用:@Prop从父组件接收数据,组件间数据共享。

@Entry
@Component
struct PropPage {
  //共享方向:父到子, @Prop只能用于子组件获取父组件的数据,无法同步
  @State num: number = 0
  build() {
    Column() {
      //第一个num为子组件中的变量名,第二个num为父组件中的变量名
      PropComponent({ num: this.num })
      Button("父组件+1").onClick(() => {
        this.num++
      })
    }.width("100%")
  }
}

@Component
struct PropComponent {
  //这里的变量名必须与父组件传值中冒号前的变量名一致
  @Prop num: number
  build() {
    Text("子组件:"+this.num.toString())
      .margin({top:30,bottom:20})
  }
}

在这里插入图片描述

1.2.2. 共享方向:双向

  @Provide与@Consume 作用:@Provide作为数据的提供方,可以更新其子孙节点的数据;@Consume接收@Provide的数据

@Entry
@Component
struct ProvidePage {
  //@Provide配合@Consume可以同步父组件与子孙组件之间的数据,优点是不用传参
  @Provide count: number = 1

  build() {
    Column() {
      Text("父组件:"+this.count )
      //调用子组件时不用传递数据
      ConsumeComponent()
    }
    .width('100%')
    .alignItems(HorizontalAlign.Center)
    .padding(30)
  }
}

//子组件
@Component
struct ConsumeComponent {
  //变量名要跟@Provide一样
  @Consume count: number
  build() {
    Column() {
      Text("子组件"+this.count.toString())
      //点击+1
      Text("子组件点击+1").onClick(() => {
        this.count++
      })
    }
  }
}

在这里插入图片描述

1.2.3. 共享方向:双向

  @Provide与@Consume 作用:@Provide作为数据的提供方,可以更新其子孙节点的数据;@Consume接收@Provide的数据

@Entry
@Component
struct LinkPage {
  //@Link 作用:将数据与父组件的数据共享
  // 共享方向:双向
  @State count: number = 1
  build() {
    Column() {
      Text("父组件中的count:" + this.count.toString())
      //第一个count为在子组件中的变量名,第二个count为在父组件中的变量名
      LinkComponent({ count: $count })
    }.width("100%")
  }
}
//子组件
@Component
struct LinkComponent {
  //变量名要跟父组件传值中冒号前的变量名一致
  @Link count: number

  build() {
    Column() {
      Text("子组件中的count:" +
      this.count.toString())
      //点击+1
      Text("子组件点击+1").onClick(() => {
        this.count++
      })
    }
  }
}

在这里插入图片描述

1.2.4. 共享方向:双向

  @Provide与@Consume 作用:@Provide作为数据的提供方,可以更新其子孙节点的数据;@Consume接收@Provide的数据

//@Observe用于类、对象、数组的声明
@Observed
class stu {
  public id: string
  name: string

  constructor(id: string, name: string) {
    this.id = id
    this.name = name
  }
}


@Entry
@Component
struct ObjectLinkPage {
  //@ObjectLink与@Observe
  // 作用:类、对象、数组类型数据的数据共享
  // 共享方向:双向
  @State me: stu = new stu("001", "张三")

  build() {
    Column() {
      Text("学号:" + this.me.id)
      Text("姓名:" +
      this.me.name)
      //第一个me为子组件中的变量名,第二个me为父组件中的变量名
      ObjectLinkComponent({ me: this.me })
    }.padding(20)
  }
}

@Component
struct ObjectLinkComponent {
  //变量名要与父组件传值中冒号前的变量名一致
  @ObjectLink me: stu

  build() {
    TextInput({ placeholder: "请输入学号" })
      .onChange((value) => {
        this.me.id = value
      })
  }
}

在这里插入图片描述

1.2.5. 总结

  @Prop只能用于子组件获取父组件的数据,无法同步
  @Link可以同步父子组件的数据
  @Provide配合@Consume可以同步父组件与子孙组件之间的数据,优点是不用传参,代码简单
  @ObjectLink配合@Observe可以同步父子组件的类、对象、数组类型的数据


原文地址:https://blog.csdn.net/qq_36158551/article/details/140602102

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!