鸿蒙ArkUI组件化开发系列—组件内状态@State装饰器

  目录

概述

装饰器使用规则说明

变量的传递/访问规则说明

观察变化和行为表现

观察变化

框架行为

使用场景

装饰class对象类型的变量

最后

---

@State装饰的变量，或称为状态变量，一旦变量拥有了状态属性，就和自定义组件的渲染绑定起来。当状态改变时，UI会发生对应的渲染改变。

在状态变量相关装饰器中，@State是最基础的，使变量拥有状态属性的装饰器，它也是大部分状态变量的数据源。

说明
从API version 9开始，该装饰器支持在ArkTS卡片中使用。

概述

@State装饰的变量，与声明式范式中的其他被装饰变量一样，是私有的，只能从组件内部访问，在声明时必须指定其类型和本地初始化。初始化也可选择使用命名参数机制从父组件完成初始化。

@State装饰的变量拥有以下特点：

• @State装饰的变量与子组件中的@Prop装饰变量之间建立单向数据同步，与@Link、@ObjectLink装饰变量之间建立双向数据同步。
• @State装饰的变量生命周期与其所属自定义组件的生命周期相同。 装饰器使用规则说明

装饰器使用规则说明

变量的传递/访问规则说明

图1 初始化规则图示

观察变化和行为表现

并不是状态变量的所有更改都会引起UI的刷新，只有可以被框架观察到的修改才会引起UI刷新。该小节去介绍什么样的修改才能被观察到，以及观察到变化后，框架的是怎么引起UI刷新的，即框架的行为表现是什么。

观察变化

• 当装饰的数据类型为boolean、string、number类型时，可以观察到数值的变化。

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

• 当装饰的数据类型为class或者Object时，可以观察到自身的赋值的变化，和其属性赋值的变化，即Object.keys(observedObject)返回的所有属性。例子如下。
  声明ClassA和Model类。

class ClassA {
  public value: string;