鸿蒙应用开发--状态管理

在鸿蒙开发中，我们使用普通变量所构建的页面为静态页面。如果希望构建一个动态的、有交互的界面，就需要引入"状态"的概念。

上面的示例中，用户与应用程序的交互触发了文本状态变更 ，状态变更引起了UI渲染，UI从"Hello World"变更为"Hello ArkUI"。

1. 基本概念

1.1 状态管理机制

在声明式UI编程框架中，UI是程序状态的运行结果，用户构建了一个UI模型，其中应用的运行时的状态是参数。当参数改变时，UI作为返回结果，也将进行对应的改变。这些运行时的状态变化所带来的UI的重新渲染，在ArkUI中统称为状态管理机制。

简单来说，一些特殊的变量（数据）就是参数，当我们的数据发生改变时，参数改变，UI也重新渲染来刷新页面。而这些特殊变量，就是状态变量。

1.2 常规变量和状态变量

常规变量：没有被状态装饰器装饰的变量，通常应用于辅助计算。它的改变不会引起UI的刷新。

状态变量：被状态装饰器装饰的变量 ，状态变量值的改变会引起UI的渲染更新。

ArkTS 复制代码

@Entry
@Component
struct Index {
  //由@State状态装饰器装饰，值改变可以引起 UI渲染
  @State message: string = 'Hello World'
  //普通变量，值改变不能引起 UI渲染
  message1:string ='Hello World'

  build() {
    Column() {
      Text(this.message)
        .fontSize(30)
      //点击后值改变，显示的值也改变
      Button('Click me')
        .onClick(()=>{
          this.message='Hello ArkUi'
        })
      Text(this.message1)
        .fontSize(30)
      //点击后值改变，显示的值不改变
      Button('Click me')
        .onClick(()=>{
          this.message1='Hello ArkUi'
        })
    }
    .height('100%')
    .width('100%')
  }
}

Tips:

不是所有变量都需要设置为状态变量，比如：一些不需要显示，用来辅助计算的变量
一些复杂数据类型，比如：对象数组，如果想要引起UI重新渲染，你需要将整个对象重新赋值才能引起UI渲染

2. 常用状态变量装饰器介绍

2.1 状态装饰器总览

由上图可知，状态装饰器大致分为两种：

Components:组件级的状态装饰器，可以管理组件内或不同组件之间的状态变量。
Application:应用级的状态装饰器，可以管理在不同页面，或不同UIAbility的状态变量。

Tips：状态装饰器的作用不仅仅是将普通变量转换成状态变量，它们各自还有一些特殊的功能

2.2 组件级的状态装饰器简单介绍

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

@Prop：@Prop装饰的变量可以和父组件建立单向同步关系。一般用来接收父组件中由@State传递过来且不需要修改的值，在组件内修改不会同步回父组件。

@Link：@Link装饰的变量可以和父组件建立双向同步关系。和@Prop一样，用来接收父组件中由@State传递过来的值，但由@Link装饰的变量在子组件内的修改会同步修改父组件的值。

@Provide/@Cunsume：用于跨层级的组件通讯。双向同步

@Observed 与 @ObjectLink：适用于需要双向数据同步的复杂数据结构，如嵌套对象、对象数组、二维数组等场景。

interface 改为类 class 并使用 @Observed 修饰
通过 new 的方式完成数据的创建（通过 new 的方式来监测数据的改变）
状态修饰符改为 @ObjectLink

- 在父组件修改数据：不需要 splice
- 也可以在子组件修改数据