HarmonyOS鸿蒙-@State@Prop装饰器限制条件
一、组件Components级别的状态管理：@State组件内状态限制条件
1.@State装饰的变量必须初始化，否则编译期会报错。
// 错误写法，编译报错
@State count: number;
// 正确写法
@State count: number = 10; 2.嵌套属性的赋值观察不到。
// 嵌套的属性赋值观察不到
this.title.name.value = 'ArkUI';
3.数组项中属性的赋值观察不到。
// 嵌套的属性赋值观察不到
this.title.value = 6; 4.@State不支持装饰Function类型的变量，框架会抛出运行时错误。
5.@State装饰简单使用场景,实行Button组件的更新方法，实现按需刷新。
@Entry
@Component
struct MyComponent {
@State count: number = 0;
build() {
Button(`click times: ${this.count}`)
.onClick(() => {
this.count += 1;
})
}
} 6.@State支持联合类型和undefined和null
@State count: number | undefined = 0;
二、@Prop装饰器：父子单向同步 限制条件
1.概述
@Prop装饰的变量和父组件创建单向的同步关系：
[*] @Prop变量允许在当地修改，但修改后的变化不会同步回父组件。
[*] 当数据源更改时，@Prop装饰的变量都会更新，并且会覆盖当地所有更改。因此，数值的同步是父组件到子组件（所属组件)，子组件数值的变化不会同步到父组件。
2.限制条件
[*] @Prop装饰变量时会进行深拷贝，在拷贝的过程中除了根本类型、Map、Set、Date、Array外，都会丢失类型。例如PixelMap等通过NAPI提供的复杂类型，由于有部分实现在Native侧，因此无法在ArkTS侧通过深拷贝得到完备的数据。
[*] @Prop装饰器不能在@Entry装饰的自界说组件中使用。
3.当使用undefined和null的时候，建议显式指定类型，
遵循TypeScript类型校验，比如：
@Prop a : string | undefined = undefined是推荐的，
@Prop a: string = undefined 不推荐 4.嵌套传递层数,更建议使用@ObjectLink。
在组件复用场景，建议@Prop深度嵌套数据不要超过5层，
嵌套太多会导致深拷贝占用的空间过大以及GarbageCollection(垃圾回收)，
引起性能问题，此时更建议使用@ObjectLink。 5.@Prop装饰的变量是私有的，只能在组件内访问。
6. @Prop 观察不到第二层的变化, 对于这种嵌套场景，假如class是被@Observed装饰的，可以观察到class属性的变化，@Prop嵌套场景。
@Prop title: Model;
// 可以观察到第一层的变化
this.title.value = 'Hi';
// 观察不到第二层的变化
this.title.info.value = 'ArkUI'; 7.@Prop装饰的数据更新依靠其所属自界说组件的重新渲染，以是在应用进入背景后，@Prop无法刷新，推荐使用@Link取代。
8.@Prop装饰状态变量未初始化错误
@Prop需要被初始化，假如没有进行当地初始化的，则必须通过父组件进行初始化。
假如进行了当地初始化，那么是可以不通过父组件进行初始化的。
PS: 看代码中解释部分
@Observed
class Commodity {
public price: number = 0;
constructor(price: number) {
this.price = price;
}
}
@Component
struct PropChild1 {
@Prop fruit: Commodity; // 未进行本地初始化
build() {
Text(`PropChild1 fruit ${this.fruit.price}`)
.onClick(() => {
this.fruit.price += 1;
})
}
}
@Component
struct PropChild2 {
@Prop fruit: Commodity = new Commodity(1); // 进行本地初始化
build() {
Text(`PropChild2 fruit ${this.fruit.price}`)
.onClick(() => {
this.fruit.price += 1;
})
}
}
@Entry
@Component
struct Parent {
@State fruit: Commodity[] = ;
build() {
Column() {
Text(`Parent fruit ${this.fruit.price}`)
.onClick(() => {
this.fruit.price += 1;
})
// @PropChild1本地没有初始化，必须从父组件初始化
PropChild1({ fruit: this.fruit })
// @PropChild2本地进行了初始化，可以不从父组件初始化，也可以从父组件初始化
PropChild2()
PropChild2({ fruit: this.fruit })
}
}
} 9.使用a.b(this.object)形式调用，不会触发UI刷新
PS: 看代码中解释部分
class Score {
value: number;
constructor(value: number) {
this.value = value;
}
static changeScore1(score:Score) {
score.value += 1;
}
}
@Entry
@Component
struct Parent {
@State score: Score = new Score(1);
build() {
Column({space:8}) {
Text(`The value in Parent is ${this.score.value}.`)
.fontSize(30)
.fontColor(Color.Red)
Child({ score: this.score })
}
.width('100%')
.height('100%')
}
}
@Component
struct Child {
@Prop score: Score;
changeScore2(score:Score) {
score.value += 2;
}
build() {
Column({space:8}) {
Text(`The value in Child is ${this.score.value}.`)
.fontSize(30)
Button(`changeScore1`)
.onClick(()=>{
// 通过静态方法调用，无法触发UI刷新
// Score.changeScore1(this.score); -- 不推荐
// 通过赋值添加 Proxy 代理-- 推荐
let score1 = this.score;
Score.changeScore1(score1);
})
Button(`changeScore2`)
.onClick(()=>{
// 使用this通过自定义组件内部方法调用，无法触发UI刷新
//this.changeScore2(this.score);-- 不推荐
// 通过赋值添加 Proxy 代理 -- 推荐
let score2 = this.score;
this.changeScore2(score2);
})
}
}
} 谢谢各人!!!
文档中心
HarmonyOS鸿蒙-ArkUI状态管理--多种装饰器-CSDN博客
HarmonyOS鸿蒙- 一行代码自动换行技巧_鸿蒙换行-CSDN博客
HarmonyOS鸿蒙 - 判定手机号、身份证(正则表达式)_鸿蒙 正则表达式-CSDN博客
HarmonyOS鸿蒙- 延时实行_鸿蒙 耽误实行-CSDN博客
HarmonyOS鸿蒙- 跳转系统应用能力_鸿蒙系统应用跳转设置-CSDN博客
HarmonyOS鸿蒙-DevEco Studio工具_select a device first.-CSDN博客
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]