useState 换个名字叫 @State，仅此而已

哈喽，各位React小伙伴们～

上一篇咱们吃透了ArkTS的组件定义，搞懂了**@Component + struct其实就是换了写法的React函数组件**，不少小伙伴留言说"终于敢动手写第一个鸿蒙组件了"，太为大家开心啦！🥳

还记得上一篇结尾的预告吗？今天咱们聚焦ArkTS的核心重点------状态管理。按照HarmonyOS官方文档的UI范式要求，声明式UI的核心是"数据驱动UI"，而状态管理就是实现这一核心的关键，这和React的状态管理思想完全同频。对咱们React开发者来说，useState是天天用的"老朋友"，而ArkTS里的状态管理，本质就是"换了装饰器的useState"，全程对标，不用死记硬背，跟着实战走，5分钟就能上手官方规范的状态管理写法。

先给大家吃个定心丸：HarmonyOS官方文档明确提到，ArkTS的状态管理通过状态装饰器实现，核心目的是"让状态变化自动触发UI刷新"，这和React中useState的核心作用一模一样------咱们写React时，用useState声明状态，修改状态后UI自动重新渲染；ArkTS里，只是把useState换成了@State、@Link等装饰器，逻辑、用法几乎没区别，看完这篇，你就能轻松用官方规范写法管理ArkTS组件状态。

一、先对齐：官方规范｜ArkTS状态 vs React状态（核心对应）

先对照HarmonyOS官方文档，梳理一组核心对应关系，记好这个，后面学起来不迷路，也能快速对应官方文档的知识点，避免踩坑：

React 状态管理	ArkTS 状态管理（官方规范）	官方核心说明
useState（组件内部状态）	@State（组件内部状态）	官方基础状态装饰器，修饰组件内部可变化状态，变化时触发UI刷新
props + 回调（父子传参）	@Prop / @Link（父子组件状态）	@Prop单向传递，@Link双向绑定，实现父子组件状态同步
useContext（跨组件状态）	@Provide + @Consume（跨组件状态）	官方跨组件状态共享方案，无需逐层传递，直接跨层级同步
状态修改触发UI刷新	状态修改自动触发UI刷新	核心一致：均为"数据驱动UI"，状态变化无需手动操作DOM
简单说：按照官方文档的UI范式，ArkTS的状态管理没有新增复杂逻辑，只是把React中"钩子函数式"的状态声明，改成了"装饰器式"的状态声明。毕竟ArkTS本身就是在TypeScript基础上强化了状态管理能力，对咱们React开发者来说，相当于"换汤不换药"，复用React的状态管理经验，就能快速适配官方规范。

二、实战对比：从useState，写出官方规范的@State

咱们不搞复杂理论，严格参考官方文档示例，拿一个最常用的"计数器组件"举例（官方文档高频示例），一边对比React的useState写法，一边写ArkTS的@State写法，逐行对标，看完就能上手官方规范写法。

1. React写法（你天天写的useState，带TS）

ts 复制代码

import React, { useState } from 'react';

// 计数器组件（React函数组件，useState状态管理）
const Counter: React.FC = () => {
  // 核心：用useState声明组件内部状态，默认值0
  // 解构出状态变量count，和修改状态的方法setCount
  const [count, setCount] = useState<number>(0);

  // 状态修改方法：点击按钮，count+1
  const handleIncrement = () => {
    setCount(count + 1); // 修改状态，自动触发UI刷新
  };

  // 返回UI，使用count状态
  return (
    <div>
    当前值：{count}
    <button 
        onClick={handleIncrement}
      >
        点击加1
        </button>
        </div>
  );
};

export default Counter;

2. ArkTS写法（对应useState，官方规范@State）

重点参考官方文档：@State是组件内部状态的基础装饰器，修饰的变量必须初始化，修改状态时无需调用"set方法"，直接赋值即可触发UI刷新，结合前两篇的@Component+struct和@Builder写法，规范无偏差。

typescript 复制代码

// 定义组件：@Component + struct
@Component
export struct CounterDemo {
  // 核心：用@State声明组件内部状态（对应React的useState）
  // 官方要求：@State修饰的状态必须初始化，不可为undefined/null
  @State count: number = 0; // 对应React的useState<number>(0)

  // 主build函数，调用Builder渲染UI（官方组件必写）
  build() {
    Column() {
      // 使用状态：直接通过this.count调用（对应React的{count}）
      Text(`当前计数：${this.count}`)
        .fontSize(16)
        .margin({
          bottom: 12
        });

      // 绑定点击事件，触发状态修改
      Button('点击加1')
        .onClick(() => {
          this.count++
        })
        .padding({ top: 8, bottom: 8, left: 16, right: 16 })
        .border({ width: 1, color: '#d9d9d9', radius: 4 });
    }
    .padding(20)
    .width('100%')
    .justifyContent(FlexAlign.Center);
  }
}

3. 核心对比总结（重点！贴合官方文档，避坑关键）

对比完两种写法，是不是发现：逻辑完全没变化，只是"状态声明的写法"换了？结合官方文档，咱们提炼3个核心要点，帮你快速适配，避免踩官方规范的坑：

对比维度	React（useState）	ArkTS（@State，官方规范）
状态声明	useState<类型>(默认值)，解构出状态和set方法	@State 状态名: 类型 = 默认值（官方要求必须初始化）
状态修改	必须调用set方法（如setCount(count+1)）	直接赋值（如this.count +=1），官方推荐写法，自动触发刷新
使用场景	组件内部状态，不对外暴露	组件内部状态，官方文档明确：仅用于组件自身UI渲染驱动

三、官方重点：3个常用状态装饰器（React开发者快速适配）

参考HarmonyOS官方文档，咱们重点讲3个最常用的状态装饰器------@State、@Link、@Prop，这三个覆盖了80%的开发场景，全部对标React的相关写法，不用额外记新逻辑，复用React经验即可。

1. @State：对应useState（组件内部状态）

✅ 官方定义（简化版）：修饰组件内部的可变化状态，状态变化时自动触发当前组件及其子组件的UI刷新，是ArkTS状态管理的基础装饰器，也是咱们最常用的装饰器。

✅ 对标React：完全对应useState，唯一区别是"无需set方法，直接赋值"，比如React的setCount(count+1)，对应ArkTS的this.count +=1。

⚠️ 官方避坑点：@State修饰的状态必须初始化（如@State count: number = 0），不能省略默认值，否则会报编译错误（官方文档明确要求）。

2. @Prop：对应React的props单向传递（父子组件）

✅ 官方定义（简化版） ：用于父子组件之间的单向状态传递，父组件传递状态给子组件，子组件只能使用该状态，不能直接修改（修改会报错），若需修改，需父组件传递回调方法。

✅ 对标React：完全对应React中"父组件传props，子组件使用props，不直接修改props"的写法，比如React中子组件接收count，通过onChange回调通知父组件修改。

示例（贴合官方规范，简洁易懂）：

typescript 复制代码

// 父组件（传递状态给子组件）
@Component
export struct Parent {
  @State parentCount: number = 0;

  build() {
    Column() {
      // 传递状态给子组件：count={this.parentCount}（单向传递）
      Child({ count: this.parentCount })
      Button('父组件修改计数')
        .onClick(() => this.parentCount += 1)
        .margin({
          top: 12
        });
    }
  }
}

// 子组件（@Prop接收父组件状态，不能直接修改）
@Component
struct Child {
  // @Prop接收父组件传递的状态（对应React的props.count）
  @Prop count: number;

  build() {
    Text(`子组件接收的计数：${this.count}`)
      .fontSize(16);
    // ❌ 错误写法（官方禁止）：直接修改@Prop状态
    // Button('子组件修改')
    //   .onClick(() => this.count +=1);
  }
}

3. @Link：对应React的props+回调（父子双向绑定）

✅ 官方定义（简化版） ：用于父子组件之间的双向状态绑定，父组件传递状态给子组件，子组件可以直接修改该状态，修改后会同步回父组件，无需额外传递回调方法。

✅ 对标React：对应React中"父组件传count和setCount，子组件调用setCount修改状态"的写法，简化了回调传递的步骤，更简洁（官方推荐的双向绑定方案）。

示例（贴合官方规范，对比React）：

typescript 复制代码

// 父组件（传递@Link绑定的状态）
@Component
export struct Parent {
  @State parentCount: number = 0;

  build() {
    Column() {
      Text(`父组件计数：${this.parentCount}`)
      Child({ count: this.parentCount })
        .margin({
          top: 12
        });
    }
    .padding(20);
  }
}

// 子组件（@Link接收，可直接修改，同步回父组件）
@Component
struct Child {
  // @Link接收父组件状态（对应React的props.count + props.setCount）
  @Link count: number;

  build() {
    Button(`子组件修改计数（当前：${this.count}）`)
      .onClick(() => this.count += 1); // 直接修改，父组件状态同步变化
  }
}

四、实战小练习：自己写一个带状态的ArkTS组件（官方规范）

看完上面的内容，咱们来做一个小练习，巩固官方规范的状态管理写法（参考官方文档示例），结合前两篇的组件写法，5分钟就能上手：

组件名称：ToggleButton（切换按钮组件）；
状态需求：用@State声明isActive状态（默认false），点击按钮切换状态；
UI需求：状态为true时，按钮背景色#1677ff、文本"已激活"；状态为false时，背景色#fff、文本"未激活"；
规范要求：使用@Component+struct、@Builder封装UI、@State状态初始化（贴合官方所有核心规范）。

提示：结合@State状态修改和链式样式调用，参考官方文档的状态驱动UI写法，试着写一写，文末会附官方规范的参考代码哦～

五、系列预告（下一篇更干货）

今天咱们吃透了ArkTS官方规范的状态管理，搞懂了@State对应useState、@Prop/@Link对应父子组件传参，是不是发现：复用React的状态管理经验，完全能轻松适配官方UI范式？这也正是ArkTS的优势------在TypeScript基础上优化，让前端开发者能快速迁移经验，高效开发鸿蒙应用。

下一篇，咱们聚焦跨组件状态共享：《useContext 退场，@Provide + @Consume 登场》，带你吃透ArkTS官方推荐的跨组件状态方案，对比React的useContext，教你怎么不用逐层传递props，实现跨层级组件状态共享，全程贴合官方文档，不用死记硬背～

最后，说一句心里话

参考HarmonyOS官方文档就能发现，ArkTS的状态管理设计，其实是"简化了前端开发者的学习成本"------它没有新增复杂的逻辑，只是把React中已经成熟的状态管理思想，用更贴合鸿蒙UI范式的方式呈现（装饰器写法）。

咱们写React的经验，从来都不是负担，而是咱们快速上手鸿蒙开发的最大优势。尤其是ArkTS作为鸿蒙生态的主力开发语言，强化的状态管理和声明式UI能力，能让咱们的开发效率更高、代码更健壮。

💬 互动话题

你第一次用@State，是不是习惯性想写setCount？或者分不清@Prop和@Link的区别？评论区说下你的坑，我帮你避坑！新手也可以留言"打卡"，咱们一起跟着系列文章，轻松吃透ArkTS官方规范～

如果觉得这篇文章对你有帮助，欢迎点赞、在看、转发，关注我，跟着《React 开发者的鸿蒙入门指南》系列，轻松解锁ArkTS新技能～

【小练习参考代码】（下滑查看，完全贴合官方规范）

typescript 复制代码

@Component
export struct ToggleButton {
  // 官方规范：@State状态必须初始化
  @State isActive: boolean = false;

  // 主build函数
  build() {
    Button(this.isActive ? '已激活' : '未激活')
      .onClick(() => {
        // 官方规范：直接修改@State状态，自动触发UI刷新
        this.isActive = !this.isActive;
      })
      .backgroundColor(this.isActive ? '#1677ff' : '#fff')
      .fontColor(this.isActive ? '#fff' : '#333')
      .padding({ top: 8, bottom: 8, left: 16, right: 16 })
      .border({ width: 1, color: '#d9d9d9', radius: 4 });
  }
}

总结

本文核心围绕HarmonyOS官方文档UI范式的状态管理展开，全程对标React状态管理逻辑，提炼4个核心知识点，帮你快速掌握、避免踩坑，适配React开发者的学习习惯：

核心逻辑一致：ArkTS状态管理与React核心思想完全同频，均遵循"数据驱动UI"，状态变化自动触发UI刷新，无需手动操作DOM，对React开发者零陌生感。
3个常用状态装饰器（对标React，必记）：
- @State：对应React的useState，用于管理组件内部状态，官方要求必须初始化（不可为undefined/null），修改时直接赋值即可，无需set方法；
- @Prop：对应React的props单向传递，用于父子组件状态单向同步，子组件仅可使用状态，不可直接修改，修改需父组件传递回调；
- @Link：对应React的props+回调，用于父子组件状态双向绑定，子组件可直接修改状态，修改后自动同步回父组件，简化回调传递流程。
关键区别（重点避坑）：ArkTS用"装饰器"声明状态（@State/@Prop/@Link），React用钩子函数（useState/useContext）声明；ArkTS修改@State状态直接赋值，React必须调用set方法修改状态，这是最易混淆、最需注意的区别。
官方规范与实战要点：优先使用@State管理组件内状态，@Prop/@Link处理父子组件通信，避免状态过度耦合；所有状态装饰器的使用需贴合官方文档要求，尤其是@State的初始化规范，否则会报编译错误；组件实例化时，状态传参与前文对标示例一致，直接通过参数赋值初始化。

ArkTS状态管理本质是"换了装饰器的React状态管理"，复用React的状态管理经验，记住"装饰器对应钩子、直接赋值改状态、官方规范要遵循"，就能快速上手官方写法，高效适配鸿蒙开发。