一、状态管理基础流程

ArkTS 页面是数据驱动视图的模式，整体分为三部分：状态 State、渲染 render、UI 界面，形成完整闭环。

1.页面初始化时，读取状态变量，执行 build 渲染出页面 UI

2.用户点击、操作组件触发点击事件，在事件里修改状态数据

3.一旦被@State修饰的变量发生改变，框架会自动重新渲染页面，更新展示内容

简单来说：数据发生变化，页面就会自动跟着更新，不用我们手动写刷新页面的代码。

二、普通变量和状态变量对比

（1） 普通变量

直接在组件内定义，不加任何装饰器，只会在页面第一次加载的时候渲染一次。就算后续代码修改了变量的值，框架不会感知到变化，页面不会刷新。

@Entry
@Component
struct Index {
  // 普通变量
  text: string = "初始文字"
  build() {
    Column() {
      Text(this.text)
      Button("点击修改文字")
        .onClick(() => {
          this.text = "修改后的文字"
          console.log(this.text)
        })
    }
  }
}

运行效果：点击按钮后控制台能打印出新文字，但页面上的 Text 内容完全不变。

适用场景：页面全程固定、不会被修改的静态文字、常量，用普通变量可以减少性能消耗。

（2） @State 状态变量

在变量前添加@State装饰器，告诉框架需要监听这个变量。只要变量重新赋值，页面就会自动刷新，同步最新数据。

@Entry
@Component
struct Index {
  // 状态变量，添加@State修饰
  @State text: string = "初始文字"
  build() {
    Column() {
      Text(this.text)
      Button("点击修改文字")
        .onClick(() => {
          this.text = "修改后的文字"
        })
    }
  }
}

运行效果：点击按钮，页面文字立刻同步更新，交互效果符合预期。

适用场景：所有会随用户操作改变的数据，比如切换文本、计数器数字、输入框内容、弹窗提示文字等。

三、实操小案例：简易计数器

用计数器可以更直观感受到状态变量的作用，完整代码如下：

@Entry
@Component
struct CountPage {
  @State count: number = 0
  build() {
    Column({ space: 20 }) {
      Text(`当前数字：${this.count}`).fontSize(28)
      Row({ space: 15 }) {
        Button("-1").onClick(() => {
          this.count -= 1
        })
        Button("+1").onClick(() => {
          this.count += 1
        })
      }
    }
    .padding(30)
  }
}

效果：点击加减按钮，页面上的数字实时变化；如果删掉@State，无论怎么点击数字都不会变动。

四、学习中遇到的常见问题

1. 忘记写@State装饰器，修改变量页面无变化，这是新手最容易犯的错误；
2. @State只监听直接赋值，如果变量是数组、对象，只修改内部属性不会刷新页面，需要整体重新赋值；
3. 不要所有变量都加@State，固定不变的静态内容用普通变量即可，避免多余性能开销；
4. @State只能写在组件 struct 内部、build 函数外面，写在 build 里会直接报错。

五、学习总结

1. 核心区别：普通变量仅初始化渲染一次，修改后页面不更新；@State状态变量会被框架监听，数据变更自动刷新 UI
2. @State是做交互页面的基础，几乎所有带点击、切换效果的页面都需要用到
3. 开发时做好区分，静态数据用普通变量，动态变化的数据使用@State，兼顾代码简洁和页面性能