arkts状态管理使用(@State、@Prop、@Link、@Provide、@Consume、@objectLink和@observed)

这篇具有很好参考价值的文章主要介绍了arkts状态管理使用(@State、@Prop、@Link、@Provide、@Consume、@objectLink和@observed)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、状态管理

1.在声明式UI中,是以状态驱动视图更新:

①状态(State):指驱动视图更新的数据(被装饰器标记的变量)

②视图(View):基于UI描述渲染得到用户界面

注意:

①@State装饰器标记的变量必须初始化,不能为空值

②@State支持object、class、string、number、boolean、enum类型以及这些类型的数组

③嵌套类型以及数组中的对象属性无法触发视图更新

例子:

class Person{
  name:string
  age:number
  friend:Person
  constructor(name:string,age:number,friend?:Person) {
    this.name=name
    this.age=age
    this.friend=friend
  }

}

@Entry
@Component
struct Index {
 @State  message: string = 'Hello World'
@State P:Person=new Person('张三',18,new Person('zz',10))
  build() {
    Row() {
      Column() {
        // 正常发生变化
        Text(`${this.P.name}:${this.P.age}`)
          .fontSize(80)
          .fontWeight(FontWeight.Bold)
          .fontColor("red")
          .onClick(()=>{
            this.P.name="李四"
            this.P.age++
          })
        // 嵌套的对象点击视图不发生变化
        Text(`${this.P.friend.name}:${this.P.friend.age}`)
          .fontSize(80)
          .fontWeight(FontWeight.Bold)
          .fontColor("red")
          .onClick(()=>{
            this.P.friend.name="ss"
            this.P.friend.age++
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

效果:

arkts状态管理使用(@State、@Prop、@Link、@Provide、@Consume、@objectLink和@observed),typescript,前端,前端框架

2.@State和@Prop单项数据同步(父向子传值)

①父组件


//2.引入子组件
import { AnLi }from "./AnLi"
@Entry
@Component
struct Index {
//   1.父组件声明变量
@State a:number=0
  build() {
    Stack(){
      Column(){
        // 3.父向子传值
        AnLi({a:this.a})
        Button("点击").onClick(()=>{
          this.a++
        })
      }.height("30%").width("100%").backgroundColor("green")


  }.height("50%").width("100%").backgroundColor("red").alignContent(Alignment.Center)

}}

②子组件



@Component
export struct AnLi {
  //4.@prop接收父组件传过来的变量
@Prop a:number
  build(){
      Column(){
         Text(  `${this.a}`)
      }

}}

2.@State和@Link数据双向同步

①父组件


//2.引入子组件
import { AnLi }from "./AnLi"
@Entry
@Component
struct Index {
//   1.父组件声明变量
@State a:number=0
  build() {
    Stack(){
      Column(){
        Text( `${this.a}`)
        // 3.父向子传值
        AnLi({a:this.a})
        Button("点击").onClick(()=>{
          this.a++
        })
      }.height("30%").width("100%").backgroundColor("green")


  }.height("50%").width("100%").backgroundColor("red").alignContent(Alignment.Center)

}}

②子组件



@Component
export struct AnLi {
  //4.@Link接收父组件传过来的变量
@Link a:number
  build(){
      Column(){
         Text(  `${this.a}`)
      }

}}

效果如下:

arkts状态管理使用(@State、@Prop、@Link、@Provide、@Consume、@objectLink和@observed),typescript,前端,前端框架

3.@Provide和@Consume与后代组件双向同步例子如下:

//入口组件,根组件
import { AnLi }from "./AnLi"
@Entry
@Component
struct Index {
  @Provide a:number=1
  build() {
    Stack(){
      Column(){
      AnLi()
      }.height("30%").width("100%").backgroundColor("green")

  }.height("50%").width("100%").backgroundColor("red").alignContent(Alignment.Center)

}}

//父组件
import { Consum }from "./Consum"
@Component
export struct AnLi {

  build(){
      Column(){
      Consum()
      }
}}

//子组件
@Component
export struct Consum {
  @Consume a:number
  build(){
    Column(){
     Text(  `${this.a}`)
      Text(  `${this.a}`)
      Button("加以").onClick(()=>{
        this.a++
      })
    }
  }}

效果如下:

arkts状态管理使用(@State、@Prop、@Link、@Provide、@Consume、@objectLink和@observed),typescript,前端,前端框架

4.@objectLink和@observed装饰器用于在涉及嵌套对象或数组元素为对象的场景中进行双向数据同步

  • 被@Observed装饰的类,可以被观察到属性的变化;
  • 子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例,和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed装饰的项,或者是class object中的属性,这个属性同样也需要被@Observed装饰。
  • 单独使用@Observed是没有任何作用的,需要搭配@ObjectLink或者@Prop使用。
限制条件
  • 使用@Observed装饰class会改变class原始的原型链,@Observed和其他类装饰器装饰同一个class可能会带来问题。
  • @ObjectLink装饰器不能在@Entry装饰的自定义组件中使用。


@Observed
class ClassA {
  public c: number;

  constructor(c: number) {
    this.c = c;
  }
}

@Observed
class ClassB {
  public a: ClassA;

  constructor(a: ClassA) {
    this.a = a;
  }
}

@Component
struct ComB{
  @ObjectLink a:ClassA;
  build(){
    Button(`ViewA  this.a.c=${this.a.c} +1`)
      .onClick(() => {
        this.a.c += 1;
      })

  }
}



@Entry
@Component
struct Index {
  @State b: ClassB = new ClassB(new ClassA(0));
  build() {
    Stack(){
      Column(){
        ComB({a:this.b.a})
      }.height("30%").width("100%").backgroundColor("green")

  }.height("50%").width("100%").backgroundColor("red").alignContent(Alignment.Center)

}}



效果如下:

arkts状态管理使用(@State、@Prop、@Link、@Provide、@Consume、@objectLink和@observed),typescript,前端,前端框架文章来源地址https://www.toymoban.com/news/detail-769341.html

到了这里,关于arkts状态管理使用(@State、@Prop、@Link、@Provide、@Consume、@objectLink和@observed)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • Flink State 状态管理

    状态在Flink中叫做State,用来保存中间计算结果或者缓存数据。要做到比较好的状态管理,需要考虑以下几点内容: 状态数据的存储和访问 在Task内部,如何高效地保存状态数据和使用状态数据。 状态数据的备份和恢复 作业失败是无法避免的,那么就要考虑如何高效地将状态

    2024年01月17日
    浏览(44)
  • Jetpack Compose | State状态管理及界面刷新

    我们知道 Jetpack Compose(以下简称Compose) 中的 UI 可组合项是通过 @Composable 声明的函数来描述的,如: 上面的代码描述的是一个静态的 Text ,那么如何让 Compose 中的 UI 更新呢? 状态和重组 Compose 更新UI的唯一方法是通过新参数调用同一可组合项。可组合项中的状态更新时,就

    2024年02月08日
    浏览(41)
  • 鸿蒙开发系列教程(七)--ArkTS语言:状态管理

    如果希望构建一个动态的、有交互的界面,就需要引入“状态”的概念 状态管理机制:在声明式UI编程框架中,UI是程序状态的运行结果,用户构建了一个UI模型,其中应用的运行时的状态是参数。当参数改变时,UI作为返回结果,也将进行对应的改变。这些运行时的状态变化

    2024年01月20日
    浏览(58)
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言(状态管理 二)

    @Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量是可变的,但是变化不会同步回其父组件。 @Prop装饰的变量和父组件建立单向的同步关系: @Prop变量允许在本地修改,但修改后的变化不会同步回父组件。 当父组件中的数据源更改时,与之相关的@Prop装饰的变

    2024年02月14日
    浏览(46)
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言(状态管理 六)

    AppStorage是应用全局的UI状态存储,是和应用的进程绑定的,由UI框架在应用程序启动时创建,为应用程序UI状态属性提供中央存储。 和LocalStorage不同的是,LocalStorage是页面级的,通常应用于页面内的数据共享。而对于AppStorage,是应用级的全局状态共享。 AppStorage是在应用启动

    2024年02月20日
    浏览(52)
  • Android Jetpack Compose 用计数器demo理解Compose UI 更新的关键-------状态管理(State)

    我们都知道了Compose使用了声明式的开发范式,在这样的范式中,UI的职责更加的单一,只会对数据状态的变化作出反应,如果数据状态没有发生变化,则UI就永远不会自行的改变。假如我们把Composable的执行看成是一个函数的运算的话,那么状态就是函数的参数,输出就是生成

    2024年02月08日
    浏览(43)
  • Android Jetpack Compose 用计时器demo理解Compose UI 更新的关键-------状态管理(State)

    我们都知道了Compose使用了声明式的开发范式,在这样的范式中,UI的职责更加的单一,只会对数据状态的变化作出反应,如果数据状态没有发生变化,则UI就永远不会自行的改变。假如我们把Composable的执行看成是一个函数的运算的话,那么状态就是函数的参数,输出就是生成

    2024年02月09日
    浏览(51)
  • 【中秋国庆不断更】OpenHarmony组件内状态变量使用:@State装饰器

    @State装饰的变量,或称为状态变量,一旦变量拥有了状态属性,就和自定义组件的渲染绑定起来。当状态改变时,UI会发生对应的渲染改变。 在状态变量相关装饰器中,@State是最基础的,使变量拥有状态属性的装饰器,它也是大部分状态变量的数据源。 说明: 从API version 9开

    2024年02月08日
    浏览(41)
  • 状态模式(State)

    状态 是一种行为设计模式,让你能 在 一个对象的内部状态变化时改变其行为 ,使其 看上去就像改变了自身所属的类一样 。 1. 问题 状态模式与有限状态机的概念紧密相关 。 其主要思想是程序在任意时刻仅可处于几种有限的状态中 。在任何一个特定状态中, 程序的行为都

    2024年02月12日
    浏览(59)
  • 状态模式(State)

    状态模式是一种行为设计模式,允许一个对象在其内部状态改变时改变它的行为,使其看起来修改了自身所属的类。其别名为状态对象(Objects for States)。 在很多情况下,一个对象的行为取决于一个或多个动态变化的属性,这样的属性叫做状态,这样的对象叫做有状态的(state

    2024年02月14日
    浏览(44)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包