鸿蒙 入门——ArkUI 自定义组件之间的状态装饰器小结（一）

引言

前面说了ArkTS 是在TypeScript基础上结合ArkUI框架扩展定制的，状态管理中的各种装饰器就是扩展的功能之一，可以让开发者通过声明式UI快速高效实现组件之间的数据同步，至于装饰器的原理就是利用APT机制生成一些中间的胶水代码，形如观察者模式的机制，自己帮你去更新数据实现数据同步，更多详情不在本篇文章讨论之中了，对了同样是对的整理，所以可以去看官方文档也行，下同。

一、状态管理概述

何为状态呢，如果页面多为静态界面那就没有引入状态的概念。如果希望构建一个动态的、有交互的界面，就需要引入“状态”的概念，简而言之就是用数据驱动UI的自动更新，当数据改动时无需做任何代码改变相应的UI 效果就会自动更新。自定义组件拥有变量，变量必须被装饰器装饰才可以成为状态变量，状态变量的改变会引起UI的渲染刷新。如果不使用状态变量，UI只能在初始化时渲染，后续将不会再刷新。 下图展示了State和View（UI）之间的关系。

二、基本术语

• 状态变量：被状态装饰器装饰的变量，状态变量值的改变会引起UI的渲染更新。示例：@State num: number = 1,其中，@State是状态装饰器，num是状态变量。
• 常规变量：没有被状态装饰器装饰的变量，通常应用于辅助计算。它的改变永远不会引起UI的刷新。以下示例中increaseBy变量为常规变量。
• 数据源/同步源：状态变量的原始来源，可以同步给不同的状态数据。通常意义为父组件传给子组件的数据。以下示例中数据源为count: 1。
• 命名参数机制：父组件通过指定参数传递给子组件的状态变量，为父子传递同步参数的主要手段。示例：CompA: ({ aProp: this.aProp })。
• 从父组件初始化：父组件使用命名参数机制，将指定参数传递给子组件。子组件初始化的默认值在有父组件传值的情况下，会被覆盖。
• 初始化子组件：父组件中状态变量可以传递给子组件，初始化子组件对应的状态变量。
• 本地初始化：在变量声明的时候赋值，作为变量的默认值。示例：@State count: number = 0。

父组件和子组件被没有传统的继承关系，只不过通常会把触发数据改变的组件称为父组件，比如说入口组件里使用了@State修饰了状态变量和另一个组件的@Prop 绑定了，那么这个入口组件就是父组件。

@Component
struct MyComponent {
  @State count: number = 0;
  private increaseBy: number = 1;

  build() {
  }
}

@Component
struct Parent {
  build() {
    Column() {
      // 从父组件初始化，覆盖本地定义的默认值
      MyComponent({ count: 1, increaseBy: 2 })
    }
  }
}

三、状态装饰器总览

ArkUI提供了多种装饰器，通过使用这些装饰器，状态变量不仅可以观察在组件内的改变，还可以在不同组件层级间传递，比如父子组件、跨组件层级，也可以观察全局范围内的变化。

• @State：@State装饰的变量拥有其所属组件的状态，可以作为其子组件单向和双向同步的数据源。当其数值改变时，会引起相关组件的渲染刷新。

• @Prop：@Prop装饰的变量可以和父组件建立单向同步关系，@Prop装饰的变量是可变的，但修改不会同步回父组件。

• @Link：@Link装饰的变量可以和父组件建立双向同步关系，子组件中@Link装饰变量的修改会同步给父组件中建立双向数据绑定的数据源，父组件的更新也会同步给@Link装饰的变量。

• @Provide/@Consume：@Provide/@Consume装饰的变量用于跨组件层级（多层组件）同步状态变量，可以不需要通过参数命名机制传递，通过alias（别名）或者属性名绑定。

• @Observed：@Observed装饰class，需要观察多层嵌套场景的class需要被@Observed装饰。单独使用@Observed没有任何作用，需要和@ObjectLink、@Prop联用。

• @ObjectLink：@ObjectLink装饰的变量接收@Observed装饰的class的实例，应用于观察多层嵌套场景，和父组件的数据源构建双向同步。

下篇文章，分别学习下各个装饰器的语法和用法，未完待续…