鸿蒙 OS-05 状态管理 @State @Prop @Link @Provider @Consume ...

鸿蒙 OS-05 状态管理

声明式 UI

状态驱动UI 渲染

  • @State装饰器:组件内状态, @State totalTask: number = 0;

  • @Prop装饰器:父子单向同步,使用值传递 this.totalTask .支持

  • @Link装饰器:父子双向同步,使用引用传递 $totalTask

  • @Provider @Consume 双向同步, 跨组件传递。不需要手写传递,同样的名称变量就好。1:N Provider/Consume

  • @Observed装饰器和@ObjectLink装饰器:嵌套类对象属性变化。需要传递。this.p

    less 复制代码
    @Observed class Person //class 属性可被观察
    
    @Component //子组件订阅,属性变化。
    struct ViewA {
    @ObjectLink p:Person
    }

父子 对比 prop link provider

@State装饰器:组件内状态

  1. 允许装饰的变量类型: Object、class、string、number、boolean、enum类型,以及这些类型的数组。嵌套类型的场景请参考观察变化。 类型必须被指定。

不支持any,嵌套类型、 数组中的对象属性无法触发。不允许使用undefined和null。 数组:增删、对象被覆盖引用变化 才会刷新视图。

  1. 必须本地初始化。

官网:developer.harmonyos.com/cn/docs/doc...

demo:s

@Prop装饰器:父子单向同步

developer.harmonyos.com/cn/docs/doc...

@Link装饰器:父子双向同步

developer.harmonyos.com/cn/docs/doc...

@Provider @Consume 跨组件传递。

TypeScript 复制代码
//父
@Entry
@Component
struct PropPage {
  // 统计信息
  @Provide stat: StatInfo = new StatInfo()
  ...}}

//son 1
@Component
struct TaskStatistics {
  @Consume stat: StatInfo

//son 2
@Component
struct TaskList {
  // 总任务数量
  @Consume stat: StatInfo

@Observed装饰器和@ObjectLink装饰器:嵌套类对象属性变化

developer.harmonyos.com/cn/docs/doc...

  • 被@Observed装饰的类,可以被观察到属性的变化;
  • 子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例

@Observed class Person //class 属性可被观察

@Component //子组件订阅,属性变化。 struct ViewA { @ObjectLink p:Person }

相关推荐
爱分享的程序员22 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘27 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出28 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的29 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
zhanshuo29 分钟前
鸿蒙应用调试与测试实战全指南:高效定位问题,性能优化必备技巧+实用代码示例
harmonyos
Java水解31 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵34 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im35 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man35 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下1 小时前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构