HarmonyOS Next 状态管理：!! 状态修饰器实践

原创已于 2025-03-24 17:12:56 修改 · 1k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为

于 2025-03-14 11:01:47 首次发布

鸿蒙原生开发专栏收录该内容

9 篇文章

订阅专栏

一. !! 修饰器概述

!! 是一种语法糖，用于实现父子组件之间的双向数据绑定。它主要用于初始化子组件中的 @Param 和 @Event，其中 @Event 的命名规则为 $ + @Param 属性名。

双向绑定：当父子组件中使用 !! 语法时，父组件的数据变化会同步到子组件，子组件的数据变化也会同步到父组件。
单向绑定：如果父组件未使用 !! 语法，则数据流是单向的，父组件的变化不会同步到子组件。

二. !! 场景事件

2.1 简单使用!!实现双向绑定

@Entry
@ComponentV2
struct Index {
  @Local name: string = "父组件"

  build() {
    Column({space: 20}) {
      Text(`${this.name}`)
      Button('父组件中修改值')
        .onClick(() => {
           this.name = `父组件中：${Math.round(Math.random() * 100)}`
        })
      Line().width('100%').height(1).backgroundColor(Color.Gray)
      ChildComponent({cName: this.name!!})
    }
  }
}

@ComponentV2
struct ChildComponent {
  @Param cName: string = "子组件"
  @Event $cName: (name: string) => void

  build() {
    Column() {
      Text(`${this.cName}`)
      Button('子组件中修改值')
        .onClick(() => {
          this.$cName(`子组件中：${Date().toString()}`)
        })
    }
  }
}

关键点：

父组件更新：父组件中状态变量的变化会同步到子组件。
子组件更新：子组件中状态变量的变化会同步到父组件。
命名规则：@Event 的命名格式为 $ + @Param 属性名。
语法糖：父组件中传递参数时需在变量后添加 !!。

2.2 `!!` 的声明与使用差异

@Entry
@ComponentV2
struct Index {
  @Local name: string = "父组件"

  build() {
    Column({space: 20}) {
      Text(`${this.name}`)
      Button('父组件中修改值')
        .onClick(() => {
           this.name = `父组件中：${Math.round(Math.random() * 100)}`
        })
      Line().width('100%').height(1).backgroundColor(Color.Gray)
      ChildComponent({cName: this.name!!})
      Line().width('100%').height(1).backgroundColor(Color.Gray)
      AnotherChildComponent({aName: this.name})
    }
  }
}

@ComponentV2
struct ChildComponent {
  @Param cName: string = "子组件"
  @Event $cName: (name: string) => void

  build() {
    Column() {
      Text(`${this.cName}`)
      Button('子组件中修改值')
        .onClick(() => {
          this.$cName(`子组件中：${Date().toString()}`)
        })
    }
  }
}

@ComponentV2
struct AnotherChildComponent {
  @Param aName: string = "another子组件"
  @Event $aName: (name: string) => void = (name: string) => {}

  build() {
    Column() {
      Text(`another: ${this.aName}`)
      Button('another子组件中修改值')
        .onClick(() => {
          this.$aName(`another中：abc`)
        })
    }
  }
}

关键点：

双向绑定：使用 !! 语法时，父子组件之间的数据变化是双向的。
单向绑定：未使用 !! 语法时，数据流是单向的，子组件无法将数据变化同步回父组件。

2.3 多层组件数据更新

在日常开发中，通常会封装或抽象出小型可复用的组件，这涉及到多层级组件之间的数据传递。

2.3.1 数据的层级传递

@Entry
@ComponentV2
struct Index {
  @Local name: string = "父组件"

  build() {
    Column({space: 20}) {
      Text(`${this.name}`)
      Button('父组件中修改值')
        .onClick(() => {
           this.name = `父组件中：${Math.round(Math.random() * 100)}`
        })
      Line().width('100%').height(1).backgroundColor(Color.Gray)
      ChildComponent({cName: this.name!!})
    }
  }
}

@ComponentV2
struct ChildComponent {
  @Param cName: string = "子组件"
  @Event $cName: (name: string) => void

  build() {
    Column({space: 20}) {
      Text(`${this.cName}`)
      Button('子组件中修改值')
        .onClick(() => {
          this.$cName(`子组件中：${Date().toString()}`)
        })
      Line().width('100%').height(1).backgroundColor(Color.Gray)
      ItemComponent({iName: this.cName!!})
    }
  }
}


@ComponentV2
struct ItemComponent {
  @Param iName: string = "iName"
  @Event $iName: (name: string) => void = (name: string) => {}

  build() {
    Column({space: 20}) {
      Text(`item:${this.iName}`)
      Button('item更新数据')
        .onClick(() => {
          this.$iName(`item:${Math.round(Math.random() * 100)`)
        })
    }
  }
}

关键点：

数据传递：数据可以从父组件传递到子组件，再到更深层级的组件。
UI 刷新：只有父组件和直接子组件的数据更新会触发 UI 刷新。
局限性：!! 语法糖不支持多层级组件之间的双向数据绑定。

2.3.1 实现数据的多层级传递

@Entry
@ComponentV2
struct Index {
  @Local name: string = "父组件"

  build() {
    Column({space: 20}) {
      Text(`${this.name}`)
      Button('父组件中修改值')
        .onClick(() => {
           this.name = `父组件中：${Math.round(Math.random() * 100)}`
        })
      Line().width('100%').height(1).backgroundColor(Color.Gray)
      ChildComponent({cName: this.name!!})
    }
  }
}

@ComponentV2
struct ChildComponent {
  @Param cName: string = "子组件"
  @Event $cName: (name: string) => void

  build() {
    Column({space: 20}) {
      Text(`${this.cName}`)
      Button('子组件中修改值')
        .onClick(() => {
          this.$cName(`子组件中：${Date().toString()}`)
        })
      Line().width('100%').height(1).backgroundColor(Color.Gray)
      ItemComponent({iName: this.cName,
      $iName: (name: string) => {
        this.$cName(name)
      }})
    }
  }
}


@ComponentV2
struct ItemComponent {
  @Param iName: string = "iName"
  @Event $iName: (name: string) => void = (name: string) => {}

  build() {
    Column({space: 20}) {
      Text(`item:${this.iName}`)
      Button('item更新数据')
        .onClick(() => {
          this.$iName(`item:${Math.round(Math.random() * 100)}`)
        })
    }
  }
}

关键点：