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 = 0build() {Column() {//第一个num为子组件中的变量名，第二个num为父组件中的变量名PropComponent({ num: this.num })Button("父组件+1").onClick(() => {this.num++})}.width("100%")}
}@Component
struct PropComponent {//这里的变量名必须与父组件传值中冒号前的变量名一致@Prop num: numberbuild() {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 = 1build() {Column() {Text("父组件："+this.count )//调用子组件时不用传递数据ConsumeComponent()}.width('100%').alignItems(HorizontalAlign.Center).padding(30)}
}//子组件
@Component
struct ConsumeComponent {//变量名要跟@Provide一样@Consume count: numberbuild() {Column() {Text("子组件"+this.count.toString())//点击+1Text("子组件点击+1").onClick(() => {this.count++})}}
}

在这里插入图片描述

1.2.3. 共享方向：双向

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

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

在这里插入图片描述

1.2.4. 共享方向：双向

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

//@Observe用于类、对象、数组的声明
@Observed
class stu {public id: stringname: stringconstructor(id: string, name: string) {this.id = idthis.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: stubuild() {TextInput({ placeholder: "请输入学号" }).onChange((value) => {this.me.id = value})}
}