关于状态变量@state必须知道的事

HarmonyOS

踮脚在树梢上

2024-06-11 20:33:22

浏览

回答 1

按赞同

按时间

智体美劳全发展

开发过程中，对于状态变量的使用开发者总是很难搞清楚，不同状态变量的使用场景；不管什么数据类型都用@state修饰，遇到class就用observe修饰，到运行时就会发现根本无法达到预期。所以本文引入几个概念，尽量将状态变量的使用场景描述清楚，尤其是@state和observe的使用场景。

@state和单层数据

首先我们先引入单层数据的定义：

单层数据：基础数据类型（string、boolean、number）、由

基础数据类型的成员变量组合的类或者者集合（如：Array<string>）和数组长度及数组某成员的整体变化；为了各位更好的理解，给大家举个常用的例子：

class PcTabState { 
  id: string; 
  visible: boolean = false 
  
  constructor(id: string) { 
    this.id = id 
  } 
} 
  
@Entry 
@Component 
struct ForDemo { 
  @State tabs: Array<PcTabState> = [new PcTabState("1"), new PcTabState("2")] 
  
  build() { 
    Button().onClick(() => { 
      this.tabs[0] = new PcTabState("3") // 属于整个对象的替换，可以监测 
      this.tabs[0].id = "4" // 这个相当于二层监听，在不使用observe的前提下 无法监听 
      this.tabs = this.tabs.splice(1, 1) // 数组长度发生变化，可以监听 
    }) 
  } 
} 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

对于单层数据的变化，@state都可以完美修饰，从而体现在视图上；致此大家可以看到并非所有的类都需要@observe来修饰，那什么时候需要使用@observe和@objectLink,各位看官请继续往下走；

@observe、@objectLink和双层数据

在单层数据的基础上，我们再引入双层数据结构的定义，大家应该就很容易理解了：

双层数据：class中包含额外class类型的成员变量（依赖的class仍是由基础类型组成），Array中的class的成员变量（你懂得特指class中的基础成员变量）

如果你想这些双层数据的变化也能够完美的体现在视图上，这时候就得引入@observe和@objectLink了现将这些class用@observe修饰，然后再在子组件里使用@0bjectLink接收。下文对于以上这两种情形已具体demo给出，各位看官请观看：

@Observed 
class PcTabState { 
  id: string; 
  visible: boolean = false 
  
  constructor(id: string) { 
    this.id = id 
  } 
} 
  
@Entry 
@Component 
struct ForDemo { 
  @State tabs: Array<PcTabState> = [new PcTabState("1"), new PcTabState("2")] 
  
  build() { 
    Column() { 
  
      ForEach(this.tabs, (item: PcTabState) => { 
        ViewA({ tab: item }) 
      }, (item) => item.id) 
  
      Button('change') 
        .onClick(() => { 
          this.tabs[0].visible = true 
        }) 
    } 
  
  } 
} 
  
@Component 
struct ViewA { 
  @ObjectLink tab: PcTabState 
  
  build() { 
    Column() { 
      Text('visible is : ' + this.tab.visible).fontSize(25) 
    } 
  } 
}  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.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

总结：

当前arkui对于复杂数据的支持，需要借助observe和objectLink来支持，原则上每多一层数据结构，就需要新增observe来观测。在附件中附上一个二维数组的改造的数据结构，可以完美监听二维数组的数据变化。

2024-06-12 17:27:03

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

关于状态变量@state必须知道的事

订阅鸿蒙技术特刊，精选内容抢先看