鸿蒙开发中的常见关键字简单总结

如果总结的有问题，欢迎大家指出来！

在鸿蒙应用开发中（特别是使用 ArkUI 框架和 ArkTS 语言时），装饰器（Decorators） 是关键概念，用于声明组件、管理状态和定义交互逻辑。以下是常用关键字的详细介绍及代码示例：

1. @Entry

作用：标记应用的主入口组件，一个页面有且仅有一个 @Entry。
示例：

typescript 复制代码

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('Hello HarmonyOS')
    }
  }
}

2. @Component

作用：定义自定义组件，必须与 struct 结构体一起使用。
示例：

typescript 复制代码

@Component
struct MyComponent {
  build() {
    Text('自定义组件')
  }
}

3. @State

作用：组件内部的状态变量，变化时触发 UI 更新。
示例：

typescript 复制代码

@Entry
@Component
struct Counter {
  @State count: number = 0

  build() {
    Column() {
      Text(`Count: ${this.count}`)
      Button('增加').onClick(() => {
        this.count++
      })
    }
  }
}

点击按钮时，count 变化会自动更新 Text 显示。

4. @Prop

作用：子组件接收父组件的单向数据，变化会更新子组件。
示例：

typescript 复制代码

// 父组件
@Entry
@Component
struct Parent {
  @State parentCount: number = 10

  build() {
    Column() {
      Child({ count: this.parentCount }) // 传递数据
      Button('父修改').onClick(() => {
        this.parentCount++
      })
    }
  }
}

// 子组件
@Component
struct Child {
  @Prop count: number

  build() {
    Text(`子组件收到: ${this.count}`)
  }
}

父组件的 parentCount 变化会同步到子组件，但子组件无法直接修改 count。

5. @Link

作用：父子组件间的双向绑定 数据，任何一方修改都会同步。
示例：

typescript 复制代码

// 父组件
@Entry
@Component
struct Parent {
  @State parentCount: number = 20

  build() {
    Column() {
      Child({ countLink: $parentCount }) // 使用 $ 传递引用
      Button('父修改').onClick(() => {
        this.parentCount++
      })
    }
  }
}

// 子组件
@Component
struct Child {
  @Link countLink: number

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

父组件和子组件均可修改 countLink，数据双向同步。

6. @Provide 和 @Consume

作用：跨层级组件共享数据，祖先组件提供数据（@Provide），后代组件消费数据（@Consume）。
示例：

typescript 复制代码

// 祖先组件
@Entry
@Component
struct Grandparent {
  @Provide shareData: string = '全局数据'

  build() {
    Column() {
      Parent()
    }
  }
}

// 中间组件
@Component
struct Parent {
  build() {
    Child()
  }
}

// 后代组件
@Component
struct Child {
  @Consume shareData: string

  build() {
    Text(`收到数据: ${this.shareData}`)
  }
}

7. @Watch

作用：监听状态变量变化，执行回调函数。
示例：

typescript 复制代码

@Entry
@Component
struct WatchExample {
  @State count: number = 0
  @State log: string = ''

  @Watch('count') // 监听 count 变化
  watchCount() {
    this.log = `Count 变为 ${this.count}`
  }

  build() {
    Column() {
      Text(this.log)
      Button('增加').onClick(() => {
        this.count++
      })
    }
  }
}

8. @Builder

作用：创建可复用的 UI 构建函数。
示例：

typescript 复制代码

@Entry
@Component
struct BuilderExample {
  @Builder customButton(text: string) {
    Button(text)
      .width(100)
      .height(40)
      .backgroundColor(Color.Blue)
  }

  build() {
    Column() {
      this.customButton('按钮1')
      this.customButton('按钮2')
    }
  }
}

9. @Styles

作用：定义可复用的样式集合。
示例：

typescript 复制代码

@Entry
@Component
struct StyleExample {
  @Styles commonStyle() {
    .width(200)
    .height(50)
    .backgroundColor(Color.Green)
  }

  build() {
    Column() {
      Text('文本1').commonStyle()
      Button('按钮').commonStyle()
    }
  }
}

总结

状态管理 ：@State、@Prop、@Link、@Provide/@Consume
UI 构建 ：@Entry、@Component、@Builder、@Styles
副作用监听 ：@Watch

合理使用这些关键字可以高效管理组件状态和数据流，构建响应式 UI。根据具体场景选择单向 (@Prop) 或双向 (@Link) 数据绑定，跨组件共享数据时考虑 @Provide/@Consume。