【鸿蒙开发】深入理解鸿蒙开发中的@State装饰器：掌握组件内状态管理

@State装饰器的含义

@State装饰的变量，或称为状态变量，@State是鸿蒙开发中的一个装饰器，用于声明组件内部的状态。当一个属性被@State装饰后，它将成为组件的响应式状态。这意味着，当该属性值发生变化时，组件会自动重新渲染，以反映最新的状态。

@State装饰的变量的特点：

• @State装饰的变量与子组件中的@Prop装饰变量之间建立单向数据同步,与@Link、@ObjectLink装饰变量之间建立双向数据同步。

• @State装饰的变量生命周期与其所属自定义组件的生命周期相同。

@State装饰器的作用

@State装饰器主要用于以下场景：

1. 管理组件内部的状态，如用户输入、组件配置等。
2. 当状态发生变化时，自动更新UI，无需手动操作DOM。

代码示例

自动更新UI

下面，我们通过一个简单的计数器组件来演示@State装饰器的用法。

import { Component, State } from '@arkts/core';
@Component
export default struct Counter {
  // 使用@State装饰器声明组件状态
  @State count: number = 0;
  // 方法：增加计数
  increment() {
    this.count += 1;
  }
  // 方法：减少计数
  decrement() {
    this.count -= 1;
  }
  build() {
    // UI结构：包含两个按钮和一个显示计数的文本
    Row() {
      Button("增加") {
        // 点击按钮时调用increment方法
        .onClick(() => this.increment())
      }
      Text(`${this.count}`)
      Button("减少") {
        // 点击按钮时调用decrement方法
        .onClick(() => this.decrement())
      }
    }
  }
}

在上面的代码中，我们定义了一个名为Counter的组件，其中包含一个名为count的状态。我们通过@State装饰器声明了count属性，使其成为响应式状态。当用户点击“增加”或“减少”按钮时，count的值会相应地增加或减少，而组件会自动重新渲染，显示最新的计数。

输入数据值传递

@Preview
@Component
struct LoginBottom {
  // 使用@State装饰器声明要传递的数据
  @State account: string = '';
  @State password: string = '';

  build() {
    Column() {
      Column() {
        TextInput({ placeholder: $r('app.string.account') })
          .maxLength(StyleConstants.INPUT_ACCOUNT_LENGTH)
          .type(InputType.Number)
          .inputStyle()
          .onChange((value: string) => {
            // 输入框的内容发生变化后，将值进行赋值到@Status声明的属性中
            this.account = value;
          })

        Line()
          .width(StyleConstants.FULL_PARENT)
          .height($r('app.float.line_height'))
          .margin({
            left: $r('app.float.line_margin_left'),
            right: $r('app.float.line_margin_right')
          })
          .backgroundColor($r('app.color.line_color'))

        TextInput({ placeholder: $r('app.string.password') })
          .maxLength(StyleConstants.INPUT_PASSWORD_LENGTH)
          .type(InputType.Password)
          .inputStyle()
          .onChange((value: string) => {
            // 值输入之后，将数据赋值进去
            this.password = value;
          })
      }
      .backgroundColor(Color.White)
      .borderRadius($r('app.float.login_input_radius'))

      Row() {
        Text($r('app.string.message_login'))
          .blueTextStyle()
          .onClick(() => {
            CommonUtils.showToastContent($r('app.string.incomplete_toast'));
          })
        Text($r('app.string.forgot_password'))
          .blueTextStyle()
          .onClick(() => {
            CommonUtils.showToastContent($r('app.string.incomplete_toast'));
          })
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width(StyleConstants.FULL_PARENT)
      .margin({ top: $r('app.float.forgot_margin_top') })
      .padding({
        left: $r('app.float.forgot_padding_left'),
        right: $r('app.float.forgot_padding_right')
      })

      Button($r('app.string.login'))
        .id(CommonConstants.LOGIN_BUTTON_ID)
        .width(StyleConstants.FULL_PARENT)
        .height($r('app.float.login_button_height'))
        .fontSize($r('app.float.normal_text_size'))
        .fontWeight(FontWeight.Medium)
        .backgroundColor($r('app.color.login_button_color'))
        .margin({
          top: $r('app.float.login_button_top'),
          bottom: $r('app.float.login_button_bottom')
        })
        .onClick(() => {
          // 点击登录按钮，将两个值的数据都传递到方法中，进行登录方法调用
          CommonUtils.loginArkTS(this.account, this.password);
        })
      Text($r('app.string.register_account'))
        .fontColor($r('app.color.blue_text_color'))
        .fontSize($r('app.float.normal_text_size'))
        .fontWeight(FontWeight.Medium)
        .onClick(() => {
          CommonUtils.showToastContent($r('app.string.incomplete_toast'));
        })
    }
    .padding({
      left: $r('app.float.login_button_left'),
      right: $r('app.float.login_button_right'),
    })
    .backgroundColor($r('app.color.background'))
    .height(StyleConstants.LOGIN_BOTTOM_HEIGHT)
  }
}

在上面的代码中，我们定义了一个名为LoginButtom的组件，其中包含名为account和password的变量。我们通过@State装饰器声明了属性，使其成为响应式状态。当用户输入用户名和密码时，account和password的值就会相应的重新赋值，在点击登录按钮时，就会将account和password的值传递到登录方法中。

总结

@State装饰器是鸿蒙开发中管理组件内部状态的有力工具。通过@State，我们可以轻松地实现响应式数据绑定，让组件的UI随着状态的变化而自动更新。掌握@State的使用，将有助于您更好地进行鸿蒙应用开发。
希望本文能帮助您理解@State装饰器的用法，并在实际项目中灵活运用。如果您有任何疑问或建议，欢迎在评论区留言交流。

本文参考华为开发者官网内容：

@State装饰器：组件内状态