企业官网建设流程全解析

一图读懂制作网站,助孕网站优化推广,做视频网站用什么好处,cn网站建设多少钱Local装饰器#xff1a;组件内部状态 为了实现对ComponentV2装饰的自定义组件中变量变化的观测#xff0c;开发者可以使用Local装饰器装饰变量。 在阅读本文档前#xff0c;建议提前阅读#xff1a;ComponentV2。常见问题请参考组件内状态变量常见问题。 说明 从API ve…Local装饰器组件内部状态为了实现对ComponentV2装饰的自定义组件中变量变化的观测开发者可以使用Local装饰器装饰变量。在阅读本文档前建议提前阅读ComponentV2。常见问题请参考组件内状态变量常见问题。说明从API version 12开始在ComponentV2装饰的自定义组件中支持使用Local装饰器。从API version 12开始该装饰器支持在元服务中使用。概述Local表示组件内部的状态使得自定义组件内部的变量具有观察变化的能力被Local装饰的变量无法从外部初始化因此必须在组件内部进行初始化。当被Local装饰的变量变化时会刷新使用该变量的组件。Local支持观测number、boolean、string、Object、class等基本类型以及Array、Set、Map、Date等内嵌类型。Local的观测能力仅限于被装饰的变量本身。当装饰简单类型时能够观测到对变量的赋值当装饰对象类型时仅能观测到对对象整体的赋值当装饰数组类型时能观测到数组整体以及数组元素项的变化当装饰Array、Set、Map、Date等内嵌类型时可以观测到通过API调用带来的变化。详见观察变化。Local支持null、undefined以及联合类型。状态管理V1版本State装饰器的局限性状态管理V1使用State装饰器定义组件中的基础状态变量该状态变量常用来作为组件内部状态在组件内使用。但由于State装饰器又能够从外部初始化因此无法确保State装饰变量的初始值一定为组件内部定义的值。class ComponentInfo { public name: string; public count: number; public message: string; constructor(name: string, count: number, message: string) { this.name name; this.count count; this.message message; } } Component struct Child { State componentInfo: ComponentInfo new ComponentInfo(Child, 1, Hello World); // 父组件传递的componentInfo会覆盖初始值 build() { Column() { Text(componentInfo.message is ${this.componentInfo.message}) } } } Entry Component struct Index { build() { Column() { Child({ componentInfo: new ComponentInfo(Unknown, 0, Error) }) } } }上述代码中可以通过在初始化Child自定义组件时传入新的值来覆盖作为内部状态变量使用的componentInfo。但Child自定义组件并不能感知到componentInfo从外部进行了初始化这不利于自定义组件内部状态的管理。因此推出Local装饰器表示组件的内部状态。Local装饰器说明Local变量装饰器说明装饰器参数无。可装饰的变量类型Object、class、string、number、boolean、enum等基本类型以及Array、Date、Map、Set等内嵌类型。支持null、undefined以及联合类型。装饰变量的初始值必须本地初始化不允许外部传入初始化。Local装饰变量传递传递规则说明从父组件初始化Local装饰的变量仅允许本地初始化无法从外部传入初始化。初始化子组件Local装饰的变量可以初始化子组件中Param装饰的变量。观察Local装饰变量变化使用Local装饰的变量具有观察变化的能力。当装饰的变量发生变化时会触发该变量绑定的UI组件刷新。当装饰的变量类型为boolean、string、number时可以观察到对变量赋值的变化。当Local装饰的变量类型为null、undefined以及联合类型变量类型改变后UI会随之刷新。如count类型为number | undefined初始count值为number类型将count值变为undefined类型UI会随之刷新。当装饰的变量类型为类对象时仅可以观察到对类对象整体赋值的变化无法直接观察到对类成员属性赋值的变化对类成员属性的观察依赖ObservedV2和Trace装饰器。注意API version 19之前Local无法和Observed装饰的类实例对象混用。API version 19及以后支持部分状态管理V1V2混用能力允许Local和Observed同时使用详情见状态管理V1V2混用文档。class RawObject { public name: string; constructor(name: string) { this.name name; } } ObservedV2 class ObservedObject { Trace public name: string; constructor(name: string) { this.name name; } } Entry ComponentV2 struct Index { Local rawObject: RawObject new RawObject(rawObject); Local observedObject: ObservedObject new ObservedObject(observedObject); build() { Column() { Text(${this.rawObject.name}) Text(${this.observedObject.name}) Button(change object) .onClick(() { // 对类对象整体的修改均能观察到 this.rawObject new RawObject(new rawObject); this.observedObject new ObservedObject(new observedObject); }) Button(change name) .onClick(() { // Local不具备观察类对象属性的能力因此对rawObject.name的修改无法观察到 this.rawObject.name new rawObject name; // 由于ObservedObject的name属性被Trace装饰因此对observedObject.name的修改能被观察到 this.observedObject.name new observedObject name; }) } } }当装饰简单类型数组时可以观察到数组整体或数组项的变化。当装饰的变量是嵌套类或对象数组时Local无法观察深层对象属性的变化。对深层对象属性的观测依赖ObservedV2与Trace装饰器。当装饰内置类型时可以观察到变量整体赋值及API调用带来的变化。类型可观察变化的APIArraypush, pop, shift, unshift, splice, copyWithin, fill, reverse, sortDatesetFullYear, setMonth, setDate, setHours, setMinutes, setSeconds, setMilliseconds, setTime, setUTCFullYear, setUTCMonth, setUTCDate, setUTCHours, setUTCMinutes, setUTCSeconds, setUTCMillisecondsMapset, clear, deleteSetadd, clear, deleteLocal使用限制Local装饰器存在以下使用限制Local装饰器只能在ComponentV2装饰的自定义组件中使用否则编译时报错。Local装饰的变量表示组件内部状态不允许从外部传入初始化否则编译时报错。Local与State对比Local与State的用法、功能对比如下用法StateLocal参数无。无。从父组件初始化可选。不允许外部初始化。观察能力能观测变量本身以及一层的成员属性无法深度观测。能观测变量本身深度观测依赖Trace装饰器。数据传递可以作为数据源和子组件中状态变量同步。可以作为数据源和子组件中状态变量同步。使用场景观测对象整体变化被ObservedV2与Trace装饰的类对象实例具有深度观测对象属性的能力。使用Local装饰对象可以达到观测对象本身变化的效果。例子参考华为中级课程——Local——观测对象整体变化装饰Array类型变量当装饰的对象是Array时可以观察到Array整体的赋值同时可以通过调用Array的接口push, pop, shift, unshift, splice, copyWithin, fill, reverse, sort更新Array中的数据。同时数组中某个元素的直接赋值也可以监测到。华为中级课程——Local——装饰Array类型变量装饰Date类型变量当装饰的对象是Date时可以观察到Date整体的赋值同时可通过调用Date的接口setFullYear, setMonth, setDate, setHours, setMinutes, setSeconds, setMilliseconds, setTime, setUTCFullYear, setUTCMonth, setUTCDate, setUTCHours, setUTCMinutes, setUTCSeconds, setUTCMilliseconds更新Date的属性。华为中级课程——Local——装饰Date类型变量装饰Map类型变量当装饰的对象是Map时可以观察到对Map整体的赋值同时可以通过调用Map的接口set, clear, delete更新Map中的数据。华为中级课程——Local——装饰Map类型变量装饰Set类型变量当装饰的对象是Set时可以观察到对Set整体的赋值同时可以通过调用Set的接口add, clear, delete更新Set中的数据。华为中级课程——Local——装饰Set类型变量联合类型Local支持null、undefined以及联合类型。在下面的示例中count类型为number | undefined初始count值为number类型将count值变为undefined类型UI会随之刷新。华为中级课程——Local——联合类型常见问题在状态管理V2中使用animateTo动画效果异常animateTo暂不支持直接在状态管理V2中动画前改变值。Entry ComponentV2 struct Index { Local w: number 50; // 宽度 Local h: number 50; // 高度 Local message: string Hello; build() { Column() { Button(change size) .margin(20) .onClick(() { // 在执行动画前存在额外的修改 this.w 100; this.h 100; this.message Hello World; this.getUIContext().animateTo({ duration: 1000 }, () { this.w 200; this.h 200; this.message Hello ArkUI; }) }) Column() { Text(${this.message}) } .backgroundColor(#ff17a98d) .width(this.w) .height(this.h) } } }上述代码中开发者预期的动画效果是绿色矩形从长宽100变为200字符串从Hello World变为Hello ArkUI。但由于当前animateTo与V2的刷新机制不兼容执行动画前的额外修改未生效实际显示的动画效果是绿色矩形从长宽50变为200字符串从Hello变为Hello ArkUI。从API version 22开始可以使用applySync接口实现预期的显示效果。import { UIUtils } from kit.ArkUI; Entry ComponentV2 struct Index { Local w: number 50; // 宽度 Local h: number 50; // 高度 Local message: string Hello; build() { Column() { Button(change size) .margin(20) .onClick(() { // 在执行动画前存在额外的修改 UIUtils.applySync(() { this.w 100; this.h 100; this.message Hello World; }) this.getUIContext().animateTo({ duration: 1000 }, () { this.w 200; this.h 200; this.message Hello ArkUI; }) }) Column() { Text(${this.message}) } .backgroundColor(#ff17a98d) .width(this.w) .height(this.h) } } }原理为使用applySync接口同步刷新闭包函数内的状态变量变化再执行原来的动画达成预期的效果。