页面预览

前言

在 ArkUI 中，@Link 和 @Prop 都用于父子组件间的数据传递，但它们的同步方向和使用场景不同。@Prop 是单向的（父 → 子），而 @Link 是双向同步的。本文以小事记（xiaoshiji_ohos_app） 的组件扩展场景为背景，深入解析 @Link 与 @Prop 的区别和深层原理。

本文参考 HarmonyOS 官方文档：arkts-state-management-v1.md 和 状态管理 FAQ。

一、@Prop 单向数据流

1.1 基本用法

// 父组件
@Entry
@Component
struct Parent {
  @State count: number = 0;

  build() {
    Column() {
      Child({ count: this.count })  // 单向传递
      Button('增加').onClick(() => {
        this.count++;
      })
    }
  }
}

// 子组件
@Component
struct Child {
  @Prop count: number = 0;  // 接收父组件数据

  build() {
    Text(`计数: ${this.count}`)
  }
}

二、@Link 双向同步

2.1 基本用法

// 父组件
@Entry
@Component
struct Parent {
  @State count: number = 0;

  build() {
    Column() {
      Child({ count: this.count })  // 双向绑定
      Text(`父组件: ${this.count}`)
    }
  }
}

// 子组件
@Component
struct Child {
  @Link count: number;  // 双向同步

  build() {
    Button('子组件增加')
      .onClick(() => {
        this.count++;  // 修改会同步到父组件
      })
  }
}

三、@Prop 与 @Link 的对比

对比维度 @Prop @Link
数据方向 父 → 子 父 ↔ 子
子组件修改 不允许 允许
同步方式 单向 双向
使用场景 展示数据 交互数据
初始化 可有默认值 必须由父组件传入

四、选择建议

场景 推荐装饰器 原因
展示数据 @Prop 子组件只读，数据流清晰
表单输入 @Link 子组件需要修改数据
配置项 @Prop 父组件控制子组件行为
选择状态 @Link 子组件可以切换选中状态

五、

// 使用 @Watch 监听状态变化
@State @Watch("onCountChange") count: number = 0;

onCountChange(): void {
  console.log(`count 变化为: ${this.count}`);
}

常见问题

5.1 @Link 不生效

问题：子组件修改了 @Link 变量，但父组件没有更新。

解决方案：确保父组件使用 @State 装饰变量。

// 父组件必须使用 @State
@State count: number = 0;
Child({ count: this.count })

八、拓展阅读

本节汇总了与本文主题相关的扩展阅读材料，帮助读者深入理解相关技术细节。

8.1 官方文档

8.2 相关技术文章

  • 性能优化最佳实践
  • 常见问题排查指南

8.3 社区资源

十、最佳实践与优化建议

在实际开发中，合理运用上述技术可以显著提升应用的性能和用户体验。以下是几个关键的最佳实践建议：

10.1 性能优化要点

优化方向 具体措施 预期效果
渲染性能 减少不必要的组件重建 提升帧率
内存管理 及时释放不再使用的资源 降低内存占用
响应速度 避免在主线程执行耗时操作 提升交互流畅度

10.2 推荐实践步骤

按照以下步骤进行优化：

  1. 使用 DevEco Studio 的 Profiler 工具分析当前性能瓶颈
  2. 针对识别出的热点进行针对性优化
  3. 通过单元测试和集成测试验证优化效果
  4. 在真机环境下进行回归测试

10.3 代码示例

// 推荐的最佳实践示例
@Component
export struct OptimizedComponent {
  // 使用 @State 管理最小粒度的状态
  @State private isActive: boolean = false;

  build() {
    Column() {
      Text(this.isActive ? '激活' : '未激活')
        .fontSize(16)
    }
    .onClick(() => {
      // 使用 animateTo 实现平滑过渡
      animateTo({ duration: 300 }, () => {
        this.isActive = !this.isActive;
      });
    });
  }
}

最佳实践提示：在编写代码时，始终遵循 ArkUI 的性能优化原则，避免在 build() 方法中执行复杂计算或频繁的状态更新。

十、进一步学习与拓展

掌握以上内容后，可以进一步探索以下相关主题，深化对 HarmonyOS 开发的理解：

10.1 推荐学习路径

学习阶段 主题 预期目标
基础阶段 掌握核心概念和 API 用法 能够独立完成基本功能开发
进阶阶段 理解底层原理和最佳实践 能够优化应用性能和用户体验
高级阶段 掌握架构设计和性能调优 能够主导复杂项目的技术方案

10.2 实践项目建议

建议通过以下实践项目巩固所学知识：

  1. 基于小事记项目，尝试独立实现一个类似的功能模块
  2. 阅读 HarmonyOS 官方 Sample 代码，学习最佳实践
  3. 参与开源社区，贡献代码或文档

10.3 相关资源

  • HarmonyOS 官方文档：提供完整的 API 参考和开发指南
  • DevEco Studio 文档：包含 IDE 使用技巧和调试方法
  • 开源社区：获取项目源码和开发经验

学习建议：理论与实践相结合，在阅读文档的同时动手编写代码，才能更好地掌握 HarmonyOS 应用开发技能。

10.4 拓展阅读

以下资源可以加深对本文内容的理解：

  1. HarmonyOS 官方开发者文档提供了最权威的 API 参考和最佳实践指南
  2. 开源社区的项目源码是学习实际应用开发的宝贵资源
  3. DevEco Studio 的代码示例模板可以帮助快速上手
资源类型 推荐指数 适用人群
官方文档 ⭐⭐⭐⭐⭐ 所有开发者
开源项目 ⭐⭐⭐⭐ 中级开发者
技术博客 ⭐⭐⭐ 入门开发者

学习路径：建议按照"官方文档 → 开源项目 → 实践项目"的路径循序渐进地学习。

十、完整示例：状态管理实战

将状态管理逻辑封装为可复用的 Store 模式，可以提升代码的可维护性。

10.1 Store 封装

// AppStore.ets — 全局状态管理
import { AppStorage } from '@kit.ArkUI';

export class AppStore {
  @StorageLink('themeColor') themeColor: string = '#7B68EE';
  @StorageLink('isLogin') isLogin: boolean = false;
  @StorageLink('userName') userName: string = '';

  toggleTheme(): void {
    this.themeColor = this.themeColor === '#7B68EE' ? '#FF6B9D' : '#7B68EE';
  }

  login(name: string): void {
    this.isLogin = true;
    this.userName = name;
  }

  logout(): void {
    this.isLogin = false;
    this.userName = '';
  }

  get displayName(): string {
    return this.isLogin ? this.userName : '未登录';
  }
}

10.2 组件中使用

@Component
export struct SettingsView {
  private store: AppStore = new AppStore();

  build() {
    Column() {
      Text(`当前用户: ${this.store.displayName}`)
        .fontSize(16)
        .margin({ bottom: 16 })

      Button('切换主题')
        .fontSize(14)
        .fontColor(Color.White)
        .backgroundColor('#7B68EE')
        .borderRadius(20)
        .onClick(() => { this.store.toggleTheme(); })
    }
    .padding(20)
    .width('100%')
  }
}

10.3 状态管理方案对比

方案 作用域 持久化 适用场景
@State 组件内 否 局部 UI 状态
@Link/@Prop 父子组件 否 组件间数据传递
AppStorage 全局 是 跨页面共享数据
PersistentStorage 全局 持久化 用户偏好设置

状态管理原则：将状态尽量下沉到最需要它的组件层级，避免不必要的全局状态导致性能开销。

总结

// 状态管理示例
@State count: number = 0;

build() {
  Column() {
    Text(`计数: ${this.count}`)
      .fontSize(20)
    Button("增加")
      .onClick(() => {
        this.count++;
      })
  }
}

本文深入解析了 @Link 与 @Prop 的深层原理。核心要点如下：

  1. @Prop 单向数据流：父 → 子，子组件不能修改
  2. @Link 双向同步：父 ↔ 子，子组件修改同步到父组件
  3. 选择建议：展示用 @Prop，交互用 @Link
  4. 使用限制：@Link 必须由父组件传入，不能有默认值

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

// 数据绑定示例
@Entry
@Component
struct DataBinding {
  @State message: string = "Hello HarmonyOS";

  build() {
    Column() {
      Text(this.message)
        .fontSize(20)
        .fontColor("#7B68EE")
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

// 条件渲染示例
@State isVisible: boolean = false;

build() {
  Column() {
    if (this.isVisible) {
      Text("内容可见")
        .fontSize(16)
    }
    Button("切换")
      .onClick(() => {
        this.isVisible = !this.isVisible;
      })
  }
}

九、完整示例代码

9.1 完整组件实现

以下是一个完整的组件实现示例，展示了本文介绍的各个技术点的综合运用：

import { Component, State, Prop } from '@kit.ArkUI';

@Component
export struct DemoComponent {
  @Prop title: string = '';
  @State count: number = 0;

  build() {
    Column({ space: 12 }) {
      // 标题区域
      Text(this.title)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .fontColor('#1A1A2E')
        .width('100%')

      // 内容区域
      Text(`当前计数: ${this.count}`)
        .fontSize(14)
        .fontColor('#6B7280')

      // 交互按钮
      Button('点击增加')
        .width(120)
        .height(40)
        .backgroundColor('#7B68EE')
        .borderRadius(20)
        .fontColor(Color.White)
        .onClick(() => {
          this.count++;
        })
    }
    .width('100%')
    .padding(16)
    .backgroundColor(Color.White)
    .borderRadius(12)
    .shadow({ radius: 4, color: '#00000008', offsetX: 0, offsetY: 2 })
  }
}

9.2 使用方式

在页面中引入并使用该组件：

@Entry
@Component
struct Index {
  build() {
    Column() {
      DemoComponent({ title: '示例组件' })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F8F9FA')
  }
}

9.3 代码说明

  • 组件封装：使用 @Component 装饰器定义可复用的组件
  • 状态管理：使用 @State 管理组件内部状态
  • 参数传递：使用 @Prop 接收外部传入的参数
  • 事件处理：使用 onClick 处理用户交互
  • 样式优化：使用 borderRadius、shadow 等属性美化 UI

相关资源：

# harmonyos # pytorch # 深度学习
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

【开发者故事】集成 HarmonyOS App Linking 能力，搜觅 App 重塑高效专注搜索新体验

avatar HarmonyOS开发者社区
cover

7月27日AI日报 | Claude Opus 5 上线灵知，WorkBuddy 鸿蒙 PC 版上架

avatar HarmonyOS开发者社区

鸿蒙 构建：Hvigor插件开发（二）

本文介绍了Hvigor插件开发的两种方式：hvigorfile脚本和TypeScript项目。hvigorfile脚本开发快速但难以复用，适合临时需求；TypeScript项目开发流程较复杂但支持复用和分发，推荐用于正式插件开发。详细说明了TypeScript项目从初始化、开发到发布的全流程，包括配置镜像、添加依赖、编写实现HvigorPlugin接口的代码、编译发布等步骤。最后对比了两种方式的优

avatar HarmonyOS开发者社区