@Prop裝飾器：父子單向同步

@Prop裝飾的變量可以和父組件建立單向的同步關系。@Prop裝飾的變量是可變的，但是變化不會同步回其父組件。

說明

從API version 9開始，該裝飾器支持在ArkTS卡片中使用。

概述

@Prop裝飾的變量和父組件建立單向的同步關系：

• @Prop變量允許在本地修改，但修改后的變化不會同步回父組件。
• 當父組件中的數(shù)據(jù)源更改時，與之相關的@Prop裝飾的變量都會自動更新。如果子組件已經(jīng)在本地修改了@Prop裝飾的相關變量值，而在父組件中對應的@State裝飾的變量被修改后，子組件本地修改的@Prop裝飾的相關變量值將被覆蓋。

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

圖1 初始化規(guī)則圖示

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

觀察變化

@Prop裝飾的數(shù)據(jù)可以觀察到以下變化。

• 當裝飾的類型是允許的類型，即string、number、boolean、enum類型都可以觀察到的賦值變化；

  // 簡單類型
  @Prop count: number;
  // 賦值的變化可以被觀察到
  this.count = 1;
  

對于@State和@Prop的同步場景：

• 使用父組件中@State變量的值初始化子組件中的@Prop變量。當@State變量變化時，該變量值也會同步更新至@Prop變量。
• @Prop裝飾的變量的修改不會影響其數(shù)據(jù)源@State裝飾變量的值。
• 除了@State，數(shù)據(jù)源也可以用@Link或@Prop裝飾，對@Prop的同步機制是相同的。
• 數(shù)據(jù)源和@Prop變量的類型需要相同。

框架行為

要理解@Prop變量值初始化和更新機制，有必要了解父組件和擁有@Prop變量的子組件初始渲染和更新流程。

1. 初始渲染：
   1. 執(zhí)行父組件的build()函數(shù)將創(chuàng)建子組件的新實例，將數(shù)據(jù)源傳遞給子組件；
   2. 初始化子組件@Prop裝飾的變量。
2. 更新：
   1. 子組件@Prop更新時，更新僅停留在當前子組件，不會同步回父組件；
   2. 當父組件的數(shù)據(jù)源更新時，子組件的@Prop裝飾的變量將被來自父組件的數(shù)據(jù)源重置，所有@Prop裝飾的本地的修改將被父組件的更新覆蓋。

使用場景

父組件@State到子組件@Prop簡單數(shù)據(jù)類型同步

以下示例是@State到子組件@Prop簡單數(shù)據(jù)同步，父組件ParentComponent的狀態(tài)變量countDownStartValue初始化子組件CountDownComponent中@Prop裝飾的count，點擊“Try again”，count的修改僅保留在CountDownComponent，不會同步給父組件ParentComponent。

ParentComponent的狀態(tài)變量countDownStartValue的變化將重置CountDownComponent的count。

@Component
struct CountDownComponent {
  @Prop count: number;
  costOfOneAttempt: number = 1;

  build() {
    Column() {
      if (this.count > 0) {
        Text(`You have ${this.count} Nuggets left`)
      } else {
        Text('Game over!')
      }
      // @Prop裝飾的變量不會同步給父組件
      Button(`Try again`).onClick(() => {
        this.count -= this.costOfOneAttempt;
      })
    }
  }
}

@Entry
@Component
struct ParentComponent {
  @State countDownStartValue: number = 10;

  build() {
    Column() {
      Text(`Grant ${this.countDownStartValue} nuggets to play.`)
      // 父組件的數(shù)據(jù)源的修改會同步給子組件
      Button(`+1 - Nuggets in New Game`).onClick(() => {
        this.countDownStartValue += 1;
      })
      // 父組件的修改會同步給子組件
      Button(`-1  - Nuggets in New Game`).onClick(() => {
        this.countDownStartValue -= 1;
      })

      CountDownComponent({ count: this.countDownStartValue, costOfOneAttempt: 2 })
    }
  }
}

在上面的示例中：

1. CountDownComponent子組件首次創(chuàng)建時其@Prop裝飾的count變量將從父組件@State裝飾的countDownStartValue變量初始化；
2. 按“+1”或“-1”按鈕時，父組件的@State裝飾的countDownStartValue值會變化，這將觸發(fā)父組件重新渲染，在父組件重新渲染過程中會刷新使用countDownStartValue狀態(tài)變量的UI組件并單向同步更新CountDownComponent子組件中的count值；
3. 更新count狀態(tài)變量值也會觸發(fā)CountDownComponent的重新渲染，在重新渲染過程中，評估使用count狀態(tài)變量的if語句條件（this.count > 0），并執(zhí)行true分支中的使用count狀態(tài)變量的UI組件相關描述來更新Text組件的UI顯示；
4. 當按下子組件CountDownComponent的“Try again”按鈕時，其@Prop變量count將被更改，但是count值的更改不會影響父組件的countDownStartValue值；
5. 父組件的countDownStartValue值會變化時，父組件的修改將覆蓋掉子組件CountDownComponent中count本地的修改。

父組件@State數(shù)組項到子組件@Prop簡單數(shù)據(jù)類型同步

父組件中@State如果裝飾的數(shù)組，其數(shù)組項也可以初始化@Prop。以下示例中父組件Index中@State裝飾的數(shù)組arr，將其數(shù)組項初始化子組件Child中@Prop裝飾的value。

@Component
struct Child {
  @Prop value: number;

  build() {
    Text(`${this.value}`)
      .fontSize(50)
      .onClick(()=>{this.value++})
  }
}

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

  build() {
    Row() {
      Column() {
        Child({value: this.arr[0]})
        Child({value: this.arr[1]})
        Child({value: this.arr[2]})

        Divider().height(5)

        ForEach(this.arr, 
          item => {
            Child({value: item})
          }, 
          item => item.toString()
        )
        Text('replace entire arr')
        .fontSize(50)
        .onClick(()=>{
          // 兩個數(shù)組都包含項“3”。
          this.arr = this.arr[0] == 1 ? [3,4,5] : [1,2,3];
        })
      }
    }
  }
}

初始渲染創(chuàng)建6個子組件實例，每個@Prop裝飾的變量初始化都在本地拷貝了一份數(shù)組項。子組件onclick事件處理程序會更改局部變量值。

假設我們點擊了多次，所有變量的本地取值都是“7”。

7
7
7
----
7
7
7

單擊replace entire arr后，屏幕將顯示以下信息，為什么？

3
4
5
----
7
4
5

• 在子組件Child中做的所有的修改都不會同步回父組件Index組件，所以即使6個組件顯示都為7，但在父組件Index中，this.arr保存的值依舊是[1,2,3]。

• 點擊replace entire arr，this.arr[0] == 1成立，將this.arr賦值為[3, 4, 5]；

• 因為this.arr[0]已更改，Child({value: this.arr[0]})組件將this.arr[0]更新同步到實例@Prop裝飾的變量。Child({value: this.arr[1]})和Child({value: this.arr[2]})的情況也類似。

• this.arr的更改觸發(fā)ForEach更新，this.arr更新的前后都有數(shù)值為3的數(shù)組項：[3, 4, 5] 和[1, 2, 3]。根據(jù)diff機制，數(shù)組項“3”將被保留，刪除“1”和“2”的數(shù)組項，添加為“4”和“5”的數(shù)組項。這就意味著，數(shù)組項“3”的組件不會重新生成，而是將其移動到第一位。所以“3”對應的組件不會更新，此時“3”對應的組件數(shù)值為“7”，F(xiàn)orEach最終的渲染結果是“7”，“4”，“5”。

從父組件中的@State類對象屬性到@Prop簡單類型的同步

如果圖書館有一本圖書和兩位用戶，每位用戶都可以將圖書標記為已讀，此標記行為不會影響其它讀者用戶。從代碼角度講，對@Prop圖書對象的本地更改不會同步給圖書館組件中的@State圖書對象。

class Book {
  public title: string;
  public pages: number;
  public readIt: boolean = false;

  constructor(title: string, pages: number) {
    this.title = title;
    this.pages = pages;
  }
}

@Component
struct ReaderComp {
  @Prop title: string;
  @Prop readIt: boolean;

  build() {
    Row() {
      Text(this.title)
      Text(`... ${this.readIt ? 'I have read' : 'I have not read it'}`)
        .onClick(() => this.readIt = true)
    }
  }
}

@Entry
@Component
struct Library {
  @State book: Book = new Book('100 secrets of C++', 765);

  build() {
    Column() {
      ReaderComp({ title: this.book.title, readIt: this.book.readIt })
      ReaderComp({ title: this.book.title, readIt: this.book.readIt })
    }
  }
}

@Prop本地初始化不和父組件同步

為了支持@Component裝飾的組件復用場景，@Prop支持本地初始化，這樣可以讓@Prop是否與父組件建立同步關系變得可選。當且僅當@Prop有本地初始化時，從父組件向子組件傳遞@Prop的數(shù)據(jù)源才是可選的。

下面的示例中，子組件包含兩個@Prop變量：

• @Prop customCounter沒有本地初始化，所以需要父組件提供數(shù)據(jù)源去初始化@Prop，并當父組件的數(shù)據(jù)源變化時，@Prop也將被更新；

• @Prop customCounter2有本地初始化，在這種情況下，@Prop依舊允許但非強制父組件同步數(shù)據(jù)源給@Prop。文章來源地址http://www.zghlxwxcb.cn/news/detail-794318.html

  @Component
  struct MyComponent {
    @Prop customCounter: number;
    @Prop customCounter2: number = 5;
  
    build() {
      Column() {
        Row() {
          Text(`From Main: ${this.customCounter}`).width(90).height(40).fontColor('#FF0010')
        }
  
        Row() {
          Button('Click to change locally !').width(180).height(60).margin({ top: 10 })
            .onClick(() => {
              this.customCounter2++
            })
        }.height(100).width(180)
  
        Row() {
          Text(`Custom Local: ${this.customCounter2}`).width(90).height(40).fontColor('#FF0010')
        }
      }
    }
  }
  
  @Entry
  @Component
  struct MainProgram {
    @State mainCounter: number = 10;
  
    build() {
      Column() {
        Row() {
          Column() {
            Button('Click to change number').width(480).height(60).margin({ top: 10, bottom: 10 })
              .onClick(() => {
                this.mainCounter++
              })
          }
        }
  
        Row() {
          Column()
          // customCounter必須從父組件初始化，因為MyComponent的customCounter成員變量缺少本地初始化；此處，customCounter2可以不做初始化。
          MyComponent({ customCounter: this.mainCounter })
          // customCounter2也可以從父組件初始化，父組件初始化的值會覆蓋子組件customCounter2的本地初始化的值
          MyComponent({ customCounter: this.mainCounter, customCounter2: this.mainCounter })
        }
      }
    }
  }
  
  

到了這里，關于HarmonyOS@Prop裝飾器：父子單向同步的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！