状态管理@Link

昉钰

已于 2023-12-20 12:23:30 修改

阅读量245

点赞数 5

分类专栏：鸿蒙4.0开发文章标签： harmonyos ArkTS UI 鸿蒙4.0 Link装饰器

于 2023-12-19 13:46:56 首次发布

本文链接：https://blog.csdn.net/www586089/article/details/135082314

版权

鸿蒙4.0开发专栏收录该内容

39 篇文章 2 订阅

订阅专栏

子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定，父组件中数据的变化会反映到子组件中，同样子组件中数据的变化也会反映到父组件中。

@Link装饰器不能在@Entry装饰的自定义组件中使用。
@Link装饰器修饰的变量禁止本地初始化（只能从父组件初始化）。
@Link装饰器修饰的变量不支持从组件外访问，它是组件私有的，只能在所属组件内访问。

1、观察变化

当装饰的数据类型为boolean、string、number类型时，可以同步观察到数值的变化。
当装饰的数据类型为class或者Object时，可以观察到赋值和属性赋值的变化，即Object.keys(observedObject)返回的所有属性。
当装饰的对象是array时，可以观察到数组添加、删除、更新数组单元的变化。

2、框架行为

@Link装饰的变量和其所属的自定义组件共享生命周期。

为了了解@Link变量初始化和更新机制，有必要先了解父组件和拥有@Link变量的子组件的关系，初始渲染和双向更新的流程（以父组件为@State为例）。

初始渲染：执行父组件的build()函数后将创建子组件的新实例。初始化过程如下：
1. 必须指定父组件中的@State变量，用于初始化子组件的@Link变量。子组件的@Link变量值与其父组件的数据源变量保持同步（双向数据同步）。
2. 父组件的@State状态变量包装类通过构造函数传给子组件，子组件的@Link包装类拿到父组件的@State的状态变量后，将当前@Link包装类this指针注册给父组件的@State变量。
@Link的数据源的更新：即父组件中状态变量更新，引起相关子组件的@Link的更新。处理步骤：
1. 通过初始渲染的步骤可知，子组件@Link包装类把当前this指针注册给父组件。父组件@State变量变更后，会遍历更新所有依赖它的系统组件（elementid）和状态变量（比如@Link包装类）。
2. 通知@Link包装类更新后，子组件中所有依赖@Link状态变量的系统组件（elementId）都会被通知更新。以此实现父组件对子组件的状态数据同步。
@Link的更新：当子组件中@Link更新后，处理步骤如下（以父组件为@State为例）：
1. @Link更新后，调用父组件的@State包装类的set方法，将更新后的数值同步回父组件。
2. 子组件@Link和父组件@State分别遍历依赖的系统组件，进行对应的UI的更新。以此实现子组件@Link同步回父组件@State。

3、简单类型和类对象类型的@Link

class GreenButtonState {
  width: number = 0;

  constructor(width: number) {
    this.width = width;
  }
}

@Component
struct GreenButton {
  @Link greenButtonState: GreenButtonState;

  build() {
    Button('Green Button')
      .width(this.greenButtonState.width)
      .height(40)
      .backgroundColor('#64bb5c')
      .fontColor('#FFFFFF，90%')
      .onClick(() => {
        if (this.greenButtonState.width < 700) {
          // 更新class的属性，变化可以被观察到同步回父组件
          this.greenButtonState.width += 60;
        } else {
          // 更新class，变化可以被观察到同步回父组件
          this.greenButtonState = new GreenButtonState(180);
        }
      })
  }
}

@Component
struct YellowButton {
  @Link yellowButtonState: number;

  build() {
    Button('Yellow Button')
      .width(this.yellowButtonState)
      .height(40)
      .backgroundColor('#f7ce00')
      .fontColor('#FFFFFF，90%')
      .onClick(() => {
        // 子组件的简单类型可以同步回父组件
        this.yellowButtonState += 40.0;
      })
  }
}

@Entry
@Component
struct LinkDemo1Page {
  @State greenButtonState: GreenButtonState = new GreenButtonState(180);
  @State yellowButtonProp: number = 180;

  build() {
    Column() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
        // 简单类型从父组件@State向子组件@Link数据同步
        Button('Parent View: Set yellowButton')
          .width(312)
          .height(40)
          .margin(12)
          .fontColor('#FFFFFF，90%')
          .onClick(() => {
            this.yellowButtonProp = (this.yellowButtonProp < 700) ? this.yellowButtonProp + 40 : 100;
          })
        // class类型从父组件@State向子组件@Link数据同步
        Button('Parent View: Set GreenButton')
          .width(312)
          .height(40)
          .margin(12)
          .fontColor('#FFFFFF，90%')
          .onClick(() => {
            this.greenButtonState.width = (this.greenButtonState.width < 700) ? this.greenButtonState.width + 100 : 100;
          })
        // class类型初始化@Link
        GreenButton({ greenButtonState: $greenButtonState }).margin(12)
        // 简单类型初始化@Link
        YellowButton({ yellowButtonState: $yellowButtonProp }).margin(12)
      }
    }
  }
}

该例演示了简单类型（number、string、boolean）和类对象类型在子组件中使用 @Link时与父组件之间的双向同步，无论是父组件还是子组件更新，相应的子组件和父组件都能正确得到更新。

4、数组类型的@Link

@Component
struct LinkDemo2Child {
  @Link items: number[];

  build() {
    Column() {
      Button(`Button1: push`)
        .margin(12)
        .width(312)
        .height(40)
        .fontColor('#FFFFFF，90%')
        .onClick(() => {
          this.items.push(this.items.length + 1);
        })
      Button(`Button2: replace whole item`)
        .margin(12)
        .width(312)
        .height(40)
        .fontColor('#FFFFFF，90%')
        .onClick(() => {
          this.items = [100, 200, 300];
        })
    }
  }
}

@Entry
@Component
struct LinkDemo2Page {
  @State arr: number[] = [1, 2, 3];

  build() {
    Column() {
      LinkDemo2Child({ items: $arr })
        .margin(12)
      ForEach(this.arr,
        (item: void) => {
          Button(`${item}`)
            .margin(12)
            .width(312)
            .height(40)
            .backgroundColor('#11a2a2a2')
            .fontColor('#e6000000')
        },
        (item: ForEachInterface) => item.toString()
      )
    }
  }
}

两个按钮位于子组件中，子组件中用@Link装饰了一个数组，在子组件中点击任意一个按钮，都会触发对数组的修改，该修改会同步到父组件中，父组件通过for each迭代展示了数组的内容。所以没点击一次push，会把一个数据添加到数组中，此时数组的变化反映到父组件中，父组件中依赖于数组的组件将会得到更新，于是遍历列表，UI上看到插入了一条数据。

子组件中点击replace，触发的数据更新及UI刷新流程与添加一条数据类似。