鸿蒙UI开发快速入门 —— part06:组件状态管理之@State装饰器

1、说在前面的话

在前五个章节中，我们构建的页面基本都是静态的页面，如果希望构建一个动态的、有交互的界面，就需要引入“状态”的概念，以便随着用户的交互，界面随着发生变化，例如如下的动图：

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

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

自定义组件拥有变量，变量必须被装饰器装饰才可以成为状态变量，状态变量的改变会引起UI的渲染刷新。如果不使用状态变量，UI只能在初始化时渲染，后续将不会再刷新。下图展示了State和View（UI）之间的关系。

• View(UI)：UI渲染，指将build方法内的UI描述和@Builder装饰的方法内的UI描述映射到界面。

• State：状态，指驱动UI更新的数据。用户通过触发组件的事件方法，改变状态数据。状态数据的改变，引起UI的重新渲染。

1.1、一些基本概念

• 状态变量

被状态装饰器(@State)装饰的变量，状态变量值的改变会引起UI的渲染更新。示例如下，其中@State是状态装饰器，num是状态变量。

@Componentstruct MyComponent {
    @State num: number = 1;  build() {
    // ...  }}

• 常规变量

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

• 数据源/同步源

状态变量的原始来源，可以同步给不同的状态数据。通常意义为父组件传给子组件的数据。示例代码如下，以下示例中数据源为count: 1。

@Componentstruct MyComponent {
    @State count: number = 0;  build() {
    }}@Componentstruct Parent {
    build() {
      Column() {
        // 从父组件初始化，覆盖本地定义的默认值      MyComponent({ count: 1})    }  }}<