HarmonyOS开发实战：小分享-状态管理进阶——@State/@Prop/@Link/@Provide/@Consume

前言状态管理是 ArkUI 声明式 UI 范式的核心除了State和Prop还有Link、Provide、Consume等高级装饰器。小分享 App 中使用了State和Prop实现组件通信。本篇讲解状态管理装饰器的完整体系。详细 API 可参考 HarmonyOS 状态管理官方文档。一、状态管理装饰器体系1.1 装饰器一览装饰器作用范围数据流方向用途State组件内自身私有状态Prop父子组件父→子单向传递Link父子组件双向双向同步Provide祖先→后代向下跨层级提供Consume后代接收向上跨层级消费Observed对象深度监听复杂对象状态ObjectLink对象属性双向对象属性同步二、State 组件内状态Componentstruct TextEditPage{StatetextContent:string生活的美好在于分享;StatefontSize:number16;StateselectedFilter:number0;}三、Prop 父子单向传递Componentstruct BottomTabBar{PropcurrentIndex:number0;// 父组件传入Proptitle:string;}四、Link 父子双向同步Componentstruct ChildComponent{Linkcount:number;// 双向同步修改会反映到父组件build(){Button(Count:${this.count}).onClick((){this.count})// 修改会同步到父组件}}五、Provide 与 Consume 跨层级// 祖先组件Componentstruct AppRoot{Provide(theme)theme:stringlight;build(){Column(){Text(App Root)ChildComponent()}}}// 后代组件Componentstruct ChildComponent{Consume(theme)theme:string;// 自动接收祖先的值build(){Text(Theme:${this.theme})}}六、Observed 与 ObjectLinkObservedclassUserInfo{name:string;age:number0;}Componentstruct UserView{ObjectLinkuser:UserInfo;build(){Text(Name:${this.user.name}).onClick((){this.user.nameNew Name})}}七、装饰器对比特性StatePropLinkProvide/Consume数据流单向父→子双向跨层级初始化必填可选必填提供方必填修改影响自身自身双方所有后代适用场景私有状态参数传递表单同步主题/国际化八、本文核心知识点8.1 状态管理核心要点State组件内私有状态Prop父→子单向传递Link父子双向同步Provide/Consume跨层级数据共享8.2 实战开发要点简单传参用 Prop双向同步用 Link全局状态用 Provide/Consume复杂对象用 Observed/ObjectLink相关资源HarmonyOS 状态管理官方文档HarmonyOS State 装饰器HarmonyOS Prop 装饰器HarmonyOS Link 装饰器HarmonyOS Provide/Consume开源鸿蒙跨平台社区附录状态管理完整指南1. 状态管理装饰器体系装饰器作用范围数据流方向用途State组件内自身私有状态Prop父子组件父→子单向传递Link父子组件双向双向同步Provide祖先→后代向下跨层级提供Consume后代接收向上跨层级消费Observed对象深度监听复杂对象状态ObjectLink对象属性双向对象属性同步Watch状态变化监听状态变化回调2. State 完整示例Componentstruct Counter{Statecount:number0build(){Column(){Text(Count:${this.count}).fontSize(24)Button(1).onClick((){this.count})Button(-1).onClick((){this.count--})}}}3. Prop 完整示例Componentstruct ChildComponent{Propvalue:number0build(){Text(Value:${this.value}).fontSize(20)}}4. Link 完整示例Componentstruct ChildComponent{Linkcount:numberbuild(){Button(Count:${this.count}).onClick((){this.count})}}5. Provide/Consume 完整示例Componentstruct AppRoot{Provide(theme)theme:stringlightbuild(){Column(){ChildComponent()}}}Componentstruct ChildComponent{Consume(theme)theme:stringbuild(){Text(Theme:${this.theme})}}6. 选型建议场景推荐方案组件内私有状态State父子传参Prop父子双向同步Link跨层级共享Provide/Consume全局状态AppStorage页面级状态LocalStorage复杂对象监听Observed/ObjectLink7. 完整代码文件索引文件路径说明所有页面文件使用状态管理装饰器8. 总结本文详细讲解了 HarmonyOS 状态管理装饰器的完整体系涵盖 State、Prop、Link、Provide/Consume 等核心装饰器。相关资源HarmonyOS 状态管理官方文档State ManagementHarmonyOS State 装饰器State GuideHarmonyOS Prop 装饰器Prop GuideHarmonyOS Link 装饰器Link GuideHarmonyOS Provide/ConsumeProvide/ConsumeHarmonyOS Watch 装饰器Watch GuideHarmonyOS Observed 装饰器Observed Guide开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.netoh-package.json5 依赖管理本文涉及的所有 API 索引API类别用途Column布局容器垂直排列子组件Row布局容器水平排列子组件Text基础组件显示文本ForEach渲染控制循环渲染列表State装饰器组件内状态管理Builder装饰器封装可复用 UI 片段router.pushUrl路由页面跳转router.back路由返回上一页总结本文详细讲解了小分享 App 中对应页面的完整实现。核心知识点涵盖布局容器、组件封装、状态管理、路由跳转等关键技术。通过本文的学习读者可以掌握 HarmonyOS ArkUI 声明式开发的核心技能并能够独立实现类似的页面功能。相关资源HarmonyOS 官方文档https://developer.huawei.com/consumer/cn/doc/ArkTS 语法指南ArkTS Introduction状态管理指南State ManagementArkUI 组件参考ArkUI Components路由 APIRouter API开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net10. 完整代码文件索引文件路径说明所有页面文件使用状态管理装饰器components/BottomTabBar.etsProp 使用示例pages/TextEditPage.etsState 使用示例11. 本文涉及的所有 APIAPI/组件用途文档链接State组件内状态StateProp父子传递PropLink双向同步LinkProvide跨层级提供ProvideConsume跨层级消费ConsumeWatch监听变化WatchObserved对象监听ObservedObjectLink对象属性同步ObjectLink12. 实现要点总结状态管理核心要点State组件内私有状态变化触发 UI 更新Prop父→子单向数据传递Link父子双向同步Provide/Consume跨层级数据共享Watch监听状态变化触发副作用Observed/ObjectLink复杂对象深度监听13. 选型建议场景推荐方案原因组件内私有状态State简单直接父子传参Prop单向数据流父子双向同步Link双向绑定跨层级共享Provide/Consume无需逐层传递全局状态AppStorage应用级共享页面级状态LocalStorage页面级隔离复杂对象监听Observed/ObjectLink深层响应式14. 总结本文详细讲解了 HarmonyOS 状态管理装饰器的完整体系涵盖 State、Prop、Link、Provide/Consume、Watch、Observed/ObjectLink 等核心装饰器并给出了选型建议。相关资源HarmonyOS 状态管理官方文档State ManagementHarmonyOS State 装饰器State GuideHarmonyOS Prop 装饰器Prop GuideHarmonyOS Link 装饰器Link GuideHarmonyOS Provide/ConsumeProvide/ConsumeHarmonyOS Watch 装饰器Watch GuideHarmonyOS Observed 装饰器Observed Guide开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.netoh-package.json5 依赖管理ArkUI 表单组件oh-package.json5 依赖管理ArkUI 表单组件ArkUI 表单组件oh-package.json5 依赖管理如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力