HarmonyOS学习实验九：@State和@Prop装饰器的使用方法

news2025/5/25 19:57:44

HarmonyOS应用开发：父子组件状态管理实验报告

引言

在HarmonyOS应用开发领域，组件之间的状态管理是一个至关重要的概念。通过有效的状态管理，我们可以确保应用的数据流动清晰、可预测，从而提升应用的稳定性和可维护性。本次实验旨在探索HarmonyOS中父子组件之间的状态管理机制，特别是通过@State和@Prop装饰器实现状态传递的方法。

实验目的

本次实验的主要目的是在HarmonyOS应用中实现父子组件的状态管理，具体目标包括：

掌握@State装饰器的使用方法，用于在组件内部定义和管理状态。
理解@Prop装饰器的作用，实现父组件向子组件的状态传递。
验证单向数据流的状态管理机制，确保子组件不能直接修改父组件的状态。

实验环境与技术栈

开发软件：DevEco Studio（HarmonyOS官方推荐的集成开发环境）
操作系统：HarmonyOS（实验在HarmonyOS设备上运行）
API版本：API9（确保兼容性和最新特性支持）
编程语言与框架：ets（Extensible TypeScript），ArkUI框架（HarmonyOS的声明式UI开发框架）

实验步骤与代码实现

1. 创建父组件（ParentComponent.ets）

父组件是状态管理的核心，它负责定义和更新状态，并将状态传递给子组件。以下是父组件的关键代码实现：

// ParentComponent.ets
import {ChildComponent} from './ChildComponent';
@Entry
@Component
struct ParentComponent {
  // 父组件的状态变量，用于控制子组件的状态
  @State count: number = 0;

  build() {
    Column() {
      Text(`父组件计数: ${this.count}`)
        .fontSize(20)
        .margin({ top: 20 })

      // 增加计数按钮
      Button("增加计数")
        .margin({ top: 10 })
        .onClick(() => {
        this.count++;
      })

      // 减少计数按钮
      Button("减少计数")
        .margin({ top: 10 })
        .onClick(() => {
        this.count = Math.max(0, this.count - 1);
      })

      // 创建子组件，并将父组件的状态传递给子组件
      ChildComponent({ count: this.count })
    }
    .width("100%")
    .height("100%")
  }
}

2. 创建子组件（ChildComponent.ets）

子组件负责接收并展示父组件传递的状态，但不能直接修改父组件的状态。以下是子组件的关键代码实现：

// ChildComponent.ets
export {ChildComponent}
@Entry
@Component
struct ChildComponent {
  // 使用@Prop装饰器接收父组件传递的状态
  @Prop count: number;

  build() {
    Column() {
      Text(`子组件接收到的计数: ${this.count}`)
        .fontSize(18)
        .margin({ top: 20 })

      // 子组件内部按钮，尝试修改父组件的状态（但不会生效，因为@Prop是单向绑定）
      Button("尝试修改父组件计数（无效）")
        .margin({ top: 10 })
        .onClick(() => {
        this.count = 100; // 这里修改不会影响父组件
      })
    }
    .width("100%")
    .height("100%")
  }
}