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

概述

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

限制條件

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

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

變量的傳遞/訪(fǎng)問(wèn)規(guī)則說(shuō)明

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

觀(guān)察變化

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

框架行為

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

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

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

使用場(chǎng)景

簡(jiǎn)單類(lèi)型和類(lèi)對(duì)象類(lèi)型的@Link

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

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

2.當(dāng)點(diǎn)擊父組件ShufflingContainer中的Button時(shí)，@State變化，也會(huì)同步給@Link，子組件也會(huì)發(fā)生對(duì)應(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的屬性，變化可以被觀(guān)察到同步回父組件
          this.greenButtonState.width += 60;
        } else {
          // 更新class，變化可以被觀(guān)察到同步回父組件
          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(() => {
        // 子組件的簡(jiǎn)單類(lèi)型可以同步回父組件
        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 }) {
        // 簡(jiǎn)單類(lèi)型從父組件@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類(lèi)型從父組件@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類(lèi)型初始化@Link
        GreenButton({ greenButtonState: $greenButtonState }).margin(12)
        // 簡(jiǎn)單類(lèi)型初始化@Link
        YellowButton({ yellowButtonState: $yellowButtonProp }).margin(12)
      }
    }
  }
}

數(shù)組類(lèi)型的@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()
      )
    }
  }
}