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

文章目录

- - @State装饰器的含义
  - @State装饰的变量的特点：
  - @State装饰器的作用
  - 代码示例
  - - 自动更新UI
    - 输入数据值传递
  - 总结
  - 本文参考华为开发者官网内容：

在鸿蒙（HarmonyOS）开发中，使用ArkTS（Ark TypeScript）进行界面开发时，状态管理是一个非常重要的概念。今天，我们将重点介绍@State装饰器，它是在组件内管理状态的一个强大工具。本文将带您了解@State注解的含义、用途，并通过代码示例来说明其用法。

@State装饰器的含义

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

@State装饰的变量的特点：

@State装饰的变量与子组件中的@Prop装饰变量之间建立单向数据同步,与@Link、@ObjectLink装饰变量之间建立双向数据同步。
@State装饰的变量生命周期与其所属自定义组件的生命周期相同。

@State装饰器的作用

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

管理组件内部的状态，如用户输入、组件配置等。
当状态发生变化时，自动更新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装饰器的用法，并在实际项目中灵活运用。如果您有任何疑问或建议，欢迎在评论区留言交流。