Harmony OS 常用装饰器介绍与使用

移动开发 2024-11-04 22:47:07 阅读次数: 0

HarmonyOS 提供了多种装饰器（decorators），用来简化代码的逻辑，提高代码的可读性和复用性。在这个博客中，我们将介绍 HarmonyOS 常用的一些装饰器以及它们的使用方法，帮助开发者高效地管理状态、事件和组件生命周期。

什么是装饰器（Decorator）？

装饰器是一种用于扩展和增强类、方法或属性的函数。在 HarmonyOS 中，装饰器主要用于页面和组件开发，比如数据绑定、状态管理和组件生命周期控制。常见的装饰器包括 @State、@Prop、@Watch 等。

1. @State：状态管理

@State 用于定义一个组件的内部状态变量，当状态发生变化时，页面会自动重新渲染。

使用示例：

import {
    
     State } from '@ohos/tf';

class Counter {
    
    
  @State count = 0;

  increment() {
    
    
    this.count++;
  }
}

说明：

@State 将 count 标记为一个状态变量。
当调用 increment() 增加 count 时，页面会重新渲染显示最新的状态。

场景：

适用于组件内部需要维护的临时状态，如按钮的点击次数、输入框内容等。

2. @Prop：接收外部参数

@Prop 用于接收来自父组件的属性，这些属性是只读的，不应该在子组件内部修改。

使用示例：

import {
    
     Prop } from '@ohos/tf';

class ChildComponent {
    
    
  @Prop title;
  render() {
    
    
    console.log('Title:', this.title);
  }
}

说明：

父组件传递的 title 会通过 @Prop 注入到子组件中。
子组件只能读取 title，但不能修改它。

场景：

适用于需要从父组件传递数据的子组件，如展示型组件。

3. @Provide 和 @Consume：依赖注入

@Provide 和 @Consume 用于组件树上下文中的状态共享。父组件提供状态，子组件可以消费这些状态。

使用示例：

import {
    
     Provide, Consume } from '@ohos/tf';

class Parent {
    
    
  @Provide('theme') theme = 'dark';
}

class Child {
    
    
  @Consume('theme') theme;
  
  render() {
    
    
    console.log('Theme:', this.theme);  // 输出 'dark'
  }
}

说明：

@Provide 让父组件提供 theme 数据。
@Consume 让子组件可以获取 theme 数据。

场景：

适用于组件间的全局状态共享，如主题、用户信息等。

4. @Watch：监听属性变化

@Watch 用于监听某个状态或属性的变化，并在变化时触发回调函数。

使用示例：

import {
    
     State, Watch } from '@ohos/tf';

class Example {
    
    
  @State value = 0;

  @Watch('value')
  onValueChange(newVal, oldVal) {
    
    
    console.log(`Value changed from ${
      
      oldVal} to ${
      
      newVal}`);
  }

  increment() {
    
    
    this.value++;
  }
}

说明：

当 value 发生变化时，onValueChange 会自动触发。
可以用来监控数据的变化并执行特定逻辑。

场景：

适用于需要监控状态变化并做出响应的场景，如表单验证。

5. @Link 和 @Emit：事件绑定与触发

@Link：绑定事件回调到组件的某个属性上。
@Emit：用于从组件内部触发事件，并通知父组件处理。

使用示例：

import {
    
     Link, Emit } from '@ohos/tf';

class ChildComponent {
    
    
  @Emit('onClick')
  notifyParent() {
    
    }

  handleClick() {
    
    
    this.notifyParent();
  }
}

class ParentComponent {
    
    
  @Link('onClick') handleChildClick() {
    
    
    console.log('Child component clicked');
  }
}