鸿蒙Harmony应用开发—ArkTS（@State装饰器：组件内状态） ...

@State装饰的变量，或称为状态变量，一旦变量拥有了状态属性，就和自定义组件的渲染绑定起来。当状态改变时，UI会发生对应的渲染改变。
在状态变量相干装饰器中，@State是最基础的，使变量拥有状态属性的装饰器，它也是大部分状态变量的数据源。
   说明：
  从API version 9开始，该装饰器支持在ArkTS卡片中使用。
  概述

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

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

装饰器使用规则说明

@State变量装饰器说明装饰器参数无同步类型不与父组件中任何类型的变量同步。允许装饰的变量类型Object、class、string、number、boolean、enum类型，以及这些类型的数组。
支持Date类型。
API11及以上支持Map、Set类型。
支持undefined和null类型。
支持类型的场景请参考观察变化。
API11及以上支持上述支持类型的团结类型，好比string | number, string | undefined 或者 ClassA | null，示例见@State支持团结类型实例。
留意
当使用undefined和null的时候，发起显式指定类型，遵照TypeScipt类型校验，好比：@State a : string | undefined = undefiend是推荐的，不推荐@State a: string = undefined。
支持AkrUI框架定义的团结类型Length、ResourceStr、ResourceColor类型。
类型必须被指定。
不支持any。被装饰变量的初始值必须本地初始化。 变量的传递/访问规则说明

传递/访问说明从父组件初始化可选，从父组件初始化或者本地初始化。如果从父组件初始化将会覆盖本地初始化。
支持父组件中常规变量（常规变量对@State赋值，只是数值的初始化，常规变量的变化不会触发UI刷新，只有状态变量才气触发UI刷新）、@State、@Link、@Prop、@Provide、@Consume、@ObjectLink、@StorageLink、@StorageProp、@LocalStorageLink和@LocalStorageProp装饰的变量，初始化子组件的@State。用于初始化子组件@State装饰的变量支持初始化子组件的常规变量、@State、@Link、@Prop、@Provide。是否支持组件外访问不支持，只能在组件内访问。 图1 初始化规则图示  

观察变化和行为表现

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

• 当装饰的数据类型为boolean、string、number类型时，可以观察到数值的变化。
  
  1. // for simple type
  2. @State count: number = 0;
  3. // value changing can be observed
  4. this.count = 1;

  复制代码
• 当装饰的数据类型为class或者Object时，可以观察到自身的赋值的变化，和其属性赋值的变化，即Object.keys(observedObject)返回的全部属性。例子如下。 声明ClassA和Model类。
  
  1.   class ClassA {
  2.     public value: string;
  3.   
  4.     constructor(value: string) {
  5.       this.value = value;
  6.     }
  7.   }
  8.   
  9.   class Model {
  10.     public value: string;
  11.     public name: ClassA;
  12.     constructor(value: string, a: ClassA) {
  13.       this.value = value;
  14.       this.name = a;
  15.     }
  16.   }

  复制代码
  @State装饰的类型是Model
  
  1. // class类型
  2. @State title: Model = new Model('Hello', new ClassA('World'));

  复制代码
  对@State装饰变量的赋值。
  
  1. // class类型赋值
  2. this.title = new Model('Hi', new ClassA('ArkUI'));

  复制代码
  对@State装饰变量的属性赋值。
  
  1. // class属性的赋值
  2. this.title.value = 'Hi';

  复制代码
  嵌套属性的赋值观察不到。
  
  1. // 嵌套的属性赋值观察不到
  2. this.title.name.value = 'ArkUI';

  复制代码
• 当装饰的对象是array时，可以观察到数组本身的赋值和添加、删除、更新数组的变化。例子如下。 声明Model类。
  
  1. class Model {
  2.   public value: number;
  3.   constructor(value: number) {
  4.     this.value = value;
  5.   }
  6. }

  复制代码
  @State装饰的对象为Model类型数组时。
  
  1. // 数组类型
  2. @State title: Model[] = [new Model(11), new Model(1)];

  复制代码
  数组自身的赋值可以观察到。
  
  1. // 数组赋值
  2. this.title = [new Model(2)];

  复制代码
  数组项的赋值可以观察到。
  
  1. // 数组项赋值
  2. this.title[0] = new Model(2);

  复制代码
  删除数组项可以观察到。
  
  1. // 数组项更改
  2. this.title.pop();

  复制代码
  新增数组项可以观察到。
  
  1. // 数组项更改
  2. this.title.push(new Model(12));

  复制代码
  数组项中属性的赋值观察不到。
  
  1. // 数组项更改
  2. this.title.push(new Model(12));

  复制代码
• 当装饰的对象是Date时，可以观察到Date整体的赋值，同时可通过调用Date的接口setFullYear, setMonth, setDate, setHours, setMinutes, setSeconds, setMilliseconds, setTime, setUTCFullYear, setUTCMonth, setUTCDate, setUTCHours, setUTCMinutes, setUTCSeconds, setUTCMilliseconds 更新Date的属性。
  
  1. @Entry
  2. @Component
  3. struct DatePickerExample {
  4.   @State selectedDate: Date = new Date('2021-08-08')
  6.   build() {
  7.     Column() {
  8.       Button('set selectedDate to 2023-07-08')
  9.         .margin(10)
  10.         .onClick(() => {
  11.           this.selectedDate = new Date('2023-07-08')
  12.         })
  13.       Button('increase the year by 1')
  14.         .margin(10)
  15.         .onClick(() => {
  16.           this.selectedDate.setFullYear(this.selectedDate.getFullYear() + 1)
  17.         })
  18.       Button('increase the month by 1')
  19.         .margin(10)
  20.         .onClick(() => {
  21.           this.selectedDate.setMonth(this.selectedDate.getMonth() + 1)
  22.         })
  23.       Button('increase the day by 1')
  24.         .margin(10)
  25.         .onClick(() => {
  26.           this.selectedDate.setDate(this.selectedDate.getDate() + 1)
  27.         })
  28.       DatePicker({
  29.         start: new Date('1970-1-1'),
  30.         end: new Date('2100-1-1'),
  31.         selected: this.selectedDate
  32.       })
  33.     }.width('100%')
  34.   }
  35. }

  复制代码
• 当装饰的变量是Map时，可以观察到Map整体的赋值，同时可通过调用Map的接口set, clear, delete 更新Map的值。
  
• 当装饰的变量是Set时，可以观察到Set整体的赋值，同时可通过调用Set的接口add, clear, delete 更新Set的值。
  

框架行为

• 当状态变量被改变时，查询依赖该状态变量的组件；
  
• 实行依赖该状态变量的组件的更新方法，组件更新渲染；
  
• 和该状态变量不相干的组件或者UI描述不会发生重新渲染，从而实现页面渲染的按需更新。
  

使用场景

装饰简单类型的变量

以下示例为@State装饰的简单类型，count被@State装饰成为状态变量，count的改变引起Button组件的刷新：

• 当状态变量count改变时，查询到只有Button组件关联了它；
  
• 实行Button组件的更新方法，实现按需刷新。
  

1. @Entry
2. @Component
3. struct MyComponent {
4.   @State count: number = 0;
6.   build() {
7.     Button(`click times: ${this.count}`)
8.       .onClick(() => {
9.         this.count += 1;
10.       })
11.   }
12. }

复制代码

装饰class对象类型的变量

• 自定义组件MyComponent定义了被@State装饰的状态变量count和title，此中title的类型为自定义类Model。如果count或title的值发生变化，则查询MyComponent中使用该状态变量的UI组件，并进行重新渲染。
  
• EntryComponent中有多个MyComponent组件实例，第一个MyComponent内部状态的更改不会影响第二个MyComponent。
  

1. class Model {
2.   public value: string;
4.   constructor(value: string) {
5.     this.value = value;
6.   }
7. }
9. @Entry
10. @Component
11. struct EntryComponent {
12.   build() {
13.     Column() {
14.       // 此处指定的参数都将在初始渲染时覆盖本地定义的默认值，并不是所有的参数都需要从父组件初始化
15.       MyComponent({ count: 1, increaseBy: 2 })
16.         .width(300)
17.       MyComponent({ title: new Model('Hello World 2'), count: 7 })
18.     }
19.   }
20. }
22. @Component
23. struct MyComponent {
24.   @State title: Model = new Model('Hello World');
25.   @State count: number = 0;
26.   private increaseBy: number = 1;
28.   build() {
29.     Column() {
30.       Text(`${this.title.value}`)
31.         .margin(10)
32.       Button(`Click to change title`)
33.         .onClick(() => {
34.           // @State变量的更新将触发上面的Text组件内容更新
35.           this.title.value = this.title.value === 'Hello ArkUI' ? 'Hello World' : 'Hello ArkUI';
36.         })
37.         .width(300)
38.         .margin(10)
40.       Button(`Click to increase count = ${this.count}`)
41.         .onClick(() => {
42.           // @State变量的更新将触发该Button组件的内容更新
43.           this.count += this.increaseBy;
44.         })
45.         .width(300)
46.         .margin(10)
47.     }
48.   }
49. }

复制代码

从该示例中，我们可以相识到@State变量初次渲染的初始化流程：

• 使用默认的本地初始化：
  
  1. @State title: Model = new Model('Hello World');
  2. @State count: number = 0;

  复制代码
• 对于@State来说，定名参数机制传递的值并不是必选的，如果没有定名参数传值，则使用本地初始化的默认值：
  
  1. class C1 {
  2.    public count:number;
  3.    public increaseBy:number;
  4.    constructor(count: number, increaseBy:number) {
  5.      this.count = count;
  6.      this.increaseBy = increaseBy;
  7.   }
  8. }
  9. let obj = new C1(1, 2)
  10. MyComponent(obj)

  复制代码

装饰Map类型变量

   说明：
  从API version 11开始，@State支持Map类型。
  在下面的示例中，message类型为Map<number, string>，点击Button改变message的值，视图会随之刷新。

1. @Entry
2. @Component
3. struct MapSample {
4.   @State message: Map<number, string> = new Map([[0, "a"], [1, "b"], [3, "c"]])
6.   build() {
7.     Row() {
8.       Column() {
9.         ForEach(Array.from(this.message.entries()), (item: [number, string]) => {
10.           Text(`${item[0]}`).fontSize(30)
11.           Text(`${item[1]}`).fontSize(30)
12.           Divider()
13.         })
14.         Button('init map').onClick(() => {
15.           this.message = new Map([[0, "a"], [1, "b"], [3, "c"]])
16.         })
17.         Button('set new one').onClick(() => {
18.           this.message.set(4, "d")
19.         })
20.         Button('clear').onClick(() => {
21.           this.message.clear()
22.         })
23.         Button('replace the first one').onClick(() => {
24.           this.message.set(0, "aa")
25.         })
26.         Button('delete the first one').onClick(() => {
27.           this.message.delete(0)
28.         })
29.       }
30.       .width('100%')
31.     }
32.     .height('100%')
33.   }
34. }

复制代码

装饰Set类型变量

   说明：
  从API version 11开始，@State支持Set类型。
  在下面的示例中，message类型为Set<number>，点击Button改变message的值，视图会随之刷新。

1. @Entry
2. @Component
3. struct SetSample {
4.   @State message: Set<number> = new Set([0, 1, 2, 3, 4])
6.   build() {
7.     Row() {
8.       Column() {
9.         ForEach(Array.from(this.message.entries()), (item: [number, string]) => {
10.           Text(`${item[0]}`).fontSize(30)
11.           Divider()
12.         })
13.         Button('init set').onClick(() => {
14.           this.message = new Set([0, 1, 2, 3, 4])
15.         })
16.         Button('set new one').onClick(() => {
17.           this.message.add(5)
18.         })
19.         Button('clear').onClick(() => {
20.           this.message.clear()
21.         })
22.         Button('delete the first one').onClick(() => {
23.           this.message.delete(0)
24.         })
25.       }
26.       .width('100%')
27.     }
28.     .height('100%')
29.   }
30. }

复制代码

State支持团结类型实例

@State支持团结类型和undefined和null，在下面的示例中，count类型为number | undefined，点击Button改变count的属性或者类型，视图会随之刷新。

1. @Entry
2. @Component
3. struct EntryComponent {
4.   build() {
5.     Column() {
6.       MyComponent()
7.     }
8.   }
9. }
11. @Component
12. struct MyComponent {
13.   @State count: number | undefined = 0;
15.   build() {
16.     Column() {
17.       Text(`count(${this.count})`)
18.       Button('change')
19.         .onClick(() => {
20.           this.count = undefined;
21.         })
22.     }
23.   }
24. }

复制代码

常见问题

使用箭头函数改变状态变量未生效

箭头函数体内的this对象，就是定义该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象。以是在该场景下， changeCoverUrl的this指向PlayDetailViewModel，而不是被装饰器@State署理的状态变量。
反例：

2. export default class PlayDetailViewModel {
3.   coverUrl: string = '#00ff00'
5.   changeCoverUrl= ()=> {
6.     this.coverUrl = '#00F5FF'
7.   }
9. }

复制代码

1. import PlayDetailViewModel from './PlayDetailViewModel'
3. @Entry
4. @Component
5. struct PlayDetailPage {
6.   @State vm: PlayDetailViewModel = new PlayDetailViewModel()
8.   build() {
9.     Stack() {
10.       Text(this.vm.coverUrl).width(100).height(100).backgroundColor(this.vm.coverUrl)
11.       Row() {
12.         Button('点击改变颜色')
13.           .onClick(() => {
14.             this.vm.changeCoverUrl()
15.           })
16.       }
17.     }
18.     .width('100%')
19.     .height('100%')
20.     .alignContent(Alignment.Top)
21.   }
22. }

复制代码

以是要将当前this.vm传入，调用署理状态变量的属性赋值。
正例：

2. export default class PlayDetailViewModel {
3.   coverUrl: string = '#00ff00'
5.   changeCoverUrl= (model:PlayDetailViewModel)=> {
6.     model.coverUrl = '#00F5FF'
7.   }
9. }

复制代码

1. import PlayDetailViewModel from './PlayDetailViewModel'
3. @Entry
4. @Component
5. struct PlayDetailPage {
6.   @State vm: PlayDetailViewModel = new PlayDetailViewModel()
8.   build() {
9.     Stack() {
10.       Text(this.vm.coverUrl).width(100).height(100).backgroundColor(this.vm.coverUrl)
11.       Row() {
12.         Button('点击改变颜色')
13.           .onClick(() => {
14.             let self = this.vm
15.             this.vm.changeCoverUrl(self)
16.           })
17.       }
18.     }
19.     .width('100%')
20.     .height('100%')
21.     .alignContent(Alignment.Top)
22.   }
23. }

复制代码

状态变量的修改放在构造函数内未生效

在状态管理中，类会被一层“署理”进行包装。当在组件中改变该类的成员变量时，会被该署理进行拦截，在更改数据源中值的同时，也会将变化通知给绑定的组件，从而实现观测变化与触发刷新。当开发者把状态变量的修改放在构造函数里时，此修改不会颠末署理（因为是直接对数据源中的值进行修改），即使修改乐成实行，也无法观测UI的刷新。
【反例】

1. @Entry
2. @Component
3. struct Index {
4.   @State viewModel: TestModel = new TestModel();
6.   build() {
7.     Row() {
8.       Column() {
9.         Text(this.viewModel.isSuccess ? 'success' : 'failed')
10.           .fontSize(50)
11.           .fontWeight(FontWeight.Bold)
12.           .onClick(() => {
13.             this.viewModel.query()
14.           })
15.       }.width('100%')
16.     }.height('100%')
17.   }
18. }
20. export class TestModel {
21.   isSuccess: boolean = false
22.   model: Model
24.   constructor() {
25.     this.model = new Model(() => {
26.       this.isSuccess = true
27.       console.log(`this.isSuccess: ${this.isSuccess}`)
28.     })
29.   }
31.   query() {
32.     this.model.query()
33.   }
34. }
36. export class Model {
37.   callback: () => void
39.   constructor(cb: () => void) {
40.     this.callback = cb
41.   }
43.   query() {
44.     this.callback()
45.   }
46. }

复制代码

上文示例代码将状态变量的修改放在构造函数内，界面开始时显示“failed”，点击后日志打印“this.isSuccess: true”说明修改乐成，但界面仍旧显示“failed”，未实现刷新。
【正例】

1. @Entry
2. @Component
3. struct Index {
4.   @State viewModel: TestModel = new TestModel();
6.   build() {
7.     Row() {
8.       Column() {
9.         Text(this.viewModel.isSuccess ? 'success' : 'failed')
10.           .fontSize(50)
11.           .fontWeight(FontWeight.Bold)
12.           .onClick(() => {
13.             this.viewModel.query()
14.           })
15.       }.width('100%')
16.     }.height('100%')
17.   }
18. }
20. export class TestModel {
21.   isSuccess: boolean = false
22.   model: Model = new Model(() => {
23.   })
25.   query() {
26.     this.model = new Model(() => {
27.       this.isSuccess = true
28.     })
29.     this.model.query()
30.   }
31. }
33. export class Model {
34.   callback: () => void
36.   constructor(cb: () => void) {
37.     this.callback = cb
38.   }
40.   query() {
41.     this.callback()
42.   }
43. }

复制代码

上文示例代码将状态变量的修改放在类的普通方法中，界面开始时显示“failed”，点击后显示“success”。
最后

有很多小同伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，终极浪费大量时间。以是有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习好坏常有须要的。 
这份鸿蒙（HarmonyOS NEXT）资料包罗了鸿蒙开发必掌握的核心知识要点，内容包罗了（ArkTS、ArkUI开发组件、Stage模型、多端摆设、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
盼望这一份鸿蒙学习资料能够给大家带来资助，有需要的小同伴自行领取，限时开源，先到先得~无套路领取！！
获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
鸿蒙（HarmonyOS NEXT）最新学习路线

•  HarmonOS基础技能
  

• HarmonOS就业必备技能 
  
  
  
•  HarmonOS多媒体技术
  

• 鸿蒙NaPi组件进阶
  

• HarmonOS高级技能
  

• 初识HarmonOS内核 
  
  
  
• 实战就业级设备开发
  

有了路线图，怎么能没有学习资料呢，小编也准备了一份团结鸿蒙官方发布条记整理收纳的一套体系性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包罗：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。
获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

 《鸿蒙开发基础》

• ArkTS语言
  
• 安装DevEco Studio
  
• 运用你的第一个ArkTS应用
  
• ArkUI声明式UI开发
  
• .……
  

 《鸿蒙开发进阶》

• Stage模型入门
  
• 网络管理
  
• 数据管理
  
• 电话服务
  
• 分布式应用开发
  
• 通知与窗口管理
  
• 多媒体技术
  
• 安全技能
  
• 使命管理
  
• WebGL
  
• 国际化开发
  
• 应用测试
  
• DFX面向将来设计
  
• 鸿蒙体系移植和裁剪定制
  
• ……
  

《鸿蒙进阶实战》

• ArkTS实践
  
• UIAbility应用
  
• 网络案例
  
• ……
  

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料
总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑衅，也是一个机会。只有积极应对变化，不停学习和提拔本身，他们才气在这个厘革的时代中立于不败之地。 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。