开启鸿蒙HarmonyOS之旅（二：状态管理，传值）

前言

上一节简单开篇，进行了准备工作和一些ArcTS的基本语法，这篇主要讲数据方面，主要就是状态管理和传值，是很重点的一方面，所以并没有和上一节放在一起，这部分有些人会发现和别的框架有相似之处，我也希望大家不要说抄谁抄谁的，毕竟像的话对开发者来说可以很大一部分降低学习成本，并没有什么不好的

好的，咱们开始吧~

状态管理

@State

@State是一个装饰器，是用来存放数据的，比较好理解，而且在之前的代码例子我们就已经见过了

由@State的数据来进行状态驱动视图更新

代码很简单

js 复制代码

@State count: number = 0;

需要注意的是@State初始化的数据必须赋值

这里我们讨论简单用法，至于复杂的用法可以到项目中介绍

传值

关于传值，官网给了一张图片，我们目前只关注组件的传值即可

通过这个图我们观察出，有父母，有孩子，有子孙，这体现出了组件之间的层级关系，有层级了才能体现出传递性

同时我们还发现，有的箭头是单向的，有的是双向的，所以证明父-子-孙之间是可以互相进行数据传递的，其中就会有单层传递，也可以跨层传递，所以就会有不同的装饰器来完成对应的功能

其实根据这个图，有别的框架学习经验的朋友已经大概了解了，也能看出来哪个是单向的装饰器，哪个是双向的，以及哪个是跨级的了

那咱们挨个介绍吧~

@Prop、@Link装饰器

@Prop装饰器用来进行父子组件的通信，并且是单向的传递

但是这里需要注意的是，用@Prop装饰的数据是不可以进行赋值的

js 复制代码

@Entry
@Component
struct Demo {
  @State message: string = 'shaka'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button('改变子组件数据')
          .width(200)
          .height(200)
          .onClick(()=>{
            this.message = 'virgo'
          })
        Son({name:this.message})
      }
      .width('100%')
    }

    .height('100%')
  }
}

@Component  //子组件
struct Son {
  @Prop name:string //不能进行赋值
  build() {
    Row(){
      Text(this.name)
        .fontSize(50)
      Button('改变父组件数据')
        .width(200)
        .height(200)
        .backgroundColor(Color.Orange)
        .onClick(()=>{
          this.name = 'hhh'
        })
    }
  }
}

此时数据只能由父组件传递给子组件，不能从子组件传递给子组件

那么我们的@Link装饰器则是可以进行双向传递

我们只需要把之前代码的@Prop改成@Link即可

这回可以进行双向通信了

@Provide装饰器和@Consume装饰器

父子通信完事了，我们可以进行跨级别通信了，也就是爷孙传值

js 复制代码

@Entry
@Component
struct Grandpa {
  @Provide name: string = 'shaka'

  build() {
    Row() {
      Column({ space: 20 }) {
        Text(this.name)
          .onClick(() => {
            this.name = '这是爷组件改变的'
          })
          .backgroundColor(Color.Gray)
          .width(200)
          .height(100)
          .fontSize(50)
        Divider()
        Father()
      }.width('100%')
    }.height('100%')
  }
}

@Component
struct Father {
  build() {
    Column({ space: 20 }) {
      Text('这是子组件')
        .backgroundColor(Color.Red)
        .width(200)
        .height(100)
        .fontSize(50)
      Divider()
      Des()
    }
  }
}

@Component
struct Des {
  @Consume name: string

  build() {
    Column() {
      Text( this.name)
        .onClick(() => {
          this.name = '这是孙组件改变的'
        })
        .backgroundColor(Color.Orange)
        .width(200)
        .height(150)
        .fontSize(50)
    }
  }
}

需要注意的是@Provide和@Consume装饰的变量名应保持一致，或者用变量别名

这里官网给了示例

效果是一样的

这样可以进行爷孙传值，并且是双向的

结尾

大致介绍了一下，ArcTS中的状态管理，以及各种传值，对于接触过别的框架的朋友理解起来非常轻松

其中 @Observed装饰器和@ObjectLink装饰器是针对于嵌套的数据类型，其实主要针对的就是class的形式

而关于class类型的数据类型，其实就是面向对象编程思想

这是一种思想，并不算ArcTS的内容，所以我没有讲，如果真的实际用到了，我到时候会大致说一下的，所以不算是这里的重点

下节我会讲一些剩下的较为基础和项目结构的知识点，然后再往下就进入到项目，遇到什么就讲什么

希望对您有帮助