OpenHarmony应用ArkUI 状态管理开发案例

在声明式UI编程框架中，UI是程序状态的运行结果，用户构建了一个UI模型，其中应用的运行时的状态是参数。当参数改变时，UI作为返回结果，也将进行对应的改变。这些运行时的状态变化所带来的UI的重新渲染，在ArkUI中统称为状态管理机制。

自定义组件拥有变量，变量必须被装饰器装饰才可以成为状态变量，状态变量的改变会引起UI的渲染刷新。如果不使用状态变量，UI只能在初始化时渲染，后续将不会再刷新。 下图展示了State和View（UI）之间的关系。

管理组件拥有的状态

@State装饰器：组件内状态

@State装饰的变量，或称为状态变量，一旦变量拥有了状态属性，就和自定义组件的渲染绑定起来。当状态改变时，UI会发生对应的渲染改变。

在状态变量相关装饰器中，@State是最基础的，使变量拥有状态属性的装饰器，它也是大部分状态变量的数据源。

@link装饰器：父子双向同步

子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。

@Link装饰的变量与其父组件中的数据源共享相同的值。

@Component
export struct DetailPage {
  @State currentLocation: string = ''
}

在父组件DetailPage中声明当前定位currentLocation变量

Panel(this.isPanel) {
    Location({ isPanel: $isPanel, currentLocation: $currentLocation })
}

将currentLocation变量传给子组件Location

@Component
export struct Location {
  @Link currentLocation: string
}

子组件用@Link装饰的currentLocation接收。

@Builder cityList(city: any) {
  if (this.currentLocation === city.name) {
    List() {
      ForEach(city.city, twoCity => {
        ListItem() {
          Column() {
            Text(`${twoCity}