如何在ArkTS中动态更新状态并触发组件重新渲染？

Question

我在开发过程中，需要动态更新组件的状态，并希望组件能够自动重新渲染。请问在ArkTS中如何实现这种动态更新和重新渲染？能否提供一个包含动态更新逻辑的代码示例？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

在ArkTS中动态更新状态并触发组件重新渲染很简单。你只需要确保状态是被@Observed装饰器标记的，然后直接修改这个状态的值就可以了。当状态的值发生变化时，依赖这个状态的组件会自动重新渲染。

@Component
struct MyComponent {
  @Observed count: number = 0;

  increment() {
    this.count++;
  }

  render() {
    return <Text>{this.count}</Text>;
  }
}

在这个例子里，count状态被@Observed装饰器标记为可观察的。当调用increment方法时，count的值会增加，同时组件会自动重新渲染显示新的值。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。