ArkTs学习之ArkTS装饰器@State装饰器 @Prop装饰器 @Link装饰器（四）

一、@State装饰器

@State装饰的变量，或称为状态变量，一旦拥有了状态属性，就和自定义组件的渲染绑定起来。当状态改变时，UI会发生对应的渲染改变。

在状态变量相关装饰器中，@State是最基础的，使变量拥有状态属性的装饰器，它也是大部分状态变量的数据源。

1. @State装饰器特点

@State 装饰的变量，是私有的，只能从组件内部访问。

❗️在声明时必须指定类型和本地初始化。

@State装饰的变量与子组件中的@Prop装饰变量之间建立单向数据同步,与@Link、@ObjectLink装饰变量之间建立双向数据同步。

@State装饰的变量生命周期与其所属自定义组件的生命周期相同

2. @State装饰器使用示例

@Entry
@Component
struct MyComponent {
  // 定义一个状态变量
  @State count: number = 0;

  build() {
    Column() {
      // Text组件显示count的值
      Text(`count=${this.count}`)
      // Button是系统组件，添加一个点击事件，点击一次就给count + 1
      Button("点击+1")
        .onClick(() => {
          this.count++
        })
    }
  }
}

3. @State变量的传递规则

二、@Prop装饰器

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

当父组件中的数据源更改时，与之相关的@Prop装饰的变量都会自动更新。

@Prop变量允许在本地修改，但修改后的变化不会同步回父组件。

备注：

@Prop与@State有相同的语义，但初始化方式不同。@Prop装饰的变量必须使用其父组件提供的@State变量进行初始化，允许组件内部修改@Prop变量，但变量的更改不会通知给父组件，父组件变量的更改会同步到@prop装饰的变量，即@Prop属于单向数据绑定。

1. @Prop装饰器特点

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

因为@Entry修饰的组件是根组件，不存在父祖件

@Prop装饰的状态量仅支持number、string、boolean等简单数据类型；

@Prop装饰的状态量在声明时必须指定类型，但可以不进行本地初始化。

@Prop装饰的状态量支持多个实例：一个组件中可以定义多个标有@Prop的属性；

@Prop装饰的状态量私有：仅支持组件内访问；

2. @Prop装饰器使用示例

@Entry
@Component
struct Parent {
  // 定义一个状态变量
  @State count: number = 0;

  build() {
    Column() {
      // 使用自定义Child组件，并用Parent中count初始化Child中的count
      // 当Parent中count改变时，Child中的count也会同步修改
      Child({ count: this.count })
      Text(`Parent组件中count=${this.count}`)
      // Button是系统组件，添加一个点击事件，点击一次就给count + 1
      Button("点击+1")
        .onClick(() => {
          this.count++
        })
    }
  }
}

@Component
struct Child {
  // 定义一个@prop变量
  @Prop count: number

  build() {
    Text(`Child组件中count=${this.count}`)
  }
}

3.@Prop变量的传递规则

三、@Link装饰器

@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。

当父组件中的数据源更改时，与之相关的@Link装饰的变量都会自动更新。

@Link变量更改时，变化也会同步回父组件。

1. @Link装饰器特点

@Link装饰的变量不能在@Entry装饰的自定义组件中使用。

因为@Entry修饰的组件是根组件，不存在父祖件

@Link装饰的变量在声明时必须指定类型，不能进行本地初始化，并必须父组件初始化。

@Link装饰的变量私有：仅支持组件内访问；

@Link装饰的变量支持多种类型：@Link支持的数据类型与@State相同，即class、number、string、boolean或这些类型的数组；

创建自定义组件时需要将变量的引用传递给@Link变量，在创建组件的新实例时，必须使用命名参数初始化所有@Link变量。@Link变量可以使用@State变量或@Link变量的引用进行初始化，@State变量可以通过​​'$'​​操作符创建引用。（参考下面的示例）

2. @Link装饰器使用示例

@Entry
@Component
struct Parent {
  // 定义一个状态变量
  @State count: number = 0;

  build() {
    Column() {
      // 使用自定义Child组件，并用Parent中的count初始化Child中的count
      // 给@Link变量初始化，必须使用$
      // 当Parent中的count改变时，Child中的count也会同步改变
      Child({count: $count})
      Text(`Parent组件中count=${this.count}`)
      // Button是系统组件，添加一个点击事件，点击一次就给count + 1
      Button("Parent组件中的点击+1")
        .onClick(() => {
          this.count++
        })
    }
  }
}

@Component
struct Child {
  // 定义一个@Link变量
  // 当Child中的count改变，Parent中的count也会同步改变
  @Link count: number

  build() {
    Column() {
      Text(`Child组件中count=${this.count}`)
      Button("Child组件中的点击+1")
        .onClick(() => {
          this.count++
        })
    }
  }
}

3.@Link变量的传递规则

四、组合使用总结

如果父组件A中有个变量@state 的变量A，子组件B中@Prop 变量B，子组件C中@Link 变量C；

当子组件B 和 子组件C 同时在父组件A中使用的时候：

当变量A变化的时候--变量B 和变量C 都会变化

当变量C 变化的时候--变量A 和B 都会变化 ，

当变量B变化的时候--A 和C 都不会变化