HarmonyOS 鸿蒙Next基础（四）- HarmonyOS ArkTs 组件状态

HarmonyOS 鸿蒙Next基础（四）- HarmonyOS ArkTs 组件状态 概述：

ArkTS作为一种声明式UI，它特点是状态驱动UI更新。界面交互或者有外部事件触发状态改变，状态变化组件就触发更新。

ArKTS提供了多种装饰器来修饰变量，使用装饰器修饰的变量称状态变量

前4个是组件内状态修饰符。最后一个是实际开发中，应用会根据需要封装数据。如何需要观察嵌套类对象属性变化，需要使用@Observed和@ObjectLink装饰器，这两个会做单独章节记录。因为前面4个装饰器只能观察到对象的第一层属性变化。下面详细介绍。

当状态改变，需要对状态进行监听做一些响应的操作是，可以使用@Watch装饰器来修饰状态。跟Vue的Watch监听很像。后面文章会详细介绍。

@State修饰符：组件内的状态

使用@State装饰器定义的变量，当其状态改变时，会引起相关组件的渲染刷新。

案例

[@Entry](/user/Entry)
@Component
struct Index {
  [@State](/user/State) message: string = 'Hello World'
 
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
        Button("点击")
          .type(ButtonType.Capsule)
          .width(120)
          .margin({
            top: '60vp'
          })
          .onClick(event => {
            this.message = "Hello HarmonyOS";
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

可以看到当我们点击Button时候，@State定义的变量message从新定义为Hello HarmonyOS，并且UI也跟新了，类似React的useState()或Vue3的ref()和reactive()。

@Prop修饰符: 父子单向同步

Prop是组件和父组件建立通行的方式。当父组件的@State修饰符定义的变量可以传递给我子组件，并在子组件内的@Prop接收。这里如果是学过Vue的前端小伙伴很容易理解。

特点：

1. 单向数据流；
2. 定义不用默认赋值；
3. 父子组件定义类型必须相同；
4. 子组件允许修改，但不会同步回父组件；
5. 父子组件同时修改，父组件值覆盖子组件值；

注：@Prop装饰器不能在@Entry装饰的自定义组件中使用。

案例：

父组件：

import ComponentA from '../view/ComponentA'
[@Entry](/user/Entry)
@Component
struct Index {
  [@State](/user/State) message: string = 'Hello World'
  [@State](/user/State) describe: string = "你好，世界";
  build() {
    Row() {
      Column() {
        ComponentA({
          message: this.message,
          describe: this.describe
        })
        Button("点击")
          .type(ButtonType.Capsule)
          .width(120)
          .margin({
            top: '60vp'
          })
          .onClick(event => {
            this.message = "Hello HarmonyOS";
            this.describe = "你好，鸿蒙";
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

子组件：

@Component
export default struct ComponentA {
  [@Prop](/user/Prop) message: string;
  [@Prop](/user/Prop) describe: string;
  build(){
    Column(){
      Text(this.message)
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
      Text(this.describe)
        .fontSize(25)
        .fontColor(Color.Orange)
    }
  }
}

定义一个ComponentA的子组件，并在父组件中把message和describe两个变量传递进去。点击按钮改变变量内容。子组件接收到父组件@State变量的变化，并更新UI。

@Link修饰符：父子双向同步

@Link修饰的变量与父组件中对应的数据源建立双向数据绑定。就是不光父组件修改后，子组件跟着变化，子组件修改后，父组件也会同步跟着变化。

注意：@Link只能父子组件之间相互传递，不能跨组件。子组件在定义@Link装饰器变量接收时候，不能初始化。而且@Link装饰器不能在@Entry装饰的自定义组件中使用。

案例：

父组件：

Column() {
        Text(this.message)
          .fontSize(40)
          .fontWeight(FontWeight.Bold)
        Text(this.cnMsg)
          .fontSize(25)
          .fontColor(Color.Orange)
        Button("PageAButton")
          .type(ButtonType.Capsule)
          .width(120)
          .margin({
            top: '20vp'
          })
          .onClick(event => {
            this.message = "Hello HarmonyOS";
            this.cnMsg = "你好，鸿蒙";
          })
        componentB({
          message: $message,
          cnMsg: $cnMsg
        })
      }
      .width('100%')

子组件：

@Component
export default struct ComponentB {
  [@Link](/user/Link) message: string;
  [@Link](/user/Link) cnMsg: string;
  build(){
    Column(){
      Button("ComponentB")
        .type(ButtonType.Capsule)
        .width(120)
        .margin({
          top: '6vp'
        })
        .onClick(event => {
          this.message = 'be way ahead';
          this.cnMsg = "遥遥领先";
        })
    }
  }
}

先定义@State定义两个变量，并传递给子组件componentB。在componentB种我们使用@Link去接手这两个变量。这里注意我们传递给我componentB的时候，使用$符号，不能使用this。在父组件里我们点击按钮。文字变成"你好，鸿蒙"。在点击子组件时文字变成了"遥遥领先"。

@Provide装饰器和@Consume装饰器：与后代组件上向同步

@Proviede和@Comsume相较于前面的@Link跟进一步，可以父子，父孙（重孙…）的之间的数据双向同步能力。更准确讲就是可以在多个层阶之间传递的能力。

注意：

• @Provide定义在祖先节点上，@Consume定义在后代组件上。它俩是双向同步的，它俩是双向同步的，它俩是双向同步的，重要的事情说三遍。
• @Provide和@Consume可以通过相同的变量或者相同的变量别名，变量类型必须相同。

别名：常量字符串，可选

指定了别名，则通过别名来绑定变量；如果没指定别名，则通过变量名绑定变量。

// 通过相同的变量名绑定
[@Provide](/user/Provide) a: number = 0;
[@Consume](/user/Consume) a: number;

// 通过相同的变量别名绑定
[@Provide](/user/Provide)('a') b: number = 0;
[@Consume](/user/Consume)('a') c: number;

相同的变量名或相同变量别名时，@Provide和@Consume修饰的变量是一对多的关系。但允许在同一个自定义组件内，包括其子组件中声明多个同名或者同别名的@Provide装饰的变量。

案例

在index.ets使用@Provide定一个别名"index"变量，引入CompA组件。在CompA组件中引入CompB和CompC组件。并且在CompB和CompC孙子组件中用@Comuse装饰器引入index。让后在index.ets、CompB.ets、CompC.ets都设置按钮点击。点击后Index加1。同步的都会修改别名index变量。

// Index.ets
import CompA from '../view/CompA'
[@Entry](/user/Entry)
@Component
struct Index {
  [@State](/user/State) message: string = 'Hello World'
  [@State](/user/State) describe: string = "你好，世界";
  [@Provide](/user/Provide)('Index') num:number = 0;
  build() {
    Row() {
      Column() {
        Text(`num: ${this.num}, 点击加1`)
          .fontSize(40)
          .fontWeight(FontWeight.Bold)
        Button(`Index-Btn`)
          .type(ButtonType.Capsule)
          .width(120)
          .margin({
            top: '60vp'
          })
          .onClick(event => {
            this.num++
          })
        CompA({
          message: this.message,
          describe: this.describe
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

// CompA.ets
export default struct ComponentA {
  [@Prop](/user/Prop) message: string;
  [@Prop](/user/Prop) describe: string;
  build(){
    Column(){
      CompB()
      CompC()
    }
  }
}

// CompB.ets
export default struct ComponentB {
  [@Consume](/user/Consume)('Index') num: number;
 
  build(){
    Column(){
      Button(`CompB-Btn`)
        .type(ButtonType.Capsule)
        .width(120)
        .margin({
          top: '6vp'
        })
        .onClick(event => {
          this.num++
        })
    }
  }
}

// CompC.ets
export default struct ComponentB {
  [@Consume](/user/Consume)('Index') num: number;
 
  build(){
    Column(){
      Button(`CompC-Btn`)
        .type(ButtonType.Capsule)
        .width(120)
        .margin({
          top: '6vp'
        })
        .onClick(event => {
          this.num++;
        })
    }
  }
}