HarmonyOS 鸿蒙Next 对ArkTS语法的探索实践及部分文档整理

HarmonyOS 鸿蒙Next 对ArkTS语法的探索实践及部分文档整理

1. 装饰器语法的作用的实践

个人理解：装饰器的作用，简化了改变变量值，通知UI更新的过程。以前是需要先拿到值、改变值、把值赋给UI对象、UI更新；现在是改变值、设置UI更新方式（装饰器），其他过程，在底层自动调用了。

[@Component](/user/Component)
class Page_YF {
  [@State](/user/State) message: string = '更新次数：'
  [@State](/user/State) ZS_shuzi: number = 0
  private WZS_shuzi: number = 0
  
  build() {
    Row() {
      Column() {
        Text(`对装饰器作用的探索实践。点击按钮，观察次数是否改变，以判断UI是否更新。state装饰器的变量，会更新所在组件（包括子组件）。未用state装饰的变量，值会改变，但是不会更新UI`)
          .fontSize(15)
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#ffb7c6fd')
          .width('100%')
          .border({ radius: { topLeft: 10, topRight: 10, bottomLeft: 10, bottomRight: 10 }})
          .height(100)
          .margin({ top: 10 })
        
        Text(`${message}:使用装饰器(${ZS_shuzi})`)
          .fontSize(15)
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#ff3a65fc')
          .width('100%')
          .border({ radius: { topLeft: 80, topRight: 80, bottomLeft: 80, bottomRight: 80 }})
          .height(50)
          .margin({ top: 10 })
        
        Text(`${message}:未使用装饰器(${WZS_shuzi}))`)
          .fontSize(15)
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#ff3a65fc')
          .width('100%')
          .border({ radius: { topLeft: 80, topRight: 80, bottomLeft: 80, bottomRight: 80 }})
          .height(50)
          .margin({ top: 10 })
        
        Text(`${message}:使用装饰器(${ZS_shuzi}) 未使用装饰器(${WZS_shuzi})`)
          .fontSize(15)
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#ff3a65fc')
          .width('100%')
          .border({ radius: { topLeft: 80, topRight: 80, bottomLeft: 80, bottomRight: 80 }})
          .height(50)
          .margin({ top: 10 })
        
        Button('点击只运算装饰器变量 UI更新状态')
          .margin({ top: 20 })
          .onClick(() => {
            ZS_shuzi += 1
          })
        
        Button('点击只运算未装饰器变量 UI更新状态')
          .margin({ top: 20 })
          .onClick(() => {
            WZS_shuzi += 1
          })
        
        Button('点击运算装饰器、未装饰器变量 UI更新状态')
          .margin({ top: 20 })
          .onClick(() => {
            WZS_shuzi += 1
            ZS_shuzi += 1
          })
      }
    }
    .height(50)
  }

这是ArkTS语法的，因为选项没有TS、ArkTS选项，就只能选Javascript

1. 部分语法整理（stage模型）

• 关键字

  • $: $(), 表示需要将（）中的代码运行后的最终结果作为参数传递，类似转义符。即需要把引用当作值来使用（在生成器函数中<build()>,ArkTS表达式仅允许在字符串(${expression})、if/else条件语句、ForEach的参数以及组件的参数中使用）。
  • $$: 通过$$双向绑定变量，通常应用于状态值频繁改变的变量。$$绑定的变量变化时，仅渲染刷新当前组件，提高渲染速度。
  • struct：自定义组件可以基于struct实现，不能有继承关系，对于struct的实例化，可以省略new。
  • 装饰器：装饰器给被装饰的对象赋予某一种能力，其不仅可以装饰类或结构体，还可以装饰类的属性。多个装饰器可以叠加到目标元素上，定义在同一行中或者分开多行，推荐分开多行定义。
  • build函数：自定义组件必须定义build函数，并且禁止自定义构造函数。build函数满足Builder构造器接口定义，用于定义组件的声明式UI描述。
  • 链式调用：以 “.” 链式调用的方式配置UI组件的属性方法、事件方法等。
  • if/else(){}: 进行条件渲染，动态创建界面的方式。
  • ForEach(){}: 循环渲染，动态创建界面的方式。
  • LazyForEach(){}: 循环渲染，按需迭代数据，动态创建界面的方式。

• 功能类

  • AppStorage还提供用于业务逻辑实现的API，用于添加、读取、修改和删除应用程序的状态属性，此API所做的更改会导致修改的状态数据同步到UI组件上进行UI更新。
  • PersistentStorage类提供了一些静态方法用来管理应用持久化数据，可以将特定标记的持久化数据链接到AppStorage中，并由AppStorage接口访问对应持久化数据，或者通过@StorageLink装饰器来访问对应key的变量。
  • Environment是框架在应用程序启动时创建的单例对象，它为AppStorage提供了一系列应用程序需要的环境状态属性，这些属性描述了应用程序运行的设备环境。

• 装饰器

  • @Component：装饰struct，结构体在装饰后具有基于组件的能力，需要实现build方法来创建UI。
  • @Entry： 装饰struct，组件被装饰后作为页面的入口，页面加载时将被渲染显示。
  • @Preview：装饰struct， 用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行实时预览，加载页面时，将创建并显示@Preview装饰的自定义组件。
  • @State: 修饰的状态数据被修改时会触发组件的build方法进行UI界面更新。
  • @Prop: 修改后的状态数据用于在父组件和子组件之间建立单向数据依赖关系。修改父组件关联数据时，更新当前组件的UI。
  • @Link: 父子组件之间的双向数据绑定，父组件的内部状态数z据作为数据源，任何一方所做的修改都会反映给另一方。
  • @Observed: 应用于类，表示该类中的数据变更被UI页面管理。
  • @ObjectLink: 装饰的状态数据被修改时，在父组件或者其他兄弟组件内与它关联的状态数据所在的组件都会更新UI。
  • @Consume: 装饰的变量在感知到@Provide装饰的变量更新后，会触发当前自定义组件的重新渲染。
  • @Provide: 作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。
  • @StorageLink：@StorageLink(name)的原理类似于@Consume(name)，不同的是，该给定名称的链接对象是从AppStorage中获得的，在UI组件和AppStorage之间建立双向绑定同步数据。
  • @StorageProp：@StorageProp(name)将UI组件属性与AppStorage进行单向同步，AppStorage中值的更改会更新组件中的属性，但UI组件无法更改AppStorage中的属性值。
  • @Watch：用于监听状态变量的变化，给状态变量增加一个@Watch装饰器，通过@Watch注册一个回调方法onChanged， 当状态变量count被改变时， 触发onChanged回调。
  • @LocalStorageLink:key值为LocalStorage中的属性键值，与LocalStorage建立双向数据绑定。当创建包含@LocalStorageLink的状态变量的组件时，该状态变量的值将会使用LocalStorage中的值进行初始化。如果LocalStorage中未定义初始值，将使用@LocalStorageLink定义的初始值。在UI组件中对@LocalStorageLink的状态变量所做的更改将同步到LocalStorage中，并从LocalStorage同步到Ability下的组件中。
  • @LocalStorageProp:key值为LocalStorage中的属性键值，与LocalStorage建立单向数据绑定。当创建包含@LocalStorageProp的状态变量的组件时，该状态变量的值将使用LocalStorage中的值进行初始化。LocalStorage中的属性值的更改会导致当前Ability下的所有UI组件进行状态更新。
  • @Builder：该装饰器可以修饰一个函数，此函数可以在build函数之外声明，并在build函数中或其他@Builder修饰的函数中使用，从而实现在一个自定义组件内快速生成多个布局内容。
  • @BuilderParam8+：用于修饰自定义组件内函数类型的属性（例如：@BuilderParam noParam: () => void），并且在初始化自定义组件时被@BuilderParam修饰的属性必须赋值。
  • @Styles：ArkTS为了避免开发者对重复样式的设置，通过@Styles装饰器可以将多个样式设置提炼成一个方法，直接在组件声明时调用，通过@Styles装饰器可以快速定义并复用自定义样式。当前@Styles仅支持通用属性。
  • @Extend：@Extend装饰器将新的属性方法添加到Text、Column、Button等内置组件上，通过@Extend装饰器可以快速地扩展原生组件。@Extend不能定义在自定义组件struct内。
  • @CustomDialog：@CustomDialog装饰器用于装饰自定义弹窗组件，使得弹窗可以动态设置内容及样式。

• 装饰器用法配套

  • @Link、@State、@Prop：针对整个变量（对象），当变量（对象）中的某个元素发生改变时，会将变量所在的整个UI（父组件及父组件下的其他子组件）都重新渲染，不会只重新渲染发生改变的元素所对应的子组件。针对具有上下关系的父、子（只有相邻两个级别间）组件。使用域为当前页面。
  • @Observed和ObjectLink：针对整个变量（对象），当变量（对象）中的某个元素发生改变时，只重新渲染发生改变的元素所对应的子组件。针对具有上下关系的父、子（只有相邻两个级别间）组件。使用域为当前页面。
  • @Consume和@Provide：与@Link、@State效果类似，针对具有相连关系的子、孙（更多的层次级别，两个层次或以上）组件。使用域为当前页面。
  • @StorageLink、@StorageProp：与@Link、@Prop类似，只是变量存储位置为AppStorage，使用域为整个应用。
  • @LocalStorageLink、@LocalStorageProp：与@Link、@Prop类似，只是变量存储位置为LocalStorage，使用域为整个Ability。
  • @Builder、@BuilderParam8+：针对自定义组件，在组件实例中，为每个组件实例添加不一样的功能。此装饰器修饰的属性值可为@Builder装饰的函数，开发者可在初始化自定义组件时对此属性进行赋值，为自定义组件增加特定的功能。使用域为当前页面。

错误的地方，欢迎在下方纠正。