在 HarmonyOS 的 JavaScript 和 TypeScript 开发环境中，@State、@Link、@Provide 和 @Consume 是用于状态管理和数据绑定的重要装饰器。它们各自有不同的用法和适用场景。


@State 与 @Link

@State

定义：@State 用于声明一个组件内部的状态变量，它会触发组件重新渲染。

作用范围：仅在当前组件内有效。

用途：适合用于单个组件内部的状态管理。


import { Observed, State } from 'ohos-typecobindings-reactive';

@Component
class MyComponent extends ViewComponent {
  @State message: string = "Hello, World!";

  build() {
    Column() {
      Text(this.message)
        .width('100%')
        .height(50)
        .onClick(() => {
          this.message = "Message updated!";
        });
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.

@Link

定义：@Link 用于父子组件之间的数据传递，允许子组件读取和改变父组件的状态。

作用范围：子组件可以通过 @Link 访问到父组件的状态，并且修改该状态会同步回父组件。

用途：适合用于父子组件间的双向绑定。


import { Observed, Link } from 'ohos-typecobindings-reactive';

@Component
class ParentComponent extends ViewComponent {
  @Observed message: string = "Hello from Parent Component!";

  build() {
    Column() {
      ChildComponent()
        .message(this.message);
    }
  }
}

@Component
class ChildComponent extends ViewComponent {
  @Link message!: string;

  build() {
    Column() {
      Text(this.message)
        .width('100%')
        .height(50)
        .onClick(() => {
          this.message = "Message updated by Child!";
        });
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.

@Provide 与 @Consume

@Provide

定义：@Provide 用于将数据提供给树状结构中的所有子组件。

作用范围：在整个组件树中传播，但不会自动触发重新渲染。

用途：适合用于跨多个层级的组件数据共享。


import { Observed, Provide } from 'ohos-typecobindings-reactive';

@Component
class ParentComponent extends ViewComponent {
  @Provide themeColor: string = "blue";

  build() {
    Column() {
      ChildComponent();
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

@Consume

定义：@Consume 用于消费由上层组件通过 @Provide 提供的数据。

作用范围：在整个组件树中消费数据。

用途：适合用于需要跨多个层级传递数据的场景。


import { Observed, Consume } from 'ohos-typecobindings-reactive';

@Component
class ChildComponent extends ViewComponent {
  @Consume themeColor!: string;

  build() {
    Column() {
      Text("Theme Color: " + this.themeColor)
        .width('100%')
        .height(50);
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

双向绑定的区别

@State 与 @Link 的双向绑定


范围：局限于父子组件关系。

可见性：@State 仅在当前组件内部有效，而 @Link 则允许子组件访问和修改父组件的状态。

重渲染：修改 @State 的值会导致组件重新渲染；通过 @Link 修改父组件的状态也会触发重新渲染。


@Provide 与 @Consume 的双向绑定

范围：可以跨越多个组件层级，不局限于直接的父子关系。

可见性：@Provide 可以在整个组件树中提供数据，而 @Consume 用于获取这些数据。

重渲染：@Provide 和 @Consume 本身并不会自动导致组件重新渲染，需要手动调用方法来触发。


总结

使用 @State 和 @Link 进行状态管理时，主要适用于父子组件间的状态传递和双向绑定。

使用 @Provide 和 @Consume 则适用于更复杂的组件层级，通过上下文方式共享数据。


根据实际需求选择合适的状态管理策略，可以有效提升代码的可读性和维护性。