@State装饰器:组件内状态

@State状态数据具有以下特征:

1、支持多种类型:允许class、number、boolean、string强类型的按值和按引用类型。允许这些强类型构成的数组,即Array、Array、Array、Array。不允许object和any。 2、支持多实例:组件不同实例的内部状态数据独立。 3、内部私有:标记为@State的属性是私有变量,只能在组件内访问。 4、需要本地初始化:必须为所有@State变量分配初始值,将变量保持未初始化可能导致框架行为未定义。 5、 创建自定义组件时支持通过状态变量名设置初始值:在创建组件实例时,可以通过变量名显式指定@State状态属性的初始值。

@State向@Link传参时,用**$**引用@State父组件变量的值,如:

ComponentA({ highScore: $highScore })

@State向@Prop传参时,用**this.**引用@State父组件变量的值,如:

ComponentA({ highScore: this.highScore })

@Observed

@Observed应用于类,表示该类中的数据变更被UI页面管理,例如:

@Observed class ClassA {}

@ObjectLink

@ObjectLink应用于被@Observed所装饰类的对象(变量),例如:

@ObjectLink a: ClassA

使用要求

1、@Observed 用于类,@ObjectLink 用于变量。 2、@ObjectLink装饰的变量类型必须为类(class type)。 3、类要被@Observed装饰器所装饰。

不支持简单类型参数,可以使用@Prop进行单向同步。 4、@ObjectLink装饰的对象变量是不可变的,但可以修改对象里面变量的值。

属性的改动是被允许的,当改动发生时,如果同一个对象被多个@ObjectLink变量所引用,那么所有拥有这些变量的自定义组件都会被通知去重新渲染。 5、@ObjectLink装饰的变量不可设置默认值。

必须让父组件中有一个由@State、@Link、@StorageLink、@Provide或@Consume所装饰变量参与的TS表达式进行初始化。 6、@ObjectLink装饰的变量是私有变量,只能在组件内访问。

代码示例:

@Observed

class ClassA {

public name : string;

public c: number;

constructor(c: number, name: string = '') {

this.name = name;

this.c = c;

}

}

class ClassB {

public a: ClassA;

constructor(a: ClassA) {

this.a = a;

}

}

@Component

struct ViewA {

label : string = "ep1";

@ObjectLink a : ClassA;

build() {

Column() {

Text(`ViewA [${this.label}]: a.c=${this.a.c}`)

.fontSize(20)

Button(`+1`)

.width(100)

.margin(2)

.onClick(() => {

this.a.c += 1;

})

Button(`reset`)

.width(100)

.margin(2)

.onClick(() => {

this.a = new ClassA(0); // 错误:ObjectLink装饰的变量a是不可变的

})

}

}

}

@Entry

@Component

struct ViewB {

@State b : ClassB = new ClassB(new ClassA(10));

build() {

Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center}) {

ViewA({label: "ViewA #1", a: this.b.a})

ViewA({label: "ViewA #2", a: this.b.a})

Button(`ViewB: this.b.a.c += 1` )

.width(320)

.margin(4)

.onClick(() => {

this.b.a.c += 1;

})

Button(`ViewB: this.b.a = new ClassA(0)`)

.width(240)

.margin(4)

.onClick(() => {

this.b.a = new ClassA(0);

})

Button(`ViewB: this.b = new ClassB(ClassA(0))`)

.width(240)

.margin(4)

.onClick(() => {

this.b = new ClassB(new ClassA(0));

})

}

}

}

最后

给大家分享一份我正在学习的《鸿蒙零基础入门学习指南》,希望能对那些想要学习鸿蒙,但是有没有方向的人提供一点帮助。 有需要的朋友,可以扫描下方二维码免费获取!!!

《鸿蒙零基础入门学习指南》

本文档适用于HarmonyOS应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用,快速了解工程目录的主要文件,熟悉HarmonyOS应用开发流程。

目录

一、快速入门

开发准备构建第一个ArkTS应用(Stage模型)构建第一个ArkTS应用(FA模型)构建第一个JS应用(FA模型)

二、开发基础知识

应用程序包基础知识应用配置文件(Stage模型)应用配置文件概述(FA模型)

三、资源分类与访问

资源分类与访问创建资源目录和资源文件资源访问

四、学习ArkTs语言

初识ArkTS语言基本语法状态管理其他状态管理渲染控制

有需要完整文档的朋友,可以扫描下方二维码免费领取!!!

相关阅读

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: