说实话刚开始接触 HarmonyOS6 PC 开发的时候我对 ArkUI 这套声明式 UI 框架是持怀疑态度的。毕竟写了这么多年前端React、Vue 那一套状态驱动的思路早就烂熟于心了换个平台还能玩出什么花样但真正上手之后我发现 State 这个装饰器还真有点东西——它比我预想的要简洁得多同时又足够强大。今天就来好好聊聊 State这个你在 HarmonyOS6 PC 开发中绝对绕不开的核心机制。什么是 State一句话讲清楚State 是 ArkUI 框架里最基础的状态管理装饰器。你给一个变量加上 State就意味着告诉框架“嘿这个变量的值变化了你得帮我把界面上用到它的地方重新画一遍。”就这么简单。没有额外的 store 要配置没有 dispatch 要调用没有 mutation 要写。变量变了UI 自动更新。来看一个最基础的例子——一个计数器EntryComponentstruct StateBasicDemo{Statecounter:number0build(){Column(){Text(this.counter.toString()).fontSize(56).fontWeight(FontWeight.Bold).fontColor(#007DFF)Row({space:10}){Button(-1).onClick((){this.counter-1})Button(1).onClick((){this.counter1})}}}}点击按钮修改counter的值界面上的数字就会自动刷新。不需要手动调用什么setState也不需要搞个notifyListeners()。对 ArkTS 来说赋值操作本身就触发了更新。触发机制赋值即更新但有个前提这里得说清楚一个关键点。State 能监听到变化并触发 UI 刷新靠的是对变量赋值操作的拦截。当你对 State 修饰的变量执行this.counter 10这样的操作时框架内部会做两件事一是更新变量的值二是把当前组件标记为脏dirty然后在下一帧重新执行build()方法。但这个机制有个很重要的前提基本类型靠值比较对象类型靠引用比较。什么意思呢对于number、string、boolean这些基本类型只要值变了就触发更新。但对于对象和数组框架比较的是引用地址。你直接修改对象的某个属性比如this.user.name 新名字对象引用没变框架就认为没变化UI 不会更新。这个问题后面会专门写一篇文章来聊这里先记住基本类型放心用对象类型有讲究。State 支持哪些类型坦白讲State 对数据类型的支持比我想的要宽泛得多。简单梳理一下可以用的类型基本类型number、string、boolean枚举类型对象类型class 实例或字面量对象但更新需要整体替换数组类型Array支持push、pop、splice等原地操作Map、Set等集合类型Date对象不能用的类型Promise异步对象没法做响应式追踪undefined和null但可以作为联合类型的一部分函数类型实际在 PC 端开发中最常用的是基本类型和数组。数组特别好用因为 ArkUI 对数组的原地修改做了特殊处理push一个新元素进去列表 UI 就会自动追加渲染不需要像对象那样整体替换。在 PC 端开发中的实际场景PC 端应用和移动端不太一样界面更复杂、交互更丰富。State 在 PC 场景下有几个特别典型的应用场景我来展开说说。场景一文本输入实时预览PC 端经常有左侧编辑、右侧预览的需求比如 Markdown 编辑器或者富文本工具。用 State 来做特别顺手EntryComponentstruct TextPreviewDemo{StateinputText:stringStatecharCount:number0build(){Row(){// 左侧编辑区Column(){Text(编辑区).fontSize(14).fontWeight(FontWeight.Medium)TextInput({text:this.inputText,placeholder:在这里输入内容...}).onChange((value:string){this.inputTextvaluethis.charCountvalue.length}).height(200).margin({top:8})}.width(50%).padding(16)// 右侧预览区Column(){Text(实时预览).fontSize(14).fontWeight(FontWeight.Medium)Text(this.inputText||预览内容将显示在这里...).fontSize(14).fontColor(this.inputText?#333333:#999999).margin({top:8})Text(字数:${this.charCount}).fontSize(12).fontColor(#999999).margin({top:8})}.width(50%).padding(16)}.width(100%).height(100%).backgroundColor(#F5F6FA)}}每次键盘输入都会触发inputText更新右侧预览区和字数统计同步刷新。在 PC 大屏上这种左右分栏的实时反馈体验非常流畅。场景二开关状态切换PC 端的设置页面经常有一排开关需要管理。用 State 来管理这些布尔值代码干净利落EntryComponentstruct SettingsDemo{StatedarkMode:booleanfalseStatenotifications:booleantrueStateautoSave:booleantrueStatecompactLayout:booleanfalsebuild(){Column(){Text(应用设置).fontSize(18).fontWeight(FontWeight.Bold)Column({space:12}){Row(){Text(深色模式).fontSize(14).layoutWeight(1)Toggle({type:ToggleType.Switch,isOn:this.darkMode}).selectedColor(#007DFF).onChange((isOn:boolean){this.darkModeisOn})}Row(){Text(消息通知).fontSize(14).layoutWeight(1)Toggle({type:ToggleType.Switch,isOn:this.notifications}).selectedColor(#007DFF).onChange((isOn:boolean){this.notificationsisOn})}Row(){Text(自动保存).fontSize(14).layoutWeight(1)Toggle({type:ToggleType.Switch,isOn:this.autoSave}).selectedColor(#007DFF).onChange((isOn:boolean){this.autoSaveisOn})}Row(){Text(紧凑布局).fontSize(14).layoutWeight(1)Toggle({type:ToggleType.Switch,isOn:this.compactLayout}).selectedColor(#007DFF).onChange((isOn:boolean){this.compactLayoutisOn})}}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(12).margin({top:12})// 状态汇总Column(){Text(当前配置).fontSize(14).fontWeight(FontWeight.Medium)Text(主题:${this.darkMode?深色:浅色}).fontSize(13).margin({top:4})Text(通知:${this.notifications?已开启:已关闭}).fontSize(13).margin({top:2})Text(自动保存:${this.autoSave?已开启:已关闭}).fontSize(13).margin({top:2})Text(布局:${this.compactLayout?紧凑:标准}).fontSize(13).margin({top:2})}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(12).margin({top:10})}.width(100%).height(100%).backgroundColor(#F5F6FA).padding(16)}}四个开关各自独立下面还有个状态汇总区实时反映当前配置。这种模式在 PC 端的偏好设置里太常见了用 State 来管理完全不需要额外的状态管理方案。场景三颜色选择器与动态主题这个场景更有意思。PC 端的个性化定制需求比较强用户可能想自己选主题色。用 State 配合色值数组几行代码就能搞定EntryComponentstruct ColorPickerDemo{StateselectedColor:string#007DFFStatepreviewText:string主题预览文字privatepresetColors:string[][#FF6B6B,#FF8E53,#FFD93D,#6BCB77,#4D96FF,#9B59B6,#007DFF,#333333]build(){Column(){Text(选择主题色).fontSize(18).fontWeight(FontWeight.Bold)// 颜色网格Flex({wrap:FlexWrap.Wrap,justifyContent:FlexAlign.Center}){ForEach(this.presetColors,(color:string){Column().width(48).height(48).backgroundColor(color).borderRadius(12).margin(6).border({width:this.selectedColorcolor?3:0,color:#333333}).onClick((){this.selectedColorcolor})})}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(12).margin({top:12})// 预览卡片Column(){Text(this.previewText).fontSize(20).fontWeight(FontWeight.Bold).fontColor(this.selectedColor)Button(示例按钮).backgroundColor(this.selectedColor).fontColor(#FFFFFF).margin({top:12})}.width(100%).padding(24).backgroundColor(#FFFFFF).borderRadius(12).margin({top:10}).alignItems(HorizontalAlign.Center)}.width(100%).height(100%).backgroundColor(#F5F6FA).padding(16)}}点击不同色块整个预览区的主题色就跟着变。State 追踪的是selectedColor这个字符串每次点击都是新值赋进去所有用到这个变量的 UI 节点全部自动更新。关于 State 的初始化时机有个细节很多新手容易忽略State 变量必须在声明时初始化。你不能写State counter: number然后指望框架帮你给个默认值 0。必须显式写出State counter: number 0。另外State 变量的初始化发生在组件实例创建的时候也就是build()第一次执行之前。如果你需要在组件生命周期中动态修改初始值可以在aboutToAppear()回调里重新赋值EntryComponentstruct LifecycleDemo{Statedata:string加载中...aboutToAppear(){// 模拟异步加载setTimeout((){this.data数据加载完成},2000)}build(){Text(this.data).fontSize(16)}}State 和性能别滥用坦白讲State 用起来很方便但也不能到处乱加。每多一个 State 变量框架就多一份追踪的开销。在 PC 端屏幕大、组件多如果一个页面有几十个 State 变量同时变化重新渲染的范围就会比较大。几个实践建议不需要驱动 UI 更新的变量别加 State。比如一个临时的计算中间值直接用普通变量就行。粒度要合适。别把所有数据塞进一个大对象然后用一个 State 管理也别每个字段都拆成独立的 State。数组操作优先用框架支持的方法。push、pop、splice这些 ArkUI 都做了拦截处理能精准触发更新。别用arr[0] new这种下标赋值不一定能触发。在 PC 端的额外考量HarmonyOS6 PC 和移动端共享同一套 ArkUI 框架但 PC 端有些特殊场景需要格外注意。比如 PC 端有鼠标悬停hover状态有窗口大小变化有多窗口场景。这些状态如果你想在 UI 上反映出来State 是最直接的选择EntryComponentstruct HoverDemo{StateisHovered:booleanfalseStatewindowWidth:number0build(){Column(){Text(鼠标交互示例).fontSize(18).fontWeight(FontWeight.Bold)Column().width(200).height(120).backgroundColor(this.isHovered?#007DFF:#E0E0E0).borderRadius(12).justifyContent(FlexAlign.Center).onHover((isHover:boolean){this.isHoveredisHover}){Text(this.isHovered?鼠标已悬停:悬停试试看).fontSize(14).fontColor(this.isHovered?#FFFFFF:#666666)}}.width(100%).height(100%).backgroundColor(#F5F6FA).padding(16).justifyContent(FlexAlign.Center)}}PC 端鼠标交互比移动端触摸交互更频繁善用 State 配合onHover等事件可以做出很细腻的交互反馈。小结State 作为 ArkUI 状态管理的基石核心就一句话变量变化驱动 UI 更新。基本类型直接用数组用框架方法操作对象类型后面我们会聊更优的方案。在 PC 端开发中从简单的计数器到复杂的设置面板、主题切换、实时预览State 都能胜任。关键是要理解它的触发原理合理控制粒度别一股脑把所有变量都标记成 State。把 State 玩明白了后面 Prop、Link、Provide 这些进阶装饰器理解起来就快多了。万丈高楼平地起状态管理这条路State 就是你的第一块砖。
@State入门：搞懂HarmonyOS6 PC状态驱动UI的核心机制
说实话刚开始接触 HarmonyOS6 PC 开发的时候我对 ArkUI 这套声明式 UI 框架是持怀疑态度的。毕竟写了这么多年前端React、Vue 那一套状态驱动的思路早就烂熟于心了换个平台还能玩出什么花样但真正上手之后我发现 State 这个装饰器还真有点东西——它比我预想的要简洁得多同时又足够强大。今天就来好好聊聊 State这个你在 HarmonyOS6 PC 开发中绝对绕不开的核心机制。什么是 State一句话讲清楚State 是 ArkUI 框架里最基础的状态管理装饰器。你给一个变量加上 State就意味着告诉框架“嘿这个变量的值变化了你得帮我把界面上用到它的地方重新画一遍。”就这么简单。没有额外的 store 要配置没有 dispatch 要调用没有 mutation 要写。变量变了UI 自动更新。来看一个最基础的例子——一个计数器EntryComponentstruct StateBasicDemo{Statecounter:number0build(){Column(){Text(this.counter.toString()).fontSize(56).fontWeight(FontWeight.Bold).fontColor(#007DFF)Row({space:10}){Button(-1).onClick((){this.counter-1})Button(1).onClick((){this.counter1})}}}}点击按钮修改counter的值界面上的数字就会自动刷新。不需要手动调用什么setState也不需要搞个notifyListeners()。对 ArkTS 来说赋值操作本身就触发了更新。触发机制赋值即更新但有个前提这里得说清楚一个关键点。State 能监听到变化并触发 UI 刷新靠的是对变量赋值操作的拦截。当你对 State 修饰的变量执行this.counter 10这样的操作时框架内部会做两件事一是更新变量的值二是把当前组件标记为脏dirty然后在下一帧重新执行build()方法。但这个机制有个很重要的前提基本类型靠值比较对象类型靠引用比较。什么意思呢对于number、string、boolean这些基本类型只要值变了就触发更新。但对于对象和数组框架比较的是引用地址。你直接修改对象的某个属性比如this.user.name 新名字对象引用没变框架就认为没变化UI 不会更新。这个问题后面会专门写一篇文章来聊这里先记住基本类型放心用对象类型有讲究。State 支持哪些类型坦白讲State 对数据类型的支持比我想的要宽泛得多。简单梳理一下可以用的类型基本类型number、string、boolean枚举类型对象类型class 实例或字面量对象但更新需要整体替换数组类型Array支持push、pop、splice等原地操作Map、Set等集合类型Date对象不能用的类型Promise异步对象没法做响应式追踪undefined和null但可以作为联合类型的一部分函数类型实际在 PC 端开发中最常用的是基本类型和数组。数组特别好用因为 ArkUI 对数组的原地修改做了特殊处理push一个新元素进去列表 UI 就会自动追加渲染不需要像对象那样整体替换。在 PC 端开发中的实际场景PC 端应用和移动端不太一样界面更复杂、交互更丰富。State 在 PC 场景下有几个特别典型的应用场景我来展开说说。场景一文本输入实时预览PC 端经常有左侧编辑、右侧预览的需求比如 Markdown 编辑器或者富文本工具。用 State 来做特别顺手EntryComponentstruct TextPreviewDemo{StateinputText:stringStatecharCount:number0build(){Row(){// 左侧编辑区Column(){Text(编辑区).fontSize(14).fontWeight(FontWeight.Medium)TextInput({text:this.inputText,placeholder:在这里输入内容...}).onChange((value:string){this.inputTextvaluethis.charCountvalue.length}).height(200).margin({top:8})}.width(50%).padding(16)// 右侧预览区Column(){Text(实时预览).fontSize(14).fontWeight(FontWeight.Medium)Text(this.inputText||预览内容将显示在这里...).fontSize(14).fontColor(this.inputText?#333333:#999999).margin({top:8})Text(字数:${this.charCount}).fontSize(12).fontColor(#999999).margin({top:8})}.width(50%).padding(16)}.width(100%).height(100%).backgroundColor(#F5F6FA)}}每次键盘输入都会触发inputText更新右侧预览区和字数统计同步刷新。在 PC 大屏上这种左右分栏的实时反馈体验非常流畅。场景二开关状态切换PC 端的设置页面经常有一排开关需要管理。用 State 来管理这些布尔值代码干净利落EntryComponentstruct SettingsDemo{StatedarkMode:booleanfalseStatenotifications:booleantrueStateautoSave:booleantrueStatecompactLayout:booleanfalsebuild(){Column(){Text(应用设置).fontSize(18).fontWeight(FontWeight.Bold)Column({space:12}){Row(){Text(深色模式).fontSize(14).layoutWeight(1)Toggle({type:ToggleType.Switch,isOn:this.darkMode}).selectedColor(#007DFF).onChange((isOn:boolean){this.darkModeisOn})}Row(){Text(消息通知).fontSize(14).layoutWeight(1)Toggle({type:ToggleType.Switch,isOn:this.notifications}).selectedColor(#007DFF).onChange((isOn:boolean){this.notificationsisOn})}Row(){Text(自动保存).fontSize(14).layoutWeight(1)Toggle({type:ToggleType.Switch,isOn:this.autoSave}).selectedColor(#007DFF).onChange((isOn:boolean){this.autoSaveisOn})}Row(){Text(紧凑布局).fontSize(14).layoutWeight(1)Toggle({type:ToggleType.Switch,isOn:this.compactLayout}).selectedColor(#007DFF).onChange((isOn:boolean){this.compactLayoutisOn})}}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(12).margin({top:12})// 状态汇总Column(){Text(当前配置).fontSize(14).fontWeight(FontWeight.Medium)Text(主题:${this.darkMode?深色:浅色}).fontSize(13).margin({top:4})Text(通知:${this.notifications?已开启:已关闭}).fontSize(13).margin({top:2})Text(自动保存:${this.autoSave?已开启:已关闭}).fontSize(13).margin({top:2})Text(布局:${this.compactLayout?紧凑:标准}).fontSize(13).margin({top:2})}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(12).margin({top:10})}.width(100%).height(100%).backgroundColor(#F5F6FA).padding(16)}}四个开关各自独立下面还有个状态汇总区实时反映当前配置。这种模式在 PC 端的偏好设置里太常见了用 State 来管理完全不需要额外的状态管理方案。场景三颜色选择器与动态主题这个场景更有意思。PC 端的个性化定制需求比较强用户可能想自己选主题色。用 State 配合色值数组几行代码就能搞定EntryComponentstruct ColorPickerDemo{StateselectedColor:string#007DFFStatepreviewText:string主题预览文字privatepresetColors:string[][#FF6B6B,#FF8E53,#FFD93D,#6BCB77,#4D96FF,#9B59B6,#007DFF,#333333]build(){Column(){Text(选择主题色).fontSize(18).fontWeight(FontWeight.Bold)// 颜色网格Flex({wrap:FlexWrap.Wrap,justifyContent:FlexAlign.Center}){ForEach(this.presetColors,(color:string){Column().width(48).height(48).backgroundColor(color).borderRadius(12).margin(6).border({width:this.selectedColorcolor?3:0,color:#333333}).onClick((){this.selectedColorcolor})})}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(12).margin({top:12})// 预览卡片Column(){Text(this.previewText).fontSize(20).fontWeight(FontWeight.Bold).fontColor(this.selectedColor)Button(示例按钮).backgroundColor(this.selectedColor).fontColor(#FFFFFF).margin({top:12})}.width(100%).padding(24).backgroundColor(#FFFFFF).borderRadius(12).margin({top:10}).alignItems(HorizontalAlign.Center)}.width(100%).height(100%).backgroundColor(#F5F6FA).padding(16)}}点击不同色块整个预览区的主题色就跟着变。State 追踪的是selectedColor这个字符串每次点击都是新值赋进去所有用到这个变量的 UI 节点全部自动更新。关于 State 的初始化时机有个细节很多新手容易忽略State 变量必须在声明时初始化。你不能写State counter: number然后指望框架帮你给个默认值 0。必须显式写出State counter: number 0。另外State 变量的初始化发生在组件实例创建的时候也就是build()第一次执行之前。如果你需要在组件生命周期中动态修改初始值可以在aboutToAppear()回调里重新赋值EntryComponentstruct LifecycleDemo{Statedata:string加载中...aboutToAppear(){// 模拟异步加载setTimeout((){this.data数据加载完成},2000)}build(){Text(this.data).fontSize(16)}}State 和性能别滥用坦白讲State 用起来很方便但也不能到处乱加。每多一个 State 变量框架就多一份追踪的开销。在 PC 端屏幕大、组件多如果一个页面有几十个 State 变量同时变化重新渲染的范围就会比较大。几个实践建议不需要驱动 UI 更新的变量别加 State。比如一个临时的计算中间值直接用普通变量就行。粒度要合适。别把所有数据塞进一个大对象然后用一个 State 管理也别每个字段都拆成独立的 State。数组操作优先用框架支持的方法。push、pop、splice这些 ArkUI 都做了拦截处理能精准触发更新。别用arr[0] new这种下标赋值不一定能触发。在 PC 端的额外考量HarmonyOS6 PC 和移动端共享同一套 ArkUI 框架但 PC 端有些特殊场景需要格外注意。比如 PC 端有鼠标悬停hover状态有窗口大小变化有多窗口场景。这些状态如果你想在 UI 上反映出来State 是最直接的选择EntryComponentstruct HoverDemo{StateisHovered:booleanfalseStatewindowWidth:number0build(){Column(){Text(鼠标交互示例).fontSize(18).fontWeight(FontWeight.Bold)Column().width(200).height(120).backgroundColor(this.isHovered?#007DFF:#E0E0E0).borderRadius(12).justifyContent(FlexAlign.Center).onHover((isHover:boolean){this.isHoveredisHover}){Text(this.isHovered?鼠标已悬停:悬停试试看).fontSize(14).fontColor(this.isHovered?#FFFFFF:#666666)}}.width(100%).height(100%).backgroundColor(#F5F6FA).padding(16).justifyContent(FlexAlign.Center)}}PC 端鼠标交互比移动端触摸交互更频繁善用 State 配合onHover等事件可以做出很细腻的交互反馈。小结State 作为 ArkUI 状态管理的基石核心就一句话变量变化驱动 UI 更新。基本类型直接用数组用框架方法操作对象类型后面我们会聊更优的方案。在 PC 端开发中从简单的计数器到复杂的设置面板、主题切换、实时预览State 都能胜任。关键是要理解它的触发原理合理控制粒度别一股脑把所有变量都标记成 State。把 State 玩明白了后面 Prop、Link、Provide 这些进阶装饰器理解起来就快多了。万丈高楼平地起状态管理这条路State 就是你的第一块砖。
![3分钟掌握VideoDownloadHelper：简单高效的网页视频下载插件终极指南 [特殊字符]](images/news3.jpg)
