update zh-cn/application-dev/quick-start/arkts-state-management-best-practices.md.

Signed-off-by: N耿文广 <gengwenguang@huawei.com>

zh-cn/application-dev/quick-start/arkts-state-management-best-practices.md

@@ -41,7 +41,7 @@ struct LinkChild {
 
 @Component
 struct PropChild2 {
-  @Prop testNum: ClassA;
+  @Prop testNum: ClassA = new ClassA(0);
 
   build() {
     Text(`PropChild2 testNum ${this.testNum.c}`)
@@ -53,7 +53,7 @@ struct PropChild2 {
 
 @Component
 struct PropChild3 {
-  @Prop testNum: ClassA;
+  @Prop testNum: ClassA = new ClassA(0);
 
   build() {
     Text(`PropChild3 testNum ${this.testNum.c}`)
@@ -130,23 +130,23 @@ class ClassA {
 
 @Component
 struct LinkChild {
- @Link testNum: ClassA;
+  @Link testNum: ClassA;
 
- build() {
-   Text(`LinkChild testNum ${this.testNum?.c}`)
- }
+  build() {
+    Text(`LinkChild testNum ${this.testNum?.c}`)
+  }
 }
 
 @Component
 struct PropChild1 {
- @Prop testNum: ClassA = new ClassA(1);
+  @Prop testNum: ClassA = new ClassA(1);
 
- build() {
-   Text(`PropChild1 testNum ${this.testNum?.c}`)
-     .onClick(() => {
-       this.testNum = new ClassA(48);
-     })
- }
+  build() {
+    Text(`PropChild1 testNum ${this.testNum?.c}`)
+      .onClick(() => {
+        this.testNum = new ClassA(48);
+      })
+  }
 }
 
 @Component
@@ -350,44 +350,44 @@ class ClassB extends ClassA {
 @Component
 struct ViewClassC {
 
-    @ObjectLink c : ClassC;
-    build() {
-        Column({space:10}) {
-            Text(`c: ${this.c.getC()}`)
-            Button("Change C")
-                .onClick(() => {
-                    this.c.setC(this.c.getC()+1);
-                })
-        }
+  @ObjectLink c : ClassC;
+  build() {
+    Column({space:10}) {
+      Text(`c: ${this.c.getC()}`)
+      Button("Change C")
+        .onClick(() => {
+          this.c.setC(this.c.getC()+1);
+        })
     }
+  }
 }
 
 @Entry
 @Component
 struct MyView {
-    @State b : ClassB = new ClassB(10, 20, 30);
-
-    build() {
-        Column({space:10}) {
-            Text(`a: ${this.b.a}`)
-             Button("Change ClassA.a")
-            .onClick(() => {
-                this.b.a +=1;
-            })
-
-            Text(`b: ${this.b.b}`)
-            Button("Change ClassB.b")
-            .onClick(() => {
-                this.b.b += 1;
-            })
-
-            ViewClassC({c: this.b.c})   // Text(`c: ${this.b.c.c}`)的替代写法
-            Button("Change ClassB.ClassC.c")
-            .onClick(() => {
-                this.b.c.c += 1;
-            })
-        }
-     }
+  @State b : ClassB = new ClassB(10, 20, 30);
+
+  build() {
+    Column({space:10}) {
+      Text(`a: ${this.b.a}`)
+      Button("Change ClassA.a")
+        .onClick(() => {
+          this.b.a +=1;
+        })
+
+      Text(`b: ${this.b.b}`)
+      Button("Change ClassB.b")
+        .onClick(() => {
+          this.b.b += 1;
+        })
+
+      ViewClassC({c: this.b.c})   // Text(`c: ${this.b.c.c}`)的替代写法
+      Button("Change ClassB.ClassC.c")
+        .onClick(() => {
+          this.b.c.c += 1;
+        })
+    }
+  }
 }
 ```
 
@@ -460,10 +460,10 @@ struct ParentComp {
         CounterComp({ value: this.counter[2] })
         Divider().height(5)
         ForEach(this.counter,
-          item => {
+          (item: ParentCounter) => {
             CounterComp({ value: item })
           },
-          item => item.id.toString()
+          (item: ParentCounter) => item.id.toString()
         )
         Divider().height(5)
         // 第一个点击事件
@@ -571,15 +571,15 @@ struct ParentComp {
   build() {
     Row() {
       Column() {
-        CounterComp({ value: this.counter[0], subValue: this.counter[0].subCounter })
-        CounterComp({ value: this.counter[1], subValue: this.counter[1].subCounter })
-        CounterComp({ value: this.counter[2], subValue: this.counter[2].subCounter })
+        CounterComp({ value: this.counter[0], subValue: this.counter[0].subCounter[0] })
+        CounterComp({ value: this.counter[1], subValue: this.counter[1].subCounter[0] })
+        CounterComp({ value: this.counter[2], subValue: this.counter[2].subCounter[0] })
         Divider().height(5)
         ForEach(this.counter,
-          item => {
-            CounterComp({ value: item, subValue: item.subCounter })
+          (item: ParentCounter) => {
+            CounterComp({ value: item, subValue: item.subCounter[0] })
           },
-          item => item.id.toString()
+          (item: ParentCounter) => item.id.toString()
         )
         Divider().height(5)
         Text('Parent: reset entire counter')
@@ -668,15 +668,15 @@ struct ParentComp {
   build() {
     Row() {
       Column() {
-        CounterComp({ value: this.counter[0], subValue: this.counter[0].subCounter })
-        CounterComp({ value: this.counter[1], subValue: this.counter[1].subCounter })
-        CounterComp({ value: this.counter[2], subValue: this.counter[2].subCounter })
+        CounterComp({ value: this.counter[0], subValue: this.counter[0].subCounter[0] })
+        CounterComp({ value: this.counter[1], subValue: this.counter[1].subCounter[0] })
+        CounterComp({ value: this.counter[2], subValue: this.counter[2].subCounter[0] })
         Divider().height(5)
         ForEach(this.counter,
-          item => {
-            CounterComp({ value: item, subValue: item.subCounter })
+          (item: ParentCounter) => {
+            CounterComp({ value: item, subValue: item.subCounter[0] })
           },
-          item => item.id.toString()
+          (item: ParentCounter) => item.id.toString()
         )
         Divider().height(5)
         Text('Parent: reset entire counter')
@@ -754,6 +754,37 @@ struct CounterComp {
 
   
 ```ts
+let nextId = 1;
+
+@Observed
+class SubCounter {
+  counter: number;
+  constructor(c: number) {
+    this.counter = c;
+  }
+}
+
+@Observed
+class ParentCounter {
+  id: number;
+  counter: number;
+  subCounter: SubCounter;
+  incrCounter() {
+    this.counter++;
+  }
+  incrSubCounter(c: number) {
+    this.subCounter.counter += c;
+  }
+  setSubCounter(c: number): void {
+    this.subCounter.counter = c;
+  }
+  constructor(c: number) {
+    this.id = nextId++;
+    this.counter = c;
+    this.subCounter = new SubCounter(c);
+  }
+}
+
 @Component
 struct SubCounterComp {
   @ObjectLink subValue: SubCounter;
@@ -767,7 +798,7 @@ struct SubCounterComp {
 }
 @Component
 struct CounterComp {
-  @Prop value: ParentCounter;
+  @ObjectLink value: ParentCounter;
   build() {
     Column({ space: 10 }) {
       Text(`this.value.incrCounter(): this.value.counter: ${this.value.counter}`)
@@ -798,10 +829,10 @@ struct ParentComp {
         CounterComp({ value: this.counter[2] })
         Divider().height(5)
         ForEach(this.counter,
-          item => {
+          (item: ParentCounter) => {
             CounterComp({ value: item })
           },
-          item => item.id.toString()
+          (item: ParentCounter) => item.id.toString()
         )
         Divider().height(5)
         Text('Parent: reset entire counter')
@@ -949,15 +980,18 @@ struct CompA {
   realState1: Array<number> = [4, 1, 3, 2]; // 未使用状态变量装饰器
   realState2: Color = Color.Yellow;
 
-  updateUI(param: any): any {
+  updateUI1(param: Array<number>): Array<number> {
+    const triggerAGet = this.needsUpdate;
+    return param;
+  }
+  updateUI2(param: Color): Color {
     const triggerAGet = this.needsUpdate;
     return param;
   }
-
   build() {
     Column({ space: 20 }) {
-      ForEach(this.updateUI(this.realState1),
-        item => {
+      ForEach(this.updateUI1(this.realState1),
+        (item: Array<number>) => {
           Text(`${item}`)
         })
       Text("add item")
@@ -976,7 +1010,7 @@ struct CompA {
           // 触发UI视图更新
           this.needsUpdate = !this.needsUpdate;
         })
-    }.backgroundColor(this.updateUI(this.realState2))
+    }.backgroundColor(this.updateUI2(this.realState2))
     .width(200).height(500)
   }
 }
@@ -1005,7 +1039,7 @@ struct CompA {
   build() {
     Column({ space: 20 }) {
       ForEach(this.realState1,
-        item => {
+        (item: Array<number>) => {
           Text(`${item}`)
         })
       Text("add item")
@@ -1084,12 +1118,6 @@ class ClassE {
     this.d = d;
   }
 }
-
-```
-
-以下组件层次结构呈现的是@Prop嵌套场景的数据结构。
-
-```ts
 @Entry
 @Component
 struct Parent {
@@ -1108,7 +1136,7 @@ struct Parent {
 
 @Component
 struct Child {
-  @Prop voteOne: ClassE
+  @ObjectLink voteOne: ClassE
   build() {
     Column() {
       Text(this.voteOne.name).fontSize(24).fontColor(Color.Red).margin(50)
@@ -1123,7 +1151,7 @@ struct Child {
 
 @Component
 struct ChildOne {
-  @Prop voteTwo: ClassD
+  @ObjectLink voteTwo: ClassD
   build() {
     Column() {
       Text(this.voteTwo.name).fontSize(24).fontColor(Color.Red).margin(50)
@@ -1138,7 +1166,7 @@ struct ChildOne {
 
 @Component
 struct ChildTwo {
-  @Prop voteThree: ClassC
+  @ObjectLink voteThree: ClassC
   build() {
     Column() {
       Text(this.voteThree.name).fontSize(24).fontColor(Color.Red).margin(50)
@@ -1153,7 +1181,7 @@ struct ChildTwo {
 
 @Component
 struct ChildThree {
-  @Prop voteFour: ClassB
+  @ObjectLink voteFour: ClassB
   build() {
     Column() {
       Text(this.voteFour.name).fontSize(24).fontColor(Color.Red).margin(50)
@@ -1168,7 +1196,7 @@ struct ChildThree {
 
 @Component
 struct ChildFour {
-  @Prop voteFive: ClassA
+  @ObjectLink voteFive: ClassA
   build() {
     Column() {
       Text(this.voteFive.title).fontSize(24).fontColor(Color.Red).margin(50)
@@ -1245,6 +1273,59 @@ class ClassE {
 以下组件层次结构呈现的是@Reusable组件复用场景的数据结构。
 
 ```ts
+// 以下是嵌套类对象的数据结构。
+@Observed
+class ClassA {
+  public title: string;
+
+  constructor(title: string) {
+    this.title = title;
+  }
+}
+
+@Observed
+class ClassB {
+  public name: string;
+  public a: ClassA;
+
+  constructor(name: string, a: ClassA) {
+    this.name = name;
+    this.a = a;
+  }
+}
+
+@Observed
+class ClassC {
+  public name: string;
+  public b: ClassB;
+
+  constructor(name: string, b: ClassB) {
+    this.name = name;
+    this.b = b;
+  }
+}
+
+@Observed
+class ClassD {
+  public name: string;
+  public c: ClassC;
+
+  constructor(name: string, c: ClassC) {
+    this.name = name;
+    this.c = c;
+  }
+}
+
+@Observed
+class ClassE {
+  public name: string;
+  public d: ClassD;
+
+  constructor(name: string, d: ClassD) {
+    this.name = name;
+    this.d = d;
+  }
+}
 @Entry
 @Component
 struct Parent {
@@ -1266,9 +1347,9 @@ struct Parent {
 @Component
 struct Child {
   @State voteOne: ClassE = new ClassE('voteOne', new ClassD('OpenHarmony', new ClassC('Hello', new ClassB('World', new ClassA('Peace')))))
-  aboutToReuse(params){
-    this.voteOne = params
 
+  aboutToReuse(params: ClassE) {
+    this.voteOne = params
   }
   build() {
     Column() {
@@ -1287,7 +1368,7 @@ struct Child {
 @Component
 struct ChildOne {
   @State voteTwo: ClassD = new ClassD('voteTwo', new ClassC('Hello', new ClassB('World', new ClassA('Peace'))))
-  aboutToReuse(params){
+  aboutToReuse(params: ClassD){
     this.voteTwo = params
   }
   build() {
@@ -1307,7 +1388,7 @@ struct ChildOne {
 @Component
 struct ChildTwo {
   @State voteThree: ClassC = new ClassC('voteThree', new ClassB('World', new ClassA('Peace')))
-  aboutToReuse(params){
+  aboutToReuse(params: ClassC){
     this.voteThree = params
 
   }
@@ -1328,7 +1409,7 @@ struct ChildTwo {
 @Component
 struct ChildThree {
   @State voteFour: ClassB = new ClassB('voteFour', new ClassA('Peace'))
-  aboutToReuse(params){
+  aboutToReuse(params: ClassB){
     this.voteFour = params
 
   }
@@ -1349,7 +1430,7 @@ struct ChildThree {
 @Component
 struct ChildFour {
   @State voteFive: ClassA = new ClassA('voteFive')
-  aboutToReuse(params){
+  aboutToReuse(params: ClassA){
     this.voteFive = params
 
   }