• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# @State
2
3
4The @State decorated variable is the internal state data of the component. When the state data is modified, the build method of the component is called to refresh the UI. Note that the @State decorator cannot listen for data changes at the inner layer.
5
6
7The @State data has the following features:
8
9
10- Support for multiple types: The following types are supported: strong types by value and by reference, including class, number, boolean, string, as well as arrays of these types, that is, Array<class>, Array<string>, Array<boolean>, and Array<number>. object and any are not allowed.
11
12- Support for multiple instances: Multiple instances can coexist in a component. The internal state data of different instances is independent.
13
14- Private: An attribute marked with @State can only be accessed within the component.
15
16- Local initialization required: Initial values must be allocated to all @State decorated variables through the initialization process. Otherwise, they may become undefined in the framework.
17
18- Support for setting of initial attribute values based on the state variable name: When creating a component instance, you can explicitly specify the initial value of the @State decorated attribute based on the variable name.
19
20
21## Simple Example of @State Decorated Attribute
22
23```ts
24// xxx.ets
25@Entry
26@Component
27struct MyComponent {
28    @State count: number = 0
29    // MyComponent provides a method for modifying the @State status data member.
30    private toggleClick() {
31        this.count += 1
32    }
33
34    build() {
35        Column() {
36            Button() {
37                Text(`click times: ${this.count}`)
38                    .fontSize(10)
39            }.onClick(this.toggleClick.bind(this))
40        }
41    }
42}
43```
44
45
46## Complex Example of @State Decorated Variable
47
48```ts
49// Customize the status data class.
50// xxx.ets
51class Model {
52    value: string
53    constructor(value: string) {
54        this.value = value
55    }
56}
57
58@Entry
59@Component
60struct EntryComponent {
61    build() {
62        Column() {
63            MyComponent({count: 1, increaseBy: 2})  // MyComponent1 in this document
64            MyComponent({title: {value: 'Hello, World 2'}, count: 7})   //MyComponent2 in this document
65        }
66    }
67}
68
69@Component
70struct MyComponent {
71    @State title: Model = {value: 'Hello World'}
72    @State count: number = 0
73    private toggle: string = 'Hello World'
74    private increaseBy: number = 1
75
76    build() {
77        Column() {
78            Text(`${this.title.value}`).fontSize(30)
79            Button() {
80                Text(`Click to change title`).fontSize(20).fontColor(Color.White)
81            }.onClick(() => {
82                this.title.value = (this.toggle == this.title.value) ? 'Hello World' : 'Hello UI'
83            }) // Modify the internal state of MyComponent using the anonymous method.
84
85            Button() {
86                Text(`Click to increase count=${this.count}`).fontSize(20).fontColor(Color.White)
87            }.onClick(() => {
88                this.count += this.increaseBy
89            }) // Modify the internal state of MyComponent using the anonymous method.
90        }
91    }
92}
93```
94
95
96In the preceding example:
97
98
99- Two @State decorated variables, count and title, have been defined for MyComponent. If the value of count or title changes, the build method of MyComponent needs to be called to render the component again.
100
101- The EntryComponent has multiple MyComponent instances. The internal status change of the first MyComponent does not affect the second MyComponent.
102
103- When creating a MyComponent instance, initialize the variables in the component based on the variable name. For example:
104
105  ```ts
106  MyComponent({title: {value: 'Hello, World 2'}, count: 7})
107  ```
108