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:number=16;@StateselectedFilter:number=0;}

三、@Prop 父子单向传递

@Componentstruct BottomTabBar{@PropcurrentIndex:number=0;// 父组件传入@Proptitle:string='';}

四、@Link 父子双向同步

@Componentstruct ChildComponent{@Linkcount:number;// 双向同步，修改会反映到父组件build(){Button(`Count:${this.count}`).onClick(()=>{this.count++})// 修改会同步到父组件}}

五、@Provide 与 @Consume 跨层级

// 祖先组件@Componentstruct AppRoot{@Provide('theme')theme:string='light';build(){Column(){Text('App Root')ChildComponent()}}}// 后代组件@Componentstruct ChildComponent{@Consume('theme')theme:string;// 自动接收祖先的值build(){Text(`Theme:${this.theme}`)}}

六、@Observed 与 @ObjectLink

@ObservedclassUserInfo{name:string='';age:number=0;}@Componentstruct UserView{@ObjectLinkuser:UserInfo;build(){Text(`Name:${this.user.name}`).onClick(()=>{this.user.name='New Name'})}}

七、装饰器对比

特性	@State	@Prop	@Link	@Provide/@Consume
数据流	单向	父→子	双向	跨层级
初始化	必填	可选	必填	提供方必填
修改影响	自身	自身	双方	所有后代
适用场景	私有状态	参数传递	表单同步	主题/国际化

八、本文核心知识点

8.1 状态管理核心要点

@State：组件内私有状态
@Prop：父→子单向传递
@Link：父子双向同步
@Provide/@Consume：跨层级数据共享

8.2 实战开发要点

简单传参用 @Prop
双向同步用 @Link
全局状态用 @Provide/@Consume
复杂对象用 @Observed/@ObjectLink

附录：状态管理完整指南

1. 状态管理装饰器体系

装饰器	作用范围	数据流方向	用途
`@State`	组件内	自身	私有状态
`@Prop`	父子组件	父→子	单向传递
`@Link`	父子组件	双向	双向同步
`@Provide`	祖先→后代	向下	跨层级提供
`@Consume`	后代接收	向上	跨层级消费
`@Observed`	对象	深度监听	复杂对象状态
`@ObjectLink`	对象属性	双向	对象属性同步
`@Watch`	状态变化	监听	状态变化回调

2. @State 完整示例

@Componentstruct Counter{@Statecount:number=0build(){Column(){Text(`Count:${this.count}`).fontSize(24)Button('+1').onClick(()=>{this.count++})Button('-1').onClick(()=>{this.count--})}}}

3. @Prop 完整示例

@Componentstruct ChildComponent{@Propvalue:number=0build(){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:string='light'build(){Column(){ChildComponent()}}}@Componentstruct ChildComponent{@Consume('theme')theme:stringbuild(){Text(`Theme:${this.theme}`)}}

6. 选型建议

场景	推荐方案
组件内私有状态	@State
父子传参	@Prop
父子双向同步	@Link
跨层级共享	@Provide/@Consume
全局状态	AppStorage
页面级状态	LocalStorage
复杂对象监听	@Observed/@ObjectLink

7. 完整代码文件索引

文件路径	说明
所有页面文件	使用状态管理装饰器

8. 总结

本文详细讲解了 HarmonyOS 状态管理装饰器的完整体系，涵盖 @State、@Prop、@Link、@Provide/@Consume 等核心装饰器。

本文涉及的所有 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 Management
ArkUI 组件参考：ArkUI Components
路由 API：Router API
开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

10. 完整代码文件索引

文件路径	说明
所有页面文件	使用状态管理装饰器
`components/BottomTabBar.ets`	@Prop 使用示例
`pages/TextEditPage.ets`	@State 使用示例

11. 本文涉及的所有 API

API/组件	用途	文档链接
@State	组件内状态	State
@Prop	父子传递	Prop
@Link	双向同步	Link
@Provide	跨层级提供	Provide
@Consume	跨层级消费	Consume
@Watch	监听变化	Watch
@Observed	对象监听	Observed
@ObjectLink	对象属性同步	ObjectLink

12. 实现要点总结

状态管理核心要点：

@State：组件内私有状态，变化触发 UI 更新
@Prop：父→子单向数据传递
@Link：父子双向同步
@Provide/@Consume：跨层级数据共享
@Watch：监听状态变化触发副作用
@Observed/@ObjectLink：复杂对象深度监听

13. 选型建议

场景	推荐方案	原因
组件内私有状态	@State	简单直接
父子传参	@Prop	单向数据流
父子双向同步	@Link	双向绑定
跨层级共享	@Provide/@Consume	无需逐层传递
全局状态	AppStorage	应用级共享
页面级状态	LocalStorage	页面级隔离
复杂对象监听	@Observed/@ObjectLink	深层响应式