共计 3603 个字符，预计需要花费 10 分钟才能阅读完成。
@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;
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 时，能够察看到数组自身的赋值和增加、删除、更新数组的变动。例子如下。申明 Model 类。class Model {
public value: number;
constructor(value: number) {
this.value = value;}
}
@State 装璜的对象为 Model 类型数组时。@State title: Model[] = [new Model(11), new Model(1)];
数组本身的赋值能够察看到。this.title = [new Model(2)];
数组项的赋值能够察看到。this.title[0] = new Model(2);
删除数组项能够察看到。this.title.pop();
新增数组项能够察看到。this.title.push(new Model(12));
数组项中属性的赋值察看不到。this.title[0].value = 6;
框架行为当状态变量被扭转时，查问依赖该状态变量的组件；执行依赖该状态变量的组件的更新办法，组件更新渲染；和该状态变量不相干的组件或者 UI 形容不会产生从新渲染，从而实现页面渲染的按需更新。应用场景装璜简略类型的变量以下示例为 @State 装璜的简略类型，count 被 @State 装璜成为状态变量，count 的扭转引起 Button 组件的刷新：当状态变量 count 扭转时，查问到只有 Button 组件关联了它；执行 Button 组件的更新办法，实现按需刷新。@Entry
@Component
struct MyComponent {
@State count: number = 0;
build() {
Button(`click times: ${this.count}`)
.onClick(() => {this.count += 1;})}
}
装璜 class 对象类型的变量自定义组件 MyComponent 定义了被 @State 装璜的状态变量 count 和 title，其中 title 的类型为自定义类 Model。如果 count 或 title 的值发生变化，则查问 MyComponent 中应用该状态变量的 UI 组件，并进行从新渲染。EntryComponent 中有多个 MyComponent 组件实例，第一个 MyComponent 外部状态的更改不会影响第二个 MyComponent。class Model {
public value: string;
constructor(value: string) {
this.value = value;}
}
@Entry
@Component
struct EntryComponent {
build() {
Column() {
// 此处指定的参数都将在初始渲染时笼罩本地定义的默认值，并不是所有的参数都须要从父组件初始化
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 变量的更新将触发下面的 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 变量的更新将触发该 Button 组件的内容更新
this.count += this.increaseBy;
})
.width(300)
.margin(10)
}}
}
从该示例中，咱们能够理解到 @State 变量首次渲染的初始化流程：1. 应用默认的本地初始化：@State title: Model = new Model(‘Hello World’);
@State count: number = 0;
2. 对于 @State 来说，命名参数机制传递的值并不是必选的，如果没有命名参数传值，则应用本地初始化的默认值：MyComponent({count: 1, increaseBy: 2})
作为一名合格一线开发程序员，大家心里必定会有很多疑难！鸿蒙零碎这么弱小 为了可能让大家跟上互联网时代的技术迭代，在这里跟大家分享一下我本人近期学习心得以及参考网上材料整顿出的一份最新版的鸿蒙学习晋升材料，有须要的小伙伴自行支付，限时开源，先到先得~~ 支付以下高清学习路线原图请点击→《鸿蒙 HarmonyOS 分布式我的项目实战》纯血鸿蒙 HarmonyOS 根底技能学习路线图
支付以上残缺高清学习路线图，请点击→《鸿蒙 4.0 源码开发架构剖析 pdf》小编本人整顿的局部学习材料（蕴含有高清视频、开发文档、电子书籍等）
以上分享的学习路线都适宜哪些人跟着学习？- 应届生 / 计算机专业通过学习鸿蒙新兴技术，入行互联网，将来高起点待业。- 0 根底转行提前布局新方向，抓住风口，自我晋升，取得更多就业机会。- 技术晋升 / 进阶跳槽倒退瓶颈期，晋升职场竞争力，疾速把握鸿蒙技术，享受蓝海红利。
写在最初如果你感觉这篇内容对你还蛮有帮忙，我想邀请你帮我三个小忙：点赞，转发，有你们的『点赞和评论』，才是我发明的能源。关注小编，同时能够期待后续文章 ing，不定期分享原创常识。想要获取更多残缺鸿蒙最新 VIP 学习材料，请点击→《一小时疾速意识 HarmonyOS》
