【鸿蒙实战开发】HarmonyOS状态管理之组件状态管理

组件的状态管理，首先什么是组件？

组件：（1）系统组件，ArkUI框架中默认内置的基础和容器组件，可直接被开发者调用， 比如Column、Text、Divider、Button等。

（2）自定义组件，可复用的UI单元，可组合其他组件，如被@Component装饰的 struct。

组件状态与组件之间的关系？

组件展示的UI内容由组件的状态变量来控制。状态变量在不同场景由不同的装饰器来修饰@State、@Prop、@Link、@Provider和@Consume、@Observed和@ObjectLink。

因为状态变量的存在所以页面由静态页面可以变成动态的、有交互的页面。

一、对于简单数据源的状态管理

@State组件内部双向同步数据源

@Component
export struct MyComponent {
  @State count: number = 0
  build() {
    Column() {
      Button(`当前count：${this.count}`).onClick(() => {
        this.count++
      })
    }.justifyContent(FlexAlign.Center)
    .width("100%")
    .height("100%")
  }
}

@State与@Prop父组件与子组件的单向同步

@Component
@Entry
export struct MyComponent {
  @State count: number = 0
  build() {
    Column() {
      Button(`当前count：${this.count}`).onClick(() => {
        this.count++
      })
      ChildComponent({count:this.count})
    }.justifyContent(FlexAlign.Center)
    .width("100%")
    .height("100%")
  }
}
@Component
export struct ChildComponent {
  @Prop count: number
  build() {
    Button(`当前count：${this.count}`).onClick(() => {
      this.count++
    }).margin(20)
  }
}

点击父组件中按钮，count加1，子组件的count也加1。

点击子组件中的按钮，子组件中count加1，父组件中count不变化。

@State与@Link父子组件双向同步

@Component
@Entry
export struct MyComponent {
  @State count: number = 0
  build() {
    Column() {
      Button(`当前count：${this.count}`).onClick(() => {
        this.count++
      })
      ChildComponent({ count: this.count })
    }.justifyContent(FlexAlign.Center)
    .width("100%")
    .height("100%")
  }
}
@Component
export struct ChildComponent {
  @Link count: number
  build() {
    Button(`当前count：${this.count}`).onClick(() => {
      this.count++
    }).margin(20)
  }
}

点击父组件中按钮，count加1，子组件的count也加1。

点击子组件中的按钮，子组件中count加1，父组件中count也加1。

@Provide和@Consume与后代组件双向同步

如果不是仅仅父子两层关系的组件，例如n层关系组件，n>=2,需要使用@Provide和@Consume装饰器来进行双向同步。

@Component
@Entry
export struct MyComponent {
  @Provide count: number = 0
  build() {
    Column() {
      Button(`当前count：${this.count}`).onClick(() => {
        this.count++
      })
      ChildComponent()
    }.justifyContent(FlexAlign.Center)
    .width("100%")
    .height("100%")
  }
}
@Component
export struct ChildComponent {
  build() {
    Column(){
      DescendentComponent()
    }
  }
}
@Component
export struct DescendentComponent {
  @Consume count: number
  build() {
    Column(){
      Button(`当前count：${this.count}`).onClick(() => {
        this.count++
      }).margin(20)
    }
  }
}

点击父组件按钮，count加1，子组件的子组件count也加1.

点击子组件的子组件的按钮，count加1，父组件count也加1.

二、对于复杂数据源的状态管理

以上都是简单的数据源，如果更为复杂的数据源例如二维数组，数组class，或者class的属性是class等，需要使用@Observed配合ObjectLink来实现双向数据同步。

@Observed观察二维数组的变化

@Observed
class MyArray extends Array<Number> {
  //自定义一个数组类，由@Observed装饰
}

@Component
@Entry
export struct MyComponent {
  //声明一个数组，元素为自己自定义的数组，来模拟二维数组
  @State list: Array<MyArray> = new Array()
  aboutToAppear(): void {
    //赋值
    let myArray = new MyArray()
    myArray.push(100)
    myArray.push(200)
    myArray.push(300)
    this.list.push(myArray)
  }

  build() {
    Column() {
      Text(`${this.list[0][0]}`)//显示自定义数组里的第一个元素
      MyCustomView({ myArray: this.list[0] })//将二维数组中的第一个数组传递给自定义组件
      Button("修改数据").onClick(()=>{
        this.list[0][0] = 500
      })
    }.justifyContent(FlexAlign.Center)
    .width("100%")
    .height("100%")
  }
}

@Component
struct MyCustomView {
  @ObjectLink myArray: MyArray//必须在在定义组件中才能使用@ObjectLink。
  build() {
    Text(`${this.myArray[0]}` )//显示自定义数组里的第一个元素
  }
}

当点击按钮时，第一个Text没有变化，第二个Text发生变化。

因为第二个Text在自定义组件中，并且变量由@ObjectLink修饰。

@Observed观察对象嵌套对象的变化

@Observed
class Student {
  name: string = ''

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

class Teacher {
  student: Student = new Student("张三")
}

@Component
@Entry
export struct ClassInClassView {
  @State teacher:Teacher = new Teacher()
  build() {
    Column() {
      StudentView({student:this.teacher.student})
      Button("修改数据").onClick(()=>{
        this.teacher.student.name = "李四"
      })
    }.justifyContent(FlexAlign.Center)
    .width("100%")
    .height("100%")
  }
}

@Component
struct StudentView {
  @ObjectLink student:Student
  build() {
    Text(this.student.name).fontSize(40)
  }
}

写在最后

●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
●点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
●关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
●更多鸿蒙最新技术知识点，请移步前往小编：https://gitee.com/