鸿蒙开发之状态管理

这篇具有很好参考价值的文章主要介绍了鸿蒙开发之状态管理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

@State 组件内状态

  • @State装饰的变量,会和自定义组件的渲染绑定起来。当状态改变时,UI会发生对应的渲染改变。
  • 在状态变量相关装饰器中,@State是最基础的,使变量拥有状态属性的装饰器,它也是大部分状态变量的数据源。

装饰器使用规则

  • 同步类型:不与父组件中任何类型的变量同步。
  • 允许装饰的变量类型:Object、class、string、number、boolean、enum类型,以及这些类型的数组,且类型必须被指定。
  • 被装饰变量的初始值:必须本地初始化。

变量的传递/访问规则

  • 从父组件初始化:可选,从父组件初始化或者本地初始化。如果从父组件初始化将会覆盖本地初始化。但实际上编辑器并不希望你这样做,代码不会报错但是会划红线提示。
  • 用于初始化子组件:@State装饰的变量支持初始化子组件的常规变量、@State、@Link、@Prop、@Provide。
  • 是否支持组件外访问:不支持,只能在组件内访问。

鸿蒙变量改变uil不刷新,鸿蒙

观察变化和行为表现

  • 并不是状态变量的所有更改都会引起UI的刷新,只有可以被框架观察到的修改才会引起UI刷新。
  • 当装饰的数据类型为boolean、string、number类型时,可以观察到数值的变化。
  • 当装饰的数据类型为class或者Object时,可以观察到自身的赋值的变化,和其属性赋值的变化。
  • 当装饰的对象是array时,可以观察到数组本身的赋值和添加、删除、更新数组的变化。

@Props 父组件传入的状态 - 单向同步

  • @Prop变量允许在本地修改,但修改后的变化不会同步回父组件。
  • 当父组件中的数据源更改时,与之相关的@Prop装饰的变量都会自动更新。
  • 如果子组件已在本地修改了@Prop变量,而在父组件中对应的@State变量被修改后,子组件本地修改的@Prop变量值将被覆盖。
  • @Prop装饰器不能在@Entry装饰的自定义组件中使用。

装饰器使用规则

  • 同步类型:单向同步。
  • 允许装饰的变量类型:string、number、boolean、enum类型。不支持any,必须指定类型。
  • 被装饰变量的初始值:允许本地初始化。

变量的传递/访问规则

  • 从父组件初始化:如果本地有初始化,则是可选的(但这种方式编辑器会报etslint错误)。没有的话,则必选
  • 用于初始化子组件:@Prop支持去初始化子组件中的常规变量、@State、@Link、@Prop、@Provide。
  • 是否支持组件外访问:不支持,只能在组件内访问。

鸿蒙变量改变uil不刷新,鸿蒙

思考:如何单向绑定非简单类型数据?

@Link 父子组件共用的状态 - 双向同步

  • 子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。
  • @Link装饰器不能在@Entry装饰的自定义组件中使用。

装饰器使用规则

  • 同步类型:双向同步。
  • 允许装饰的变量类型:Object、class、string、number、boolean、enum类型,以及这些类型的数组。类型必须被指定,且和双向绑定状态变量的类型相同。
  • 被装饰变量的初始值:禁止本地初始化。

变量的传递/访问规则

  • 从父组件初始化和更新:必选
  • 用于初始化子组件:允许,可用于初始化常规变量、@State、@Link、@Prop、@Provide。
  • 是否支持组件外访问:私有,只能在所属组件内访问。

鸿蒙变量改变uil不刷新,鸿蒙

@Provide 与 @Consume 跨组件双向通信

  • @Provide装饰的状态变量自动对其所有后代组件可用,即该变量被“provide”给他的后代组件。由此可见,@Provide的方便之处在于,开发者不需要多次在组件之间传递变量。
  • 后代通过使用@Consume去获取@Provide提供的变量,建立在@Provide和@Consume之间的双向数据同步,与@State/@Link不同的是,前者可以在多层级的父子组件之间传递。
  • @Provide和@Consume可以通过相同的变量名或者相同的变量别名绑定,变量类型必须相同。
// 通过相同的变量名绑定
@Provide a: number = 0;
@Consume a: number;

// 通过相同的变量别名绑定
@Provide('a') b: number = 0;
@Consume('a') c: number;

装饰器说明

  • @State的规则同样适用于@Provide,差异为@Provide还作为多层后代的同步源。
  • @Link的规则同样适用于@Consume,差异为@Consume可在多层父代的找到同步源。

变量的传递/访问规则

鸿蒙变量改变uil不刷新,鸿蒙
鸿蒙变量改变uil不刷新,鸿蒙

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

  • @ObjectLink和@Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步

  • 被@Observed装饰的类,可以被观察到属性的变化

  • 子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例,和父组件中对应的状态变量建立双向数据绑定。

  • 单独使用@Observed是没有任何作用的,需要搭配@ObjectLink或者@Prop使用。

  • 具体用法看Demo5、Demo6文章来源地址https://www.toymoban.com/news/detail-809413.html

AppStorage:应用全局的UI状态存储

  • AppStorage是在应用启动的时候会被创建的单例。它提供应用状态数据的中心存储。
  • 这些状态数据在应用级别都是可访问的,属性通过唯一的键字符串值访问。
  • AppStorage中的属性可以被双向同步

@StorageLink-双向同步

@StorageProp-单向同步

PersistentStorage:持久化存储UI状态

  • PersistentStorage的作用是持久化存储选定的AppStorage属性,以确保这些属性在应用程序重新启动时的值与应用程序关闭时的值相同。

@Watch装饰器:状态变量更改通知

  • @Watch用于监听状态变量的变化,当状态变量变化时,@Watch的回调方法将被调用。
  • @Watch在ArkUI框架内部判断数值有无更新使用的是严格相等(===)
  • 对象类型的属性修改,以及数组类型的修改,均会触发@Watch

到了这里,关于鸿蒙开发之状态管理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 鸿蒙Harmony--状态管理器--@Prop详解

    纵横千里独行客,何惧前路雨潇潇。夜半浊酒慰寂寞,天明走马入红尘。且将新火试新茶,诗酒趁年华。青春以末,壮志照旧,生活以悟,前路未明。时间善变,可执着翻不了篇。时光磨我少年心,却难灭我少年志,壮士活古不活皮。加油。 目录 一,定义 二,装饰器使用规

    2024年02月01日
    浏览(53)
  • 鸿蒙App开发-网络请求-下拉刷新三方库-底部Tab栏-滚动组件(含源码)

    本文介绍一个基于鸿蒙ArkTS开发的App,是一个包含轮播图、文章列表和 Web 页面等功能的多页面应用。 本文主要内容包括: 一、效果图 首页 详情页    二、内容简介 1.底部Tab栏和两个页面         App底部是一个TabBar,点击TabBar可以切换上面的页面。共包含两个页面,一个

    2024年02月01日
    浏览(43)
  • 鸿蒙Harmony--状态管理器-@Observed装饰器和@ObjectLink装饰器详解

     经历的越多,越喜欢简单的生活,干净的东西,清楚的感觉,有结果的事,和说到做到的人。把圈子变小,把语放缓,把心放宽,用心做好手边的事儿,该有的总会有的! 目录 一,定义 二,装饰器说明 三,变量的传递/访问规则说明  四,使用 1,简单对象的使用 2,嵌套对

    2024年02月01日
    浏览(43)
  • 鸿蒙Harmony--状态管理器--@Provide装饰器和@Consume装饰器详解

    今天是1月11日号星期四,农历腊月初一,辞旧的岁月里,愿你守得云开、终见月明,迎新的时光中,愿你心御寒冬、顺遂无忧,岁末冬深,希望接下来的日子里足够幸运,攒足勇气、信心和运气,去迎接新的一年,去遇见更好的自己! 目录 一,定义 二,特性 三,装饰器说明

    2024年02月01日
    浏览(40)
  • 【Rust 基础篇】Rust可变静态变量:全局状态的可变性管理

    Rust是一种以安全性和高效性著称的系统级编程语言,其设计哲学是在不损失性能的前提下,保障代码的内存安全和线程安全。为了实现这一目标,Rust引入了\\\"所有权系统\\\"、\\\"借用检查器\\\"等特性,有效地避免了常见的内存安全问题。然而,有时候我们需要在程序的整个生命周期

    2024年02月15日
    浏览(28)
  • C++笔记之设计模式全局状态管理类:使整个工程项目中的所有函数可以访问同一个变量,并且能够感知到这个变量的变化(变量共享)

    —— 杭州 2024-03-21 夜 实现方法 : 全局变量(不介绍) 单例模式 全局状态管理类 全局状态管理类+单例模式 静态变量或静态成员(不介绍) code review!

    2024年03月22日
    浏览(50)
  • Qt QTableView 实现数据改变表格自动刷新

    这里提供一份简单的代码示例,实现QTableView实时刷新数据: 在代码中,我们首先创建一个QStandardItemModel数据模型,并设置表格的行数和列数,同时设置表头和填充数据。然后将数据模型绑定到QTableView中,并实现数据变化自动刷新的功能。最后显示QWidget窗口。 在实际开发中

    2024年02月13日
    浏览(34)
  • vue 改变数据后,数据变化页面不刷新

    在vue项目中,会遇到修改完数据,但是视图却没有更新的情况 vue 改变数据后,数据变化页面不刷新 vue 改变数据后,需要滑动页面,数据才更新 vue中表格数据已改变,页面却未更新数据 方法一:使用this.$forceUpdate()强制刷新 使用方法:直接调用即可,或者放到html里面使用

    2024年02月11日
    浏览(45)
  • 鸿蒙OS开发实战:【网络管理HTTP数据请求】

    应用通过HTTP发起一个数据请求,支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。 HTTP数据请求功能主要由http模块提供。 使用该功能需要申请ohos.permission.INTERNET权限。 涉及的接口如下表,具体的接口说明请参考API文档。 接口名 功能描述 createHttp() 创建一个ht

    2024年04月29日
    浏览(28)
  • uniapp 中使用 rem 以及改变窗口动态刷新页面

    注意:页面元素需要全部使用 rem 作为单位。 1.使用 uniapp 中的页面属性配置节点,page-meta,注意放在根元素的位置,也就是 template下面的第一层 2.获取屏幕大小以及监听窗口改变事件 3. app.vue 页面触发重新渲染页面

    2024年01月24日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包