if/else：條件渲染

使用規(guī)則

• 支持if、else和else if語句。
• if、else if后跟隨的條件語句可以使用狀態(tài)變量。
• 允許在容器組件內(nèi)使用，通過條件渲染語句構(gòu)建不同的子組件。
• 條件渲染語句在涉及到組件的父子關(guān)系時(shí)是“透明”的，當(dāng)父組件和子組件之間存在一個(gè)或多個(gè)if語句時(shí)，必須遵守父組件關(guān)于子組件使用的規(guī)則。
• 每個(gè)分支內(nèi)部的構(gòu)建函數(shù)必須遵循構(gòu)建函數(shù)的規(guī)則，并創(chuàng)建一個(gè)或多個(gè)組件。無法創(chuàng)建組件的空構(gòu)建函數(shù)會(huì)產(chǎn)生語法錯(cuò)誤。
• 某些容器組件限制子組件的類型或數(shù)量，將條件渲染語句用于這些組件內(nèi)時(shí)，這些限制將同樣應(yīng)用于條件渲染語句內(nèi)創(chuàng)建的組件。例如，Grid容器組件的子組件僅支持GridItem組件，在Grid內(nèi)使用條件渲染語句時(shí)，條件渲染語句內(nèi)僅允許使用GridItem組件。

更新機(jī)制

當(dāng)if、else if后跟隨的狀態(tài)判斷中使用的狀態(tài)變量值變化時(shí)，條件渲染語句會(huì)進(jìn)行更新，更新步驟如下：

1. 評估if和else if的狀態(tài)判斷條件，如果分支沒有變化，無需執(zhí)行以下步驟。如果分支有變化，則執(zhí)行2、3步驟：
2. 刪除此前構(gòu)建的所有子組件。
3. 執(zhí)行新分支的構(gòu)造函數(shù)，將獲取到的組件添加到if父容器中。如果缺少適用的else分支，則不構(gòu)建任何內(nèi)容。

條件可以包括Typescript表達(dá)式。對于構(gòu)造函數(shù)中的表達(dá)式，此類表達(dá)式不得更改應(yīng)用程序狀態(tài)。

使用場景

使用if進(jìn)行條件渲染

@Entry
@Component
struct ViewA {
  @State count: number = 0;

  build() {
    Column() {
      Text(`count=${this.count}`)

      if (this.count > 0) {
        Text(`count is positive`)
          .fontColor(Color.Green)
      }

      Button('increase count')
        .onClick(() => {
          this.count++;
        })

      Button('decrease count')
        .onClick(() => {
          this.count--;
        })
    }
  }
}

if語句的每個(gè)分支都包含一個(gè)構(gòu)建函數(shù)。此類構(gòu)建函數(shù)必須創(chuàng)建一個(gè)或多個(gè)子組件。在初始渲染時(shí)，if語句會(huì)執(zhí)行構(gòu)建函數(shù)，并將生成的子組件添加到其父組件中。

每當(dāng)if或else if條件語句中使用的狀態(tài)變量發(fā)生變化時(shí)，條件語句都會(huì)更新并重新評估新的條件值。如果條件值評估發(fā)生了變化，這意味著需要構(gòu)建另一個(gè)條件分支。此時(shí)ArkUI框架將：

1. 刪除所有以前渲染的（早期分支的）組件。
2. 執(zhí)行新分支的構(gòu)造函數(shù)，將生成的子組件添加到其父組件中。

在以上示例中，如果count從0增加到1，那么if語句更新，條件count > 0將重新評估，評估結(jié)果將從false更改為true。因此，將執(zhí)行條件為真分支的構(gòu)造函數(shù)，創(chuàng)建一個(gè)Text組件，并將它添加到父組件Column中。如果后續(xù)count更改為0，則Text組件將從Column組件中刪除。由于沒有else分支，因此不會(huì)執(zhí)行新的構(gòu)造函數(shù)。

if ... else ...語句和子組件狀態(tài)

以下示例包含if ... else ...語句與擁有@State裝飾變量的子組件。

@Component
struct CounterView {
  @State counter: number = 0;
  label: string = 'unknown';

  build() {
    Row() {
      Text(`${this.label}`)
      Button(`counter ${this.counter} +1`)
        .onClick(() => {
          this.counter += 1;
        })
    }
  }
}

@Entry
@Component
struct MainView {
  @State toggle: boolean = true;

  build() {
    Column() {
      if (this.toggle) {
        CounterView({ label: 'CounterView #positive' })
      } else {
        CounterView({ label: 'CounterView #negative' })
      }
      Button(`toggle ${this.toggle}`)
        .onClick(() => {
          this.toggle = !this.toggle;
        })
    }
  }
}

CounterView（label為 'CounterView #positive'）子組件在初次渲染時(shí)創(chuàng)建。此子組件攜帶名為counter的狀態(tài)變量。當(dāng)修改CounterView.counter狀態(tài)變量時(shí)，CounterView（label為 'CounterView #positive'）子組件重新渲染時(shí)并保留狀態(tài)變量值。當(dāng)MainView.toggle狀態(tài)變量的值更改為false時(shí)，MainView父組件內(nèi)的if語句將更新，隨后將刪除CounterView（label為 'CounterView #positive'）子組件。與此同時(shí)，將創(chuàng)建新的CounterView（label為 'CounterView #negative'）實(shí)例。而它自己的counter狀態(tài)變量設(shè)置為初始值0。

以下示例展示了條件更改時(shí)，若需要保留counter值所做的修改。

@Component
struct CounterView {
  @Link counter: number;
  label: string = 'unknown';

  build() {
    Row() {
      Text(`${this.label}`)
      Button(`counter ${this.counter} +1`)
        .onClick(() => {
          this.counter += 1;
        })
    }
  }
}

@Entry
@Component
struct MainView {
  @State toggle: boolean = true;
  @State counter: number = 0;

  build() {
    Column() {
      if (this.toggle) {
        CounterView({ counter: $counter, label: 'CounterView #positive' })
      } else {
        CounterView({ counter: $counter, label: 'CounterView #negative' })
      }
      Button(`toggle ${this.toggle}`)
        .onClick(() => {
          this.toggle = !this.toggle;
        })
    }
  }
}

此處，@State counter變量歸父組件所有。因此，當(dāng)CounterView組件實(shí)例被刪除時(shí)，該變量不會(huì)被銷毀。CounterView組件通過@Link裝飾器引用狀態(tài)。狀態(tài)必須從子級移動(dòng)到其父級（或父級的父級），以避免在條件內(nèi)容或重復(fù)內(nèi)容被銷毀時(shí)丟失狀態(tài)。

嵌套if語句

條件語句的嵌套對父組件的相關(guān)規(guī)則沒有影響。

@Entry
@Component
struct CompA {
  @State toggle: boolean = false;
  @State toggleColor: boolean = false;

  build() {
    Column() {
      Text('Before')
        .fontSize(15)
      if (this.toggle) {
        Text('Top True, positive 1 top')
          .backgroundColor('#aaffaa').fontSize(20)
        // 內(nèi)部if語句
        if (this.toggleColor) {
          Text('Top True, Nested True, positive COLOR  Nested ')
            .backgroundColor('#00aaaa').fontSize(15)
        } else {
          Text('Top True, Nested False, Negative COLOR  Nested ')
            .backgroundColor('#aaaaff').fontSize(15)
        }
      } else {
        Text('Top false, negative top level').fontSize(20)
          .backgroundColor('#ffaaaa')
        if (this.toggleColor) {
          Text('positive COLOR  Nested ')
            .backgroundColor('#00aaaa').fontSize(15)
        } else {
          Text('Negative COLOR  Nested ')
            .backgroundColor('#aaaaff').fontSize(15)
        }
      }
      Text('After')
        .fontSize(15)
      Button('Toggle Outer')
        .onClick(() => {
          this.toggle = !this.toggle;
        })
      Button('Toggle Inner')
        .onClick(() => {
          this.toggleColor = !this.toggleColor;
        })
    }
  }
}