@State裝飾器：組件內狀態(tài)

概述

@State裝飾的變量，與聲明式范式中的其他被裝飾變量一樣，是私有的，只能從組件內部訪問，在聲明時必須指定其類型和本地初始化。初始化也可選擇使用命名參數(shù)機制從父組件完成初始化。

@State裝飾的變量擁有以下特點：

• @State裝飾的變量與子組件中的@Prop裝飾變量之間建立單向數(shù)據(jù)同步，與@Link、@ObjectLink裝飾變量之間建立雙向數(shù)據(jù)同步。
• @State裝飾的變量生命周期與其所屬自定義組件的生命周期相同。

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

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

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

并不是狀態(tài)變量的所有更改都會引起UI的刷新，只有可以被框架觀察到的修改才會引起UI刷新。該小節(jié)去介紹什么樣的修改才能被觀察到，以及觀察到變化后，框架的是怎么引起UI刷新的，即框架的行為表現(xiàn)是什么。

觀察變化

• 當裝飾的數(shù)據(jù)類型為boolean、string、number類型時，可以觀察到數(shù)值的變化。

  // for simple type
  @State count: number = 0;
  // value changing can be observed
  this.count = 1;

• 當裝飾的數(shù)據(jù)類型為class或者Object時，可以觀察到自身的賦值的變化，和其屬性賦值的變化，即Object.keys(observedObject)返回的所有屬性。例子如下。
  聲明ClassA和Model類。

  class ClassA {
    public value: string;
  
    constructor(value: string) {
      this.value = value;
    }
  }
  
  class Model {
    public value: string;
    public name: ClassA;
    constructor(value: string, a: ClassA) {
      this.value = value;
      this.name = a;
    }
  }

  @State裝飾的類型是Model

  // class類型
  @State title: Model = new Model('Hello', new ClassA('World'));

  對@State裝飾變量的賦值。

  // class類型賦值
  this.title = new Model('Hi', new ClassA('ArkUI'));

  對@State裝飾變量的屬性賦值。

  // class屬性的賦值
  this.title.value = 'Hi';

  嵌套屬性的賦值觀察不到。

  // 嵌套的屬性賦值觀察不到
  this.title.name.value = 'ArkUI';

• 當裝飾的對象是array時，可以觀察到數(shù)組本身的賦值和添加、刪除、更新數(shù)組的變化。例子如下。

  聲明Model類。

  class Model {
    public value: number;
    constructor(value: number) {
      this.value = value;
    }
  }

  @State裝飾的對象為Model類型數(shù)組時。

  @State title: Model[] = [new Model(11), new Model(1)];

  數(shù)組自身的賦值可以觀察到。

  this.title = [new Model(2)];

  數(shù)組項的賦值可以觀察到。

  this.title[0] = new Model(2);

  刪除數(shù)組項可以觀察到。

  this.title.pop();

  新增數(shù)組項可以觀察到。

  this.title.push(new Model(12));

  數(shù)組項中屬性的賦值觀察不到。

  this.title[0].value = 6;

框架行為

• 當狀態(tài)變量被改變時，查詢依賴該狀態(tài)變量的組件；
• 執(zhí)行依賴該狀態(tài)變量的組件的更新方法，組件更新渲染；
• 和該狀態(tài)變量不相關的組件或者UI描述不會發(fā)生重新渲染，從而實現(xiàn)頁面渲染的按需更新。

使用場景

裝飾簡單類型的變量

以下示例為@State裝飾的簡單類型，count被@State裝飾成為狀態(tài)變量，count的改變引起B(yǎng)utton組件的刷新：

• 當狀態(tài)變量count改變時，查詢到只有Button組件關聯(lián)了它；
• 執(zhí)行Button組件的更新方法，實現(xiàn)按需刷新。

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

  build() {
    Button(`click times: ${this.count}`)
      .onClick(() => {
        this.count += 1;
      })
  }
}

裝飾class對象類型的變量

• 自定義組件MyComponent定義了被@State裝飾的狀態(tài)變量count和title，其中title的類型為自定義類Model。如果count或title的值發(fā)生變化，則查詢MyComponent中使用該狀態(tài)變量的UI組件，并進行重新渲染。

• EntryComponent中有多個MyComponent組件實例，第一個MyComponent內部狀態(tài)的更改不會影響第二個MyComponent。

  class Model {
    public value: string;
  
    constructor(value: string) {
      this.value = value;
    }
  }
  
  @Entry
  @Component
  struct EntryComponent {
    build() {
      Column() {
        // 此處指定的參數(shù)都將在初始渲染時覆蓋本地定義的默認值，并不是所有的參數(shù)都需要從父組件初始化
        MyComponent({ count: 1, increaseBy: 2 })
          .width(300)
        MyComponent({ title: new Model('Hello World 2'), count: 7 })
      }
    }
  }
  
  @Component
  struct MyComponent {
    @State title: Model = new Model('Hello World');
    @State count: number = 0;
    private increaseBy: number = 1;
  
    build() {
      Column() {
        Text(`${this.title.value}`)
          .margin(10)
        Button(`Click to change title`)
          .onClick(() => {
            // @State變量的更新將觸發(fā)上面的Text組件內容更新
            this.title.value = this.title.value === 'Hello ArkUI' ? 'Hello World' : 'Hello ArkUI';
          })
          .width(300)
          .margin(10)
  
        Button(`Click to increase count = ${this.count}`)
          .onClick(() => {
            // @State變量的更新將觸發(fā)該Button組件的內容更新
            this.count += this.increaseBy;
          })
          .width(300)
          .margin(10)
      }
    }
  }