@Link裝飾器：父子雙向同步

概述

@Link裝飾的變量與其父組件中的數(shù)據(jù)源共享相同的值。

限制條件

@Link裝飾器不能在@Entry裝飾的自定義組件中使用。

裝飾器使用規(guī)則說明

變量的傳遞/訪問規(guī)則說明

觀察變化和行為表現(xiàn)

觀察變化

• 當裝飾的數(shù)據(jù)類型為boolean、string、number類型時，可以同步觀察到數(shù)值的變化，示例請參考簡單類型和類對象類型的@Link。
• 當裝飾的數(shù)據(jù)類型為class或者Object時，可以觀察到賦值和屬性賦值的變化，即Object.keys(observedObject)返回的所有屬性，示例請參考簡單類型和類對象類型的@Link。
• 當裝飾的對象是array時，可以觀察到數(shù)組添加、刪除、更新數(shù)組單元的變化，示例請參考數(shù)組類型的@Link。

框架行為

@Link裝飾的變量和其所屬的自定義組件共享生命周期。

為了了解@Link變量初始化和更新機制，有必要先了解父組件和擁有@Link變量的子組件的關(guān)系，初始渲染和雙向更新的流程（以父組件為@State為例）。

1. 初始渲染：執(zhí)行父組件的build()函數(shù)后將創(chuàng)建子組件的新實例。初始化過程如下：
   1. 必須指定父組件中的@State變量，用于初始化子組件的@Link變量。子組件的@Link變量值與其父組件的數(shù)據(jù)源變量保持同步（雙向數(shù)據(jù)同步）。
   2. 父組件的@State狀態(tài)變量包裝類通過構(gòu)造函數(shù)傳給子組件，子組件的@Link包裝類拿到父組件的@State的狀態(tài)變量后，將當前@Link包裝類this指針注冊給父組件的@State變量。
2. @Link的數(shù)據(jù)源的更新：即父組件中狀態(tài)變量更新，引起相關(guān)子組件的@Link的更新。處理步驟：
   1. 通過初始渲染的步驟可知，子組件@Link包裝類把當前this指針注冊給父組件。父組件@State變量變更后，會遍歷更新所有依賴它的系統(tǒng)組件（elementid）和狀態(tài)變量（比如@Link包裝類）。
   2. 通知@Link包裝類更新后，子組件中所有依賴@Link狀態(tài)變量的系統(tǒng)組件（elementId）都會被通知更新。以此實現(xiàn)父組件對子組件的狀態(tài)數(shù)據(jù)同步。
3. @Link的更新：當子組件中@Link更新后，處理步驟如下（以父組件為@State為例）：
   1. @Link更新后，調(diào)用父組件的@State包裝類的set方法，將更新后的數(shù)值同步回父組件。
   2. 子組件@Link和父組件@State分別遍歷依賴的系統(tǒng)組件，進行對應(yīng)的UI的更新。以此實現(xiàn)子組件@Link同步回父組件@State。

使用場景

簡單類型和類對象類型的@Link

以下示例中，點擊父組件ShufflingContainer中的“Parent View: Set yellowButton”和“Parent View: Set GreenButton”，可以從父組件將變化同步給子組件。

1.點擊子組件GreenButton和YellowButton中的Button，子組件會發(fā)生相應(yīng)變化，將變化同步給父組件。因為@Link是雙向同步，會將變化同步給@State。

2.當點擊父組件ShufflingContainer中的Button時，@State變化，也會同步給@Link，子組件也會發(fā)生對應(yīng)的刷新。

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 ShufflingContainer {
  @State greenButtonState: GreenButtonState = new GreenButtonState(180);
  @State yellowButtonProp: number = 180;

  build() {
    Column() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
        // 簡單類型從父組件@State向子組件@Link數(shù)據(jù)同步
        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數(shù)據(jù)同步
        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)
      }
    }
  }
}

數(shù)組類型的@Link

@Component
struct Child {
  @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 Parent {
  @State arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Child({ 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()
      )
    }
  }
}