HarmonyOS - 组件内部状态管理装饰器:Local

前言

在鸿蒙平台,采用的是声明式 UI 来描述页面内容。所以就需要状态管理装饰器来修饰变量,这样 UI 组件才能在数据变化的时候自动去更新内容。

在状态管理装饰器的 V2 版本中,组件内部的数据状态管理是通过 Local 来实现的。

Local

如果在我们的开发场景中,有一个数据仅在组件内部使用,无需与其他组件交互,那么我们就可以用 @Local 去修饰该变量。

假设我们需要开发一个直播页面中的,页面中有一个可以点赞的按钮,有一个可以显示点赞数的文本。由于点赞数量这个数据仅在当前页面使用,无需跟其他页面进行交互,那么我们就可以使用 @Local 来实现。

具体代码实现如下:

less 复制代码
@Entry
@ComponentV2
struct Index {
  @Local likeNum: number = 0;
  build() {
    Column() {
      Text(`点赞数:${this.likeNum}`)
      Button("点赞").onClick(() => {
        this.likeNum += 1
      })
    }
  }
}

效果图如下:

通过上述代码可以看出,它的使用方式还是比较简单的。但在使用的过程中,我们有一些事项还是需要注意一下的。

注意事项

第一点就是 @Local 修饰的变量,只能进行本地初始化,不能从外部传递。这是比较好理解的,因为它的作用就是进行组件内部的状态管理。如果允许进行外部传递,那就破坏了组件内部的这个条件,违反了该装饰器的设计原则。

它修饰的变量必须进行本地化,否则会编译报错。比如下面的代码:

less 复制代码
// 编译报错:Property 'likeNum' has no initializer and is not definitely assigned in the constructor. <ArkTSCheck>
@Local likeNum: number;

第二点需要注意的就是,如果它修饰的是 class 类型的变量,那么只能监测到对象赋值的变化,对于对象属性的变化是监测不到的。比如下面的代码:

less 复制代码
class Live {
  likeNum: number = 0

  constructor(likeNum: number) {
    this.likeNum = likeNum;
  }
}

@Entry
@ComponentV2
struct Index {
  @Local like: Live = new Live(0);
  build() {
    Column() {
      Text(this.like.likeNum.toString())
      Button("点赞").onClick(() => {
        this.like.likeNum += 1
      })
    }
  }
}

首先,我们声明了一个 Live 的类将点赞数当其属性。然后定义了一个 Live 类型的变量 like,用 @Local 修饰。最后将 Text 与 like的 likeNum 属性进行绑定。

当我们点击点赞按钮的时候,就会发现虽然我们在按钮的点击事件中将 like 的 likeNum 进行了 +1 操作,但 Text 的内容并没有进行更新。

这种情况的原因就是 @Local 如果修饰的是类的实例对象,那么只能监测到赋值变化,不能监测到属性变化。赋值变化如下面的示例代码:

javascript 复制代码
Button("点赞").onClick(() => {
  this.like = new Live(10)
})

这次,我们点击按钮可以发现,Text 组件的内容会变成 10。

与 @State 的对比

之前熟悉 HarmonyOS 的朋友应该知道 V1 版本的 @State,它是最基础的状态管理装饰器,起初的设计也是用于组件内的状态管理。但因为它修饰的变量可以从外部进行传入,破坏了它组件内的设计初衷。所以 V2 版本又推出了 @Local 装饰器,用来保证了组件内的设计原则。

总结

  • 使用场景:组件内部的状态管理,不能与外部组件交互;
  • 使用方式:必须本地初始化,否则编译报错;
  • 限制:装饰的 class 类型的变量,只能检测到变量的赋值变化,变量的属性变化是无法检测的;
相关推荐
zhanshuo3 小时前
ArkUI 玩转水平滑动视图:超全实战教程与项目应用解析
harmonyos·arkui
zhanshuo3 小时前
ArkUI Canvas 实战:快速绘制柱状图图表组件
harmonyos·arkui
zhanshuo17 小时前
手把手教你用 ArkUI 写出高性能分页列表:List + onScroll 实战解析
harmonyos
zhanshuo17 小时前
深入解析 ArkUI 触摸事件机制:从点击到滑动的开发全流程
harmonyos
i仙银1 天前
鸿蒙沙箱浏览器 - SandboxFinder
app·harmonyos
Georgewu1 天前
【HarmonyOS】鸿蒙应用开发中常用的三方库介绍和使用示例
harmonyos
AORO20251 天前
遨游三防平板|国产芯片鸿蒙系统单北斗三防平板,安全高效
5g·安全·电脑·制造·信息与通信·harmonyos
HarmonyOS小助手1 天前
“秒开”时代,HarmonyOS预加载让应用启动快如闪电
harmonyos·鸿蒙·鸿蒙生态
三翼鸟数字化技术团队2 天前
鸿蒙平台运行Lua脚本
lua·harmonyos