HarmonyOS开发实战（ Beta5版）状态管理合理使用开发实践指导

由于对状态管理当前的特性并不了解，许多开发者在使用状态管理进行开发时会遇到UI不刷新、刷新性能差的情况。对此，本篇将从两个方向，对一共五个典型场景进行分析，同时提供相应的正例和反例，帮助开发者学习如何合理使用状态管理进行开发。

合理使用属性

将简单属性数组合并成对象数组

在开发过程中，我们经常会需要设置多个组件的同一种属性，比如Text组件的内容、组件的宽度、高度等样式信息等。将这些属性保存在一个数组中，配合ForEach进行使用是一种简单且方便的方法。GitCode - 全球开发者的开源社区,开源代码托管平台

  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State items: string[] = [];
  5.   @State ids: string[] = [];
  6.   @State age: number[] = [];
  7.   @State gender: string[] = [];
  8.  
  9.   aboutToAppear() {
  10.     this.items.push("Head");
  11.     this.items.push("List");
  12.     for (let i = 0; i < 20; i++) {
  13.       this.ids.push("id: " + Math.floor(Math.random() * 1000));
  14.       this.age.push(Math.floor(Math.random() * 100 % 40));
  15.       this.gender.push(Math.floor(Math.random() * 100) % 2 == 0 ? "Male" : "Female");
  16.     }
  17.   }
  18.  
  19.   isRenderText(index: number) : number {
  20.     console.info(`index ${index} is rendered`);
  21.     return 1;
  22.   }
  23.  
  24.   build() {
  25.     Row() {
  26.       Column() {
  27.         ForEach(this.items, (item: string) => {
  28.           if (item == "Head") {
  29.             Text("Personal Info")
  30.               .fontSize(40)
  31.           } else if (item == "List") {
  32.             List() {
  33.               ForEach(this.ids, (id: string, index) => {
  34.                 ListItem() {
  35.                   Row() {
  36.                     Text(id)
  37.                       .fontSize(20)
  38.                       .margin({
  39.                         left: 30,
  40.                         right: 5
  41.                       })
  42.                     Text("age: " + this.age[index as number])
  43.                       .fontSize(20)
  44.                       .margin({
  45.                         left: 5,
  46.                         right: 5
  47.                       })
  48.                       .position({x: 100})
  49.                       .opacity(this.isRenderText(index))
  50.                       .onClick(() => {
  51.                         this.age[index]++;
  52.                       })
  53.                     Text("gender: " + this.gender[index as number])
  54.                       .margin({
  55.                         left: 5,
  56.                         right: 5
  57.                       })
  58.                       .position({x: 180})
  59.                       .fontSize(20)
  60.                   }
  61.                 }
  62.                 .margin({
  63.                   top: 5,
  64.                   bottom: 5
  65.                 })
  66.               })
  67.             }
  68.           }
  69.         })
  70.       }
  71.     }
  72.   }
  73. }

上述代码运行效果如下。

properly-use-state-management-to-develope-1

页面内通过ForEach显示了20条信息，当点击某一条信息中age的Text组件时，可以通过日志发现其他的19条信息中age的Text组件也进行了刷新(这体现在日志上，所有的age的Text组件都打出了日志)，但实际上其他19条信息的age的数值并没有改变，也就是说其他19个Text组件并不需要刷新。

这是因为当前状态管理的一个特性。假设存在一个被@State修饰的number类型的数组Num[]，其中有20个元素，值分别为0到19。这20个元素分别绑定了一个Text组件，当改变其中一个元素，例如第0号元素的值从0改成1，除了0号元素绑定的Text组件会刷新之外，其他的19个Text组件也会刷新，即使1到19号元素的值并没有改变。

这个特性普遍的出现在简单类型数组的场景中，当数组中的元素够多时，会对UI的刷新性能有很大的负面影响。这种“不需要刷新的组件被刷新”的现象即是“冗余刷新”，当“冗余刷新”的节点过多时，UI的刷新效率会大幅度降低，因此需要减少“冗余刷新”，也就是做到精准控制组件的更新范围。

为了减少由简单的属性相关的数组引起的“冗余刷新”，需要将属性数组转变为对象数组，配合自定义组件，实现精准控制更新范围。下面为修改后的代码。

  1. @Observed
  2. class InfoList extends Array<Info> {
  3. };
  4. @Observed
  5. class Info {
  6.   ids: number;
  7.   age: number;
  8.   gender: string;
  9.  
  10.   constructor() {
  11.     this.ids = Math.floor(Math.random() * 1000);
  12.     this.age = Math.floor(Math.random() * 100 % 40);
  13.     this.gender = Math.floor(Math.random() * 100) % 2 == 0 ? "Male" : "Female";
  14.   }
  15. }
  16. @Component
  17. struct Information {
  18.   @ObjectLink info: Info;
  19.   @State index: number = 0;
  20.   isRenderText(index: number) : number {
  21.     console.info(`index ${index} is rendered`);
  22.     return 1;
  23.   }
  24.  
  25.   build() {
  26.     Row() {
  27.       Text("id: " + this.info.ids)
  28.         .fontSize(20)
  29.         .margin({
  30.           left: 30,
  31.           right: 5
  32.         })
  33.       Text("age: " + this.info.age)
  34.         .fontSize(20)
  35.         .margin({
  36.           left: 5,
  37.           right: 5
  38.         })
  39.         .position({x: 100})
  40.         .opacity(this.isRenderText(this.index))
  41.         .onClick(() => {
  42.           this.info.age++;
  43.         })
  44.       Text("gender: " + this.info.gender)
  45.         .margin({
  46.           left: 5,
  47.           right: 5
  48.         })
  49.         .position({x: 180})
  50.         .fontSize(20)
  51.     }
  52.   }
  53. }
  54. @Entry
  55. @Component
  56. struct Page {
  57.   @State infoList: InfoList = new InfoList();
  58.   @State items: string[] = [];
  59.   aboutToAppear() {
  60.     this.items.push("Head");
  61.     this.items.push("List");
  62.     for (let i = 0; i < 20; i++) {
  63.       this.infoList.push(new Info());
  64.     }
  65.   }
  66.  
  67.   build() {
  68.     Row() {
  69.       Column() {
  70.         ForEach(this.items, (item: string) => {
  71.           if (item == "Head") {
  72.             Text("Personal Info")
  73.               .fontSize(40)
  74.           } else if (item == "List") {
  75.             List() {
  76.               ForEach(this.infoList, (info: Info, index) => {
  77.                 ListItem() {
  78.                   Information({
  79.                     // in low version, DevEco may throw a warning, but it does not matter.
  80.                     // you can still compile and run.
  81.                     info: info,
  82.                     index: index
  83.                   })
  84.                 }
  85.                 .margin({
  86.                   top: 5,
  87.                   bottom: 5
  88.                 })
  89.               })
  90.             }
  91.           }
  92.         })
  93.       }
  94.     }
  95.   }
  96. }

上述代码的运行效果如下。GitCode - 全球开发者的开源社区,开源代码托管平台

properly-use-state-management-to-develope-2

修改后的代码使用对象数组代替了原有的多个属性数组，能够避免数组的“冗余刷新”的情况。这是因为对于数组来说，对象内的变化是无法感知的，数组只能观测数组项层级的变化，例如新增数据项，修改数据项（普通数组是直接修改数据项的值，在对象数组的场景下是整个对象被重新赋值，改变某个数据项对象中的属性不会被观测到）、删除数据项等。这意味着当改变对象内的某个属性时，对于数组来说，对象是没有变化的，也就不会去刷新。在当前状态管理的观测能力中，除了数组嵌套对象的场景外，对象嵌套对象的场景也是无法观测到变化的，这一部分内容将在将复杂对象拆分成多个小对象的集合中讲到。同时修改代码时使用了自定义组件与ForEach的结合，这一部分内容将在在ForEach中使用自定义组件搭配对象数组讲到。

将复杂大对象拆分成多个小对象的集合

说明：

从API version 11开始，推荐优先使用@Track装饰器解决该场景的问题。

在开发过程中，我们有时会定义一个大的对象，其中包含了很多样式相关的属性，并且在父子组件间传递这个对象，将其中的属性绑定在组件上。

  1. @Observed
  2. class UIStyle {
  3.   translateX: number = 0;
  4.   translateY: number = 0;
  5.   scaleX: number = 0.3;
  6.   scaleY: number = 0.3;
  7.   width: number = 336;
  8.   height: number = 178;
  9.   posX: number = 10;
  10.   posY: number = 50;
  11.   alpha: number = 0.5;
  12.   borderRadius: number = 24;
  13.   imageWidth: number = 78;
  14.   imageHeight: number = 78;
  15.   translateImageX: number = 0;
  16.   translateImageY: number = 0;
  17.   fontSize: number = 20;
  18. }
  19. @Component
  20. struct SpecialImage {
  21.   @ObjectLink uiStyle: UIStyle;
  22.   private isRenderSpecialImage() : number { // function to show whether the component is rendered
  23.     console.info("SpecialImage is rendered");
  24.     return 1;
  25.   }
  26.   build() {
  27.     Image($r('app.media.icon')) // 在API12及以后的工程中使用app.media.app_icon
  28.       .width(this.uiStyle.imageWidth)
  29.       .height(this.uiStyle.imageHeight)
  30.       .margin({ top: 20 })
  31.       .translate({
  32.         x: this.uiStyle.translateImageX,
  33.         y: this.uiStyle.translateImageY
  34.       })
  35.       .opacity(this.isRenderSpecialImage()) // if the Image is rendered, it will call the function
  36.   }
  37. }
  38. @Component
  39. struct CompA {
  40.   @ObjectLink uiStyle: UIStyle
  41.   // the following functions are used to show whether the component is called to be rendered
  42.   private isRenderColumn() : number {
  43.     console.info("Column is rendered");
  44.     return 1;
  45.   }
  46.   private isRenderStack() : number {
  47.     console.info("Stack is rendered");
  48.     return 1;
  49.   }
  50.   private isRenderImage() : number {
  51.     console.info("Image is rendered");
  52.     return 1;
  53.   }
  54.   private isRenderText() : number {
  55.     console.info("Text is rendered");
  56.     return 1;
  57.   }
  58.   build() {
  59.     Column() {
  60.       SpecialImage({
  61.         // in low version, Dev Eco may throw a warning
  62.         // But you can still build and run the code
  63.         uiStyle: this.uiStyle
  64.       })
  65.       Stack() {
  66.         Column() {
  67.             Image($r('app.media.icon')) // 在API12及以后的工程中使用app.media.app_icon
  68.               .opacity(this.uiStyle.alpha)
  69.               .scale({
  70.                 x: this.uiStyle.scaleX,
  71.                 y: this.uiStyle.scaleY
  72.               })
  73.               .padding(this.isRenderImage())
  74.               .width(300)
  75.               .height(300)
  76.         }
  77.         .width('100%')
  78.         .position({ y: -80 })
  79.         Stack() {
  80.           Text("Hello World")
  81.             .fontColor("#182431")
  82.             .fontWeight(FontWeight.Medium)
  83.             .fontSize(this.uiStyle.fontSize)
  84.             .opacity(this.isRenderText())
  85.             .margin({ top: 12 })
  86.         }
  87.         .opacity(this.isRenderStack())
  88.         .position({
  89.           x: this.uiStyle.posX,
  90.           y: this.uiStyle.posY
  91.         })
  92.         .width('100%')
  93.         .height('100%')
  94.       }
  95.       .margin({ top: 50 })
  96.       .borderRadius(this.uiStyle.borderRadius)
  97.       .opacity(this.isRenderStack())
  98.       .backgroundColor("#FFFFFF")
  99.       .width(this.uiStyle.width)
  100.       .height(this.uiStyle.height)
  101.       .translate({
  102.         x: this.uiStyle.translateX,
  103.         y: this.uiStyle.translateY
  104.       })
  105.       Column() {
  106.         Button("Move")
  107.           .width(312)
  108.           .fontSize(20)
  109.           .backgroundColor("#FF007DFF")
  110.           .margin({ bottom: 10 })
  111.           .onClick(() => {
  112.             animateTo({
  113.               duration: 500
  114.             },() => {
  115.               this.uiStyle.translateY = (this.uiStyle.translateY + 180) % 250;
  116.             })
  117.           })
  118.         Button("Scale")
  119.           .borderRadius(20)
  120.           .backgroundColor("#FF007DFF")
  121.           .fontSize(20)
  122.           .width(312)
  123.           .onClick(() => {
  124.             this.uiStyle.scaleX = (this.uiStyle.scaleX + 0.6) % 0.8;
  125.           })
  126.       }
  127.       .position({
  128.         y:666
  129.       })
  130.       .height('100%')
  131.       .width('100%')
  132.  
  133.     }
  134.     .opacity(this.isRenderColumn())
  135.     .width('100%')
  136.     .height('100%')
  137.  
  138.   }
  139. }
  140. @Entry
  141. @Component
  142. struct Page {
  143.   @State uiStyle: UIStyle = new UIStyle();
  144.   build() {
  145.     Stack() {
  146.       CompA({
  147.         // in low version, Dev Eco may throw a warning
  148.         // But you can still build and run the code
  149.         uiStyle: this.uiStyle
  150.       })
  151.     }
  152.     .backgroundColor("#F1F3F5")
  153.   }
  154. }

上述代码的运行效果如下。GitCode - 全球开发者的开源社区,开源代码托管平台

properly-use-state-management-to-develope-3

优化前点击move按钮的脏节点更新耗时如下图：

img

在上面的示例中，UIStyle定义了多个属性，并且这些属性分别被多个组件关联。当点击任意一个按钮更改其中的某些属性时，会导致所有这些关联uiStyle的组件进行刷新，虽然它们其实并不需要进行刷新（因为组件的属性都没有改变）。通过定义的一系列isRender函数，可以观察到这些组件的刷新。当点击“move”按钮进行平移动画时，由于translateY的值的多次改变，会导致每一次都存在“冗余刷新”的问题，这对应用的性能有着很大的负面影响。

这是因为当前状态管理的一个刷新机制，假设定义了一个有20个属性的类，创建类的对象实例，将20个属性绑定到组件上，这时修改其中的某个属性，除了这个属性关联的组件会刷新之外，其他的19个属性关联的组件也都会刷新，即使这些属性本身并没有发生变化。

这个机制会导致在使用一个复杂大对象与多个组件关联时，刷新性能的下降。对此，推荐将一个复杂大对象拆分成多个小对象的集合，在保留原有代码结构的基础上，减少“冗余刷新”，实现精准控制组件的更新范围。

  1. @Observed
  2. class NeedRenderImage { // properties only used in the same component can be divided into the same new divided class
  3.   public translateImageX: number = 0;
  4.   public translateImageY: number = 0;
  5.   public imageWidth:number = 78;
  6.   public imageHeight:number = 78;
  7. }
  8. @Observed
  9. class NeedRenderScale { // properties usually used together can be divided into the same new divided class
  10.   public scaleX: number = 0.3;
  11.   public scaleY: number = 0.3;
  12. }
  13. @Observed
  14. class NeedRenderAlpha { // properties that may be used in different places can be divided into the same new divided class
  15.   public alpha: number = 0.5;
  16. }
  17. @Observed
  18. class NeedRenderSize { // properties usually used together can be divided into the same new divided class
  19.   public width: number = 336;
  20.   public height: number = 178;
  21. }
  22. @Observed
  23. class NeedRenderPos { // properties usually used together can be divided into the same new divided class
  24.   public posX: number = 10;
  25.   public posY: number = 50;
  26. }
  27. @Observed
  28. class NeedRenderBorderRadius { // properties that may be used in different places can be divided into the same new divided class
  29.   public borderRadius: number = 24;
  30. }
  31. @Observed
  32. class NeedRenderFontSize { // properties that may be used in different places can be divided into the same new divided class
  33.   public fontSize: number = 20;
  34. }
  35. @Observed
  36. class NeedRenderTranslate { // properties usually used together can be divided into the same new divided class
  37.   public translateX: number = 0;
  38.   public translateY: number = 0;
  39. }
  40. @Observed
  41. class UIStyle {
  42.   // define new variable instead of using old one
  43.   needRenderTranslate: NeedRenderTranslate = new NeedRenderTranslate();
  44.   needRenderFontSize: NeedRenderFontSize = new NeedRenderFontSize();
  45.   needRenderBorderRadius: NeedRenderBorderRadius = new NeedRenderBorderRadius();
  46.   needRenderPos: NeedRenderPos = new NeedRenderPos();
  47.   needRenderSize: NeedRenderSize = new NeedRenderSize();
  48.   needRenderAlpha: NeedRenderAlpha = new NeedRenderAlpha();
  49.   needRenderScale: NeedRenderScale = new NeedRenderScale();
  50.   needRenderImage: NeedRenderImage = new NeedRenderImage();
  51. }
  52. @Component
  53. struct SpecialImage {
  54.   @ObjectLink uiStyle : UIStyle;
  55.   @ObjectLink needRenderImage: NeedRenderImage // receive the new class from its parent component
  56.   private isRenderSpecialImage() : number { // function to show whether the component is rendered
  57.     console.info("SpecialImage is rendered");
  58.     return 1;
  59.   }
  60.   build() {
  61.     Image($r('app.media.icon')) // 在API12及以后的工程中使用app.media.app_icon
  62.       .width(this.needRenderImage.imageWidth) // !! use this.needRenderImage.xxx rather than this.uiStyle.needRenderImage.xxx !!
  63.       .height(this.needRenderImage.imageHeight)
  64.       .margin({top:20})
  65.       .translate({
  66.         x: this.needRenderImage.translateImageX,
  67.         y: this.needRenderImage.translateImageY
  68.       })
  69.       .opacity(this.isRenderSpecialImage()) // if the Image is rendered, it will call the function
  70.   }
  71. }
  72. @Component
  73. struct CompA {
  74.   @ObjectLink uiStyle: UIStyle;
  75.   @ObjectLink needRenderTranslate: NeedRenderTranslate; // receive the new class from its parent component
  76.   @ObjectLink needRenderFontSize: NeedRenderFontSize;
  77.   @ObjectLink needRenderBorderRadius: NeedRenderBorderRadius;
  78.   @ObjectLink needRenderPos: NeedRenderPos;
  79.   @ObjectLink needRenderSize: NeedRenderSize;
  80.   @ObjectLink needRenderAlpha: NeedRenderAlpha;
  81.   @ObjectLink needRenderScale: NeedRenderScale;
  82.   // the following functions are used to show whether the component is called to be rendered
  83.   private isRenderColumn() : number {
  84.     console.info("Column is rendered");
  85.     return 1;
  86.   }
  87.   private isRenderStack() : number {
  88.     console.info("Stack is rendered");
  89.     return 1;
  90.   }
  91.   private isRenderImage() : number {
  92.     console.info("Image is rendered");
  93.     return 1;
  94.   }
  95.   private isRenderText() : number {
  96.     console.info("Text is rendered");
  97.     return 1;
  98.   }
  99.   build() {
  100.     Column() {
  101.       SpecialImage({
  102.         // in low version, Dev Eco may throw a warning
  103.         // But you can still build and run the code
  104.         uiStyle: this.uiStyle,
  105.         needRenderImage: this.uiStyle.needRenderImage //send it to its child
  106.       })
  107.       Stack() {
  108.         Column() {
  109.           Image($r('app.media.icon')) // 在API12及以后的工程中使用app.media.app_icon
  110.             .opacity(this.needRenderAlpha.alpha)
  111.             .scale({
  112.               x: this.needRenderScale.scaleX, // use this.needRenderXxx.xxx rather than this.uiStyle.needRenderXxx.xxx
  113.               y: this.needRenderScale.scaleY
  114.             })
  115.             .padding(this.isRenderImage())
  116.             .width(300)
  117.             .height(300)
  118.         }
  119.         .width('100%')
  120.         .position({ y: -80 })
  121.  
  122.         Stack() {
  123.           Text("Hello World")
  124.             .fontColor("#182431")
  125.             .fontWeight(FontWeight.Medium)
  126.             .fontSize(this.needRenderFontSize.fontSize)
  127.             .opacity(this.isRenderText())
  128.             .margin({ top: 12 })
  129.         }
  130.         .opacity(this.isRenderStack())
  131.         .position({
  132.           x: this.needRenderPos.posX,
  133.           y: this.needRenderPos.posY
  134.         })
  135.         .width('100%')
  136.         .height('100%')
  137.       }
  138.       .margin({ top: 50 })
  139.       .borderRadius(this.needRenderBorderRadius.borderRadius)
  140.       .opacity(this.isRenderStack())
  141.       .backgroundColor("#FFFFFF")
  142.       .width(this.needRenderSize.width)
  143.       .height(this.needRenderSize.height)
  144.       .translate({
  145.         x: this.needRenderTranslate.translateX,
  146.         y: this.needRenderTranslate.translateY
  147.       })
  148.  
  149.       Column() {
  150.         Button("Move")
  151.           .width(312)
  152.           .fontSize(20)
  153.           .backgroundColor("#FF007DFF")
  154.           .margin({ bottom: 10 })
  155.           .onClick(() => {
  156.             animateTo({
  157.               duration: 500
  158.             }, () => {
  159.               this.needRenderTranslate.translateY = (this.needRenderTranslate.translateY + 180) % 250;
  160.             })
  161.           })
  162.         Button("Scale")
  163.           .borderRadius(20)
  164.           .backgroundColor("#FF007DFF")
  165.           .fontSize(20)
  166.           .width(312)
  167.           .margin({ bottom: 10 })
  168.           .onClick(() => {
  169.             this.needRenderScale.scaleX = (this.needRenderScale.scaleX + 0.6) % 0.8;
  170.           })
  171.         Button("Change Image")
  172.           .borderRadius(20)
  173.           .backgroundColor("#FF007DFF")
  174.           .fontSize(20)
  175.           .width(312)
  176.           .onClick(() => { // in the parent component, still use this.uiStyle.needRenderXxx.xxx to change the properties
  177.             this.uiStyle.needRenderImage.imageWidth = (this.uiStyle.needRenderImage.imageWidth + 30) % 160;
  178.             this.uiStyle.needRenderImage.imageHeight = (this.uiStyle.needRenderImage.imageHeight + 30) % 160;
  179.           })
  180.       }
  181.       .position({
  182.         y: 616
  183.       })
  184.       .height('100%')
  185.       .width('100%')
  186.     }
  187.     .opacity(this.isRenderColumn())
  188.     .width('100%')
  189.     .height('100%')
  190.   }
  191. }
  192. @Entry
  193. @Component
  194. struct Page {
  195.   @State uiStyle: UIStyle = new UIStyle();
  196.   build() {
  197.     Stack() {
  198.       CompA({
  199.         // in low version, Dev Eco may throw a warning
  200.         // But you can still build and run the code
  201.         uiStyle: this.uiStyle,
  202.         needRenderTranslate: this.uiStyle.needRenderTranslate, //send all the new class child need
  203.         needRenderFontSize: this.uiStyle.needRenderFontSize,
  204.         needRenderBorderRadius: this.uiStyle.needRenderBorderRadius,
  205.         needRenderPos: this.uiStyle.needRenderPos,
  206.         needRenderSize: this.uiStyle.needRenderSize,
  207.         needRenderAlpha: this.uiStyle.needRenderAlpha,
  208.         needRenderScale: this.uiStyle.needRenderScale
  209.       })
  210.     }
  211.     .backgroundColor("#F1F3F5")
  212.   }
  213. }

上述代码的运行效果如下。GitCode - 全球开发者的开源社区,开源代码托管平台

properly-use-state-management-to-develope-4

优化后点击move按钮的脏节点更新耗时如下图：

img

修改后的代码将原来的大类中的十五个属性拆成了八个小类，并且在绑定的组件上也做了相应的适配。属性拆分遵循以下几点原则：

  • 只作用在同一个组件上的多个属性可以被拆分进同一个新类，即示例中的NeedRenderImage。适用于组件经常被不关联的属性改变而引起刷新的场景，这个时候就要考虑拆分属性，或者重新考虑ViewModel设计是否合理。
  • 经常被同时使用的属性可以被拆分进同一个新类，即示例中的NeedRenderScale、NeedRenderTranslate、NeedRenderPos、NeedRenderSize。适用于属性经常成对出现，或者被作用在同一个样式上的情况，例如.translate、.position、.scale等（这些样式通常会接收一个对象作为参数）。
  • 可能被用在多个组件上或相对较独立的属性应该被单独拆分进一个新类，即示例中的NeedRenderAlpha，NeedRenderBorderRadius、NeedRenderFontSize。适用于一个属性作用在多个组件上或者与其他属性没有联系的情况，例如.opacity、.borderRadius等（这些样式通常相对独立）。

属性拆分的原理和属性合并类似，都是在嵌套场景下，状态管理无法观测二层以上的属性变化，所以不会因为二层的数据变化导致一层关联的其他属性被刷新，同时利用@Observed和@ObjectLink在父子节点间传递二层的对象，从而在子组件中正常的观测二层的数据变化，实现精准刷新。

使用@Track装饰器则无需做属性拆分，也能达到同样控制组件更新范围的作用。

  1. @Observed
  2. class UIStyle {
  3.   @Track translateX: number = 0;
  4.   @Track translateY: number = 0;
  5.   @Track scaleX: number = 0.3;
  6.   @Track scaleY: number = 0.3;
  7.   @Track width: number = 336;
  8.   @Track height: number = 178;
  9.   @Track posX: number = 10;
  10.   @Track posY: number = 50;
  11.   @Track alpha: number = 0.5;
  12.   @Track borderRadius: number = 24;
  13.   @Track imageWidth: number = 78;
  14.   @Track imageHeight: number = 78;
  15.   @Track translateImageX: number = 0;
  16.   @Track translateImageY: number = 0;
  17.   @Track fontSize: number = 20;
  18. }
  19. @Component
  20. struct SpecialImage {
  21.   @ObjectLink uiStyle: UIStyle;
  22.   private isRenderSpecialImage() : number { // function to show whether the component is rendered
  23.     console.info("SpecialImage is rendered");
  24.     return 1;
  25.   }
  26.   build() {
  27.     Image($r('app.media.icon')) // 在API12及以后的工程中使用app.media.app_icon
  28.       .width(this.uiStyle.imageWidth)
  29.       .height(this.uiStyle.imageHeight)
  30.       .margin({ top: 20 })
  31.       .translate({
  32.         x: this.uiStyle.translateImageX,
  33.         y: this.uiStyle.translateImageY
  34.       })
  35.       .opacity(this.isRenderSpecialImage()) // if the Image is rendered, it will call the function
  36.   }
  37. }
  38. @Component
  39. struct CompA {
  40.   @ObjectLink uiStyle: UIStyle
  41.   // the following functions are used to show whether the component is called to be rendered
  42.   private isRenderColumn() : number {
  43.     console.info("Column is rendered");
  44.     return 1;
  45.   }
  46.   private isRenderStack() : number {
  47.     console.info("Stack is rendered");
  48.     return 1;
  49.   }
  50.   private isRenderImage() : number {
  51.     console.info("Image is rendered");
  52.     return 1;
  53.   }
  54.   private isRenderText() : number {
  55.     console.info("Text is rendered");
  56.     return 1;
  57.   }
  58.   build() {
  59.     Column() {
  60.       SpecialImage({
  61.         // in low version, Dev Eco may throw a warning
  62.         // But you can still build and run the code
  63.         uiStyle: this.uiStyle
  64.       })
  65.       Stack() {
  66.         Column() {
  67.             Image($r('app.media.icon')) // 在API12及以后的工程中使用app.media.app_icon
  68.               .opacity(this.uiStyle.alpha)
  69.               .scale({
  70.                 x: this.uiStyle.scaleX,
  71.                 y: this.uiStyle.scaleY
  72.               })
  73.               .padding(this.isRenderImage())
  74.               .width(300)
  75.               .height(300)
  76.         }
  77.         .width('100%')
  78.         .position({ y: -80 })
  79.         Stack() {
  80.           Text("Hello World")
  81.             .fontColor("#182431")
  82.             .fontWeight(FontWeight.Medium)
  83.             .fontSize(this.uiStyle.fontSize)
  84.             .opacity(this.isRenderText())
  85.             .margin({ top: 12 })
  86.         }
  87.         .opacity(this.isRenderStack())
  88.         .position({
  89.           x: this.uiStyle.posX,
  90.           y: this.uiStyle.posY
  91.         })
  92.         .width('100%')
  93.         .height('100%')
  94.       }
  95.       .margin({ top: 50 })
  96.       .borderRadius(this.uiStyle.borderRadius)
  97.       .opacity(this.isRenderStack())
  98.       .backgroundColor("#FFFFFF")
  99.       .width(this.uiStyle.width)
  100.       .height(this.uiStyle.height)
  101.       .translate({
  102.         x: this.uiStyle.translateX,
  103.         y: this.uiStyle.translateY
  104.       })
  105.       Column() {
  106.         Button("Move")
  107.           .width(312)
  108.           .fontSize(20)
  109.           .backgroundColor("#FF007DFF")
  110.           .margin({ bottom: 10 })
  111.           .onClick(() => {
  112.             animateTo({
  113.               duration: 500
  114.             },() => {
  115.               this.uiStyle.translateY = (this.uiStyle.translateY + 180) % 250;
  116.             })
  117.           })
  118.         Button("Scale")
  119.           .borderRadius(20)
  120.           .backgroundColor("#FF007DFF")
  121.           .fontSize(20)
  122.           .width(312)
  123.           .onClick(() => {
  124.             this.uiStyle.scaleX = (this.uiStyle.scaleX + 0.6) % 0.8;
  125.           })
  126.       }
  127.       .position({
  128.         y:666
  129.       })
  130.       .height('100%')
  131.       .width('100%')
  132.  
  133.     }
  134.     .opacity(this.isRenderColumn())
  135.     .width('100%')
  136.     .height('100%')
  137.  
  138.   }
  139. }
  140. @Entry
  141. @Component
  142. struct Page {
  143.   @State uiStyle: UIStyle = new UIStyle();
  144.   build() {
  145.     Stack() {
  146.       CompA({
  147.         // in low version, Dev Eco may throw a warning
  148.         // But you can still build and run the code
  149.         uiStyle: this.uiStyle
  150.       })
  151.     }
  152.     .backgroundColor("#F1F3F5")
  153.   }
  154. }

使用@Observed装饰或被声明为状态变量的类对象绑定组件

在开发过程中，会有“重置数据”的场景，将一个新创建的对象赋值给原有的状态变量，实现数据的刷新。如果不注意新创建对象的类型，可能会出现UI不刷新的现象。

  1. @Observed
  2. class Child {
  3.   count: number;
  4.   constructor(count: number) {
  5.     this.count = count
  6.   }
  7. }
  8. @Observed
  9. class ChildList extends Array<Child> {
  10. };
  11. @Observed
  12. class Ancestor {
  13.   childList: ChildList;
  14.   constructor(childList: ChildList) {
  15.     this.childList = childList;
  16.   }
  17.   public loadData() {
  18.     let tempList = [new Child(1), new Child(2), new Child(3), new Child(4), new Child(5)];
  19.     this.childList = tempList;
  20.   }
  21.  
  22.   public clearData() {
  23.     this.childList = []
  24.   }
  25. }
  26. @Component
  27. struct CompChild {
  28.   @Link childList: ChildList;
  29.   @ObjectLink child: Child;
  30.  
  31.   build() {
  32.     Row() {
  33.       Text(this.child.count+'')
  34.         .height(70)
  35.         .fontSize(20)
  36.         .borderRadius({
  37.           topLeft: 6,
  38.           topRight: 6
  39.         })
  40.         .margin({left: 50})
  41.       Button('X')
  42.         .backgroundColor(Color.Red)
  43.         .onClick(()=>{
  44.           let index = this.childList.findIndex((item) => {
  45.             return item.count === this.child.count
  46.           })
  47.           if (index !== -1) {
  48.             this.childList.splice(index, 1);
  49.           }
  50.         })
  51.         .margin({
  52.           left: 200,
  53.           right:30
  54.         })
  55.     }
  56.     .margin({
  57.       top:15,
  58.       left: 15,
  59.       right:10,
  60.       bottom:15
  61.     })
  62.     .borderRadius(6)
  63.     .backgroundColor(Color.Grey)
  64.   }
  65. }
  66. @Component
  67. struct CompList {
  68.   @ObjectLink@Watch('changeChildList') childList: ChildList;
  69.  
  70.   changeChildList() {
  71.     console.info('CompList ChildList change');
  72.   }
  73.  
  74.   isRenderCompChild(index: number) : number {
  75.     console.info("Comp Child is render" + index);
  76.     return 1;
  77.   }
  78.  
  79.   build() {
  80.     Column() {
  81.       List() {
  82.         ForEach(this.childList, (item: Child, index) => {
  83.           ListItem() {
  84.             // in low version, Dev Eco may throw a warning
  85.             // But you can still build and run the code
  86.             CompChild({
  87.               childList: this.childList,
  88.               child: item
  89.             })
  90.               .opacity(this.isRenderCompChild(index))
  91.           }
  92.  
  93.         })
  94.       }
  95.       .height('70%')
  96.     }
  97.   }
  98. }
  99. @Component
  100. struct CompAncestor {
  101.   @ObjectLink ancestor: Ancestor;
  102.  
  103.   build() {
  104.     Column() {
  105.       // in low version, Dev Eco may throw a warning
  106.       // But you can still build and run the code
  107.       CompList({ childList: this.ancestor.childList })
  108.       Row() {
  109.         Button("Clear")
  110.           .onClick(() => {
  111.             this.ancestor.clearData()
  112.           })
  113.           .width(100)
  114.           .margin({right: 50})
  115.         Button("Recover")
  116.           .onClick(() => {
  117.             this.ancestor.loadData()
  118.           })
  119.           .width(100)
  120.       }
  121.     }
  122.   }
  123. }
  124. @Entry
  125. @Component
  126. struct Page {
  127.   @State childList: ChildList = [new Child(1), new Child(2), new Child(3), new Child(4),new Child(5)];
  128.   @State ancestor: Ancestor = new Ancestor(this.childList)
  129.  
  130.   build() {
  131.     Column() {
  132.       // in low version, Dev Eco may throw a warning
  133.       // But you can still build and run the code
  134.       CompAncestor({ ancestor: this.ancestor})
  135.     }
  136.   }
  137. }

上述代码运行效果如下。GitCode - 全球开发者的开源社区,开源代码托管平台

properly-use-state-management-to-develope-5

上述代码维护了一个ChildList类型的数据源，点击"X"按钮删除一些数据后再点击Recover进行恢复ChildList，发现再次点击"X"按钮进行删除时，UI并没有刷新，同时也没有打印出“CompList ChildList change”的日志。

代码中对数据源childList重新赋值时，是通过Ancestor对象的方法loadData。

  1.   public loadData() {
  2.     let tempList = [new Child(1), new Child(2), new Child(3), new Child(4), new Child(5)];
  3.     this.childList = tempList;
  4.   }

在loadData方法中，创建了一个临时的Child类型的数组tempList，并且将Ancestor对象的成员变量的childList指向了tempList。但是这里创建的Child[]类型的数组tempList其实并没有能被观测的能力（也就说它的变化无法主动触发UI刷新）。当它被赋值给childList之后，触发了ForEach的刷新，使得界面完成了重建，但是再次点击删除时，由于此时的childList已经指向了新的tempList代表的数组，并且这个数组并没有被观测的能力，是个静态的量，所以它的更改不会被观测到，也就不会引起UI的刷新。实际上这个时候childList里的数据已经减少了，只是UI没有刷新。

有些开发者会注意到，在Page中初始化定义childList的时候，也是以这样一种方法去进行初始化的。

  1. @State childList: ChildList = [new Child(1), new Child(2), new Child(3), new Child(4),new Child(5)];
  2. @State ancestor: Ancestor = new Ancestor(this.childList)

但是由于这里的childList实际上是被@State装饰了，根据当前状态管理的观测能力，尽管右边赋值的是一个Child[]类型的数据，它并没有被@Observed装饰，这里的childList却依然具备了被观测的能力，所以能够正常的触发UI的刷新。当去掉childList的@State的装饰器后，不去重置数据源，也无法通过点击“X”按钮触发刷新。

因此，需要将具有观测能力的类对象绑定组件，来确保当改变这些类对象的内容时，UI能够正常的刷新。

  1. @Observed
  2. class Child {
  3.   count: number;
  4.   constructor(count: number) {
  5.     this.count = count
  6.   }
  7. }
  8. @Observed
  9. class ChildList extends Array<Child> {
  10. };
  11. @Observed
  12. class Ancestor {
  13.   childList: ChildList;
  14.   constructor(childList: ChildList) {
  15.     this.childList = childList;
  16.   }
  17.   public loadData() {
  18.     let tempList = new ChildList();
  19.     for (let i = 1; i < 6; i ++) {
  20.       tempList.push(new Child(i));
  21.     }
  22.     this.childList = tempList;
  23.   }
  24.  
  25.   public clearData() {
  26.     this.childList = []
  27.   }
  28. }
  29. @Component
  30. struct CompChild {
  31.   @Link childList: ChildList;
  32.   @ObjectLink child: Child;
  33.  
  34.   build() {
  35.     Row() {
  36.       Text(this.child.count+'')
  37.         .height(70)
  38.         .fontSize(20)
  39.         .borderRadius({
  40.           topLeft: 6,
  41.           topRight: 6
  42.         })
  43.         .margin({left: 50})
  44.       Button('X')
  45.         .backgroundColor(Color.Red)
  46.         .onClick(()=>{
  47.           let index = this.childList.findIndex((item) => {
  48.             return item.count === this.child.count
  49.           })
  50.           if (index !== -1) {
  51.             this.childList.splice(index, 1);
  52.           }
  53.         })
  54.         .margin({
  55.           left: 200,
  56.           right:30
  57.         })
  58.     }
  59.     .margin({
  60.       top:15,
  61.       left: 15,
  62.       right:10,
  63.       bottom:15
  64.     })
  65.     .borderRadius(6)
  66.     .backgroundColor(Color.Grey)
  67.   }
  68. }
  69. @Component
  70. struct CompList {
  71.   @ObjectLink@Watch('changeChildList') childList: ChildList;
  72.  
  73.   changeChildList() {
  74.     console.info('CompList ChildList change');
  75.   }
  76.  
  77.   isRenderCompChild(index: number) : number {
  78.     console.info("Comp Child is render" + index);
  79.     return 1;
  80.   }
  81.  
  82.   build() {
  83.     Column() {
  84.       List() {
  85.         ForEach(this.childList, (item: Child, index) => {
  86.           ListItem() {
  87.             // in low version, Dev Eco may throw a warning
  88.             // But you can still build and run the code
  89.             CompChild({
  90.               childList: this.childList,
  91.               child: item
  92.             })
  93.               .opacity(this.isRenderCompChild(index))
  94.           }
  95.  
  96.         })
  97.       }
  98.       .height('70%')
  99.     }
  100.   }
  101. }
  102. @Component
  103. struct CompAncestor {
  104.   @ObjectLink ancestor: Ancestor;
  105.  
  106.   build() {
  107.     Column() {
  108.       // in low version, Dev Eco may throw a warning
  109.       // But you can still build and run the code
  110.       CompList({ childList: this.ancestor.childList })
  111.       Row() {
  112.         Button("Clear")
  113.           .onClick(() => {
  114.             this.ancestor.clearData()
  115.           })
  116.           .width(100)
  117.           .margin({right: 50})
  118.         Button("Recover")
  119.           .onClick(() => {
  120.             this.ancestor.loadData()
  121.           })
  122.           .width(100)
  123.       }
  124.     }
  125.   }
  126. }
  127. @Entry
  128. @Component
  129. struct Page {
  130.   @State childList: ChildList = [new Child(1), new Child(2), new Child(3), new Child(4),new Child(5)];
  131.   @State ancestor: Ancestor = new Ancestor(this.childList)
  132.  
  133.   build() {
  134.     Column() {
  135.       // in low version, Dev Eco may throw a warning
  136.       // But you can still build and run the code
  137.       CompAncestor({ ancestor: this.ancestor})
  138.     }
  139.   }
  140. }

上述代码运行效果如下。

properly-use-state-management-to-develope-6

核心的修改点是将原本Child[]类型的tempList修改为具有被观测能力的ChildList类。

  1. public loadData() {
  2.     let tempList = new ChildList();
  3.     for (let i = 1; i < 6; i ++) {
  4.       tempList.push(new Child(i));
  5.     }
  6.     this.childList = tempList;
  7.   }

ChildList类型在定义的时候使用了@Observed进行装饰，所以用new创建的对象tempList具有被观测的能力，因此在点击“X”按钮删除其中一条内容时，变量childList就能够观测到变化，所以触发了ForEach的刷新，最终UI渲染刷新。

合理使用ForEach/LazyForEach

减少使用LazyForEach的重建机制刷新UI

开发过程中通常会将LazyForEach和状态变量结合起来使用。

  1. class BasicDataSource implements IDataSource {
  2.   private listeners: DataChangeListener[] = [];
  3.   private originDataArray: StringData[] = [];
  4.  
  5.   public totalCount(): number {
  6.     return 0;
  7.   }
  8.  
  9.   public getData(index: number): StringData {
  10.     return this.originDataArray[index];
  11.   }
  12.  
  13.   registerDataChangeListener(listener: DataChangeListener): void {
  14.     if (this.listeners.indexOf(listener) < 0) {
  15.       console.info('add listener');
  16.       this.listeners.push(listener);
  17.     }
  18.   }
  19.  
  20.   unregisterDataChangeListener(listener: DataChangeListener): void {
  21.     const pos = this.listeners.indexOf(listener);
  22.     if (pos >= 0) {
  23.       console.info('remove listener');
  24.       this.listeners.splice(pos, 1);
  25.     }
  26.   }
  27.  
  28.   notifyDataReload(): void {
  29.     this.listeners.forEach(listener => {
  30.       listener.onDataReloaded();
  31.     })
  32.   }
  33.  
  34.   notifyDataAdd(index: number): void {
  35.     this.listeners.forEach(listener => {
  36.       listener.onDataAdd(index);
  37.     })
  38.   }
  39.  
  40.   notifyDataChange(index: number): void {
  41.     this.listeners.forEach(listener => {
  42.       listener.onDataChange(index);
  43.     })
  44.   }
  45.  
  46.   notifyDataDelete(index: number): void {
  47.     this.listeners.forEach(listener => {
  48.       listener.onDataDelete(index);
  49.     })
  50.   }
  51.  
  52.   notifyDataMove(from: number, to: number): void {
  53.     this.listeners.forEach(listener => {
  54.       listener.onDataMove(from, to);
  55.     })
  56.   }
  57. }
  58.  
  59. class MyDataSource extends BasicDataSource {
  60.   private dataArray: StringData[] = [];
  61.  
  62.   public totalCount(): number {
  63.     return this.dataArray.length;
  64.   }
  65.  
  66.   public getData(index: number): StringData {
  67.     return this.dataArray[index];
  68.   }
  69.  
  70.   public addData(index: number, data: StringData): void {
  71.     this.dataArray.splice(index, 0, data);
  72.     this.notifyDataAdd(index);
  73.   }
  74.  
  75.   public pushData(data: StringData): void {
  76.     this.dataArray.push(data);
  77.     this.notifyDataAdd(this.dataArray.length - 1);
  78.   }
  79.  
  80.   public reloadData(): void {
  81.     this.notifyDataReload();
  82.   }
  83. }
  84.  
  85. class StringData {
  86.   message: string;
  87.   imgSrc: Resource;
  88.   constructor(message: string, imgSrc: Resource) {
  89.     this.message = message;
  90.     this.imgSrc = imgSrc;
  91.   }
  92. }
  93.  
  94. @Entry
  95. @Component
  96. struct MyComponent {
  97.   private data: MyDataSource = new MyDataSource();
  98.  
  99.   aboutToAppear() {
  100.     for (let i = 0; i <= 9; i++) {
  101.       this.data.pushData(new StringData(`Click to add ${i}`, $r('app.media.icon'))); // 在API12及以后的工程中使用app.media.app_icon
  102.     }
  103.   }
  104.  
  105.   build() {
  106.     List({ space: 3 }) {
  107.       LazyForEach(this.data, (item: StringData, index: number) => {
  108.         ListItem() {
  109.           Column() {
  110.             Text(item.message).fontSize(20)
  111.               .onAppear(() => {
  112.                 console.info("text appear:" + item.message);
  113.               })
  114.             Image(item.imgSrc)
  115.               .width(100)
  116.               .height(100)
  117.               .onAppear(() => {
  118.                 console.info("image appear");
  119.               })
  120.           }.margin({ left: 10, right: 10 })
  121.         }
  122.         .onClick(() => {
  123.           item.message += '0';
  124.           this.data.reloadData();
  125.         })
  126.       }, (item: StringData, index: number) => JSON.stringify(item))
  127.     }.cachedCount(5)
  128.   }
  129. }

上述代码运行效果如下。GitCode - 全球开发者的开源社区,开源代码托管平台

properly-use-state-management-to-develope-7

可以观察到在点击更改message之后，图片“闪烁”了一下，同时输出了组件的onAppear日志，这说明组件进行了重建。这是因为在更改message之后，导致LazyForEach中这一项的key值发生了变化，使得LazyForEach在reloadData的时候将这一项ListItem进行了重建。Text组件仅仅更改显示的内容却发生了重建，而不是更新。而尽管Image组件没有需要重新绘制的内容，但是因为触发LazyForEach的重建，会使得同样位于ListItem下的Image组件重新创建。

当前LazyForEach与状态变量都能触发UI的刷新，两者的性能开销是不一样的。使用LazyForEach刷新会对组件进行重建，如果包含了多个组件，则会产生比较大的性能开销。使用状态变量刷新会对组件进行刷新，具体到状态变量关联的组件上，相对于LazyForEach的重建来说，范围更小更精确。因此，推荐使用状态变量来触发LazyForEach中的组件刷新，这就需要使用自定义组件。

  1. class BasicDataSource implements IDataSource {
  2.   private listeners: DataChangeListener[] = [];
  3.   private originDataArray: StringData[] = [];
  4.  
  5.   public totalCount(): number {
  6.     return 0;
  7.   }
  8.  
  9.   public getData(index: number): StringData {
  10.     return this.originDataArray[index];
  11.   }
  12.  
  13.   registerDataChangeListener(listener: DataChangeListener): void {
  14.     if (this.listeners.indexOf(listener) < 0) {
  15.       console.info('add listener');
  16.       this.listeners.push(listener);
  17.     }
  18.   }
  19.  
  20.   unregisterDataChangeListener(listener: DataChangeListener): void {
  21.     const pos = this.listeners.indexOf(listener);
  22.     if (pos >= 0) {
  23.       console.info('remove listener');
  24.       this.listeners.splice(pos, 1);
  25.     }
  26.   }
  27.  
  28.   notifyDataReload(): void {
  29.     this.listeners.forEach(listener => {
  30.       listener.onDataReloaded();
  31.     })
  32.   }
  33.  
  34.   notifyDataAdd(index: number): void {
  35.     this.listeners.forEach(listener => {
  36.       listener.onDataAdd(index);
  37.     })
  38.   }
  39.  
  40.   notifyDataChange(index: number): void {
  41.     this.listeners.forEach(listener => {
  42.       listener.onDataChange(index);
  43.     })
  44.   }
  45.  
  46.   notifyDataDelete(index: number): void {
  47.     this.listeners.forEach(listener => {
  48.       listener.onDataDelete(index);
  49.     })
  50.   }
  51.  
  52.   notifyDataMove(from: number, to: number): void {
  53.     this.listeners.forEach(listener => {
  54.       listener.onDataMove(from, to);
  55.     })
  56.   }
  57. }
  58.  
  59. class MyDataSource extends BasicDataSource {
  60.   private dataArray: StringData[] = [];
  61.  
  62.   public totalCount(): number {
  63.     return this.dataArray.length;
  64.   }
  65.  
  66.   public getData(index: number): StringData {
  67.     return this.dataArray[index];
  68.   }
  69.  
  70.   public addData(index: number, data: StringData): void {
  71.     this.dataArray.splice(index, 0, data);
  72.     this.notifyDataAdd(index);
  73.   }
  74.  
  75.   public pushData(data: StringData): void {
  76.     this.dataArray.push(data);
  77.     this.notifyDataAdd(this.dataArray.length - 1);
  78.   }
  79. }
  80.  
  81. @Observed
  82. class StringData {
  83.   @Track message: string;
  84.   @Track imgSrc: Resource;
  85.   constructor(message: string, imgSrc: Resource) {
  86.     this.message = message;
  87.     this.imgSrc = imgSrc;
  88.   }
  89. }
  90.  
  91. @Entry
  92. @Component
  93. struct MyComponent {
  94.   @State data: MyDataSource = new MyDataSource();
  95.  
  96.   aboutToAppear() {
  97.     for (let i = 0; i <= 9; i++) {
  98.       this.data.pushData(new StringData(`Click to add ${i}`, $r('app.media.icon'))); // 在API12及以后的工程中使用app.media.app_icon
  99.     }
  100.   }
  101.  
  102.   build() {
  103.     List({ space: 3 }) {
  104.       LazyForEach(this.data, (item: StringData, index: number) => {
  105.         ListItem() {
  106.           // in low version, Dev Eco may throw a warning
  107.           // But you can still build and run the code
  108.           ChildComponent({data: item})
  109.         }
  110.         .onClick(() => {
  111.           item.message += '0';
  112.         })
  113.       }, (item: StringData, index: number) => index.toString())
  114.     }.cachedCount(5)
  115.   }
  116. }
  117.  
  118. @Component
  119. struct ChildComponent {
  120.   @ObjectLink data: StringData
  121.   build() {
  122.     Column() {
  123.       Text(this.data.message).fontSize(20)
  124.         .onAppear(() => {
  125.           console.info("text appear:" + this.data.message)
  126.         })
  127.       Image(this.data.imgSrc)
  128.         .width(100)
  129.         .height(100)
  130.     }.margin({ left: 10, right: 10 })
  131.   }
  132. }

上述代码运行效果如下。

properly-use-state-management-to-develope-8

可以观察到UI能够正常刷新，图片没有“闪烁”，且没有输出日志信息，说明没有对Text组件和Image组件进行重建。

这是因为使用自定义组件之后，可以通过@Observed和@ObjectLink配合去直接更改自定义组件内的状态变量实现刷新，而不需要利用LazyForEach进行重建。使用@Track装饰器分别装饰StringData类型中的message和imgSrc属性可以使更新范围进一步缩小到指定的Text组件。

在ForEach中使用自定义组件搭配对象数组

开发过程中经常会使用对象数组和ForEach结合起来使用，但是写法不当的话会出现UI不刷新的情况。

  1. @Observed
  2. class StyleList extends Array<TextStyle> {
  3. };
  4. @Observed
  5. class TextStyle {
  6.   fontSize: number;
  7.  
  8.   constructor(fontSize: number) {
  9.     this.fontSize = fontSize;
  10.   }
  11. }
  12. @Entry
  13. @Component
  14. struct Page {
  15.   @State styleList: StyleList = new StyleList();
  16.   aboutToAppear() {
  17.     for (let i = 15; i < 50; i++)
  18.     this.styleList.push(new TextStyle(i));
  19.   }
  20.   build() {
  21.     Column() {
  22.       Text("Font Size List")
  23.         .fontSize(50)
  24.         .onClick(() => {
  25.           for (let i = 0; i < this.styleList.length; i++) {
  26.             this.styleList[i].fontSize++;
  27.           }
  28.           console.info("change font size");
  29.         })
  30.       List() {
  31.         ForEach(this.styleList, (item: TextStyle) => {
  32.           ListItem() {
  33.             Text("Hello World")
  34.               .fontSize(item.fontSize)
  35.           }
  36.         })
  37.       }
  38.     }
  39.   }
  40. }

上述代码运行效果如下。

properly-use-state-management-to-develope-9

由于ForEach中生成的item是一个常量，因此当点击改变item中的内容时，没有办法观测到UI刷新，尽管日志表面item中的值已经改变了(这体现在打印了“change font size”的日志)。因此，需要使用自定义组件，配合@ObjectLink来实现观测的能力。

  1. @Observed
  2. class StyleList extends Array<TextStyle> {
  3. };
  4. @Observed
  5. class TextStyle {
  6.   fontSize: number;
  7.  
  8.   constructor(fontSize: number) {
  9.     this.fontSize = fontSize;
  10.   }
  11. }
  12. @Component
  13. struct TextComponent {
  14.   @ObjectLink textStyle: TextStyle;
  15.   build() {
  16.     Text("Hello World")
  17.       .fontSize(this.textStyle.fontSize)
  18.   }
  19. }
  20. @Entry
  21. @Component
  22. struct Page {
  23.   @State styleList: StyleList = new StyleList();
  24.   aboutToAppear() {
  25.     for (let i = 15; i < 50; i++)
  26.       this.styleList.push(new TextStyle(i));
  27.   }
  28.   build() {
  29.     Column() {
  30.       Text("Font Size List")
  31.         .fontSize(50)
  32.         .onClick(() => {
  33.           for (let i = 0; i < this.styleList.length; i++) {
  34.             this.styleList[i].fontSize++;
  35.           }
  36.           console.info("change font size");
  37.         })
  38.       List() {
  39.         ForEach(this.styleList, (item: TextStyle) => {
  40.           ListItem() {
  41.             // in low version, Dev Eco may throw a warning
  42.             // But you can still build and run the code
  43.             TextComponent({ textStyle: item})
  44.           }
  45.         })
  46.       }
  47.     }
  48.   }
  49. }

上述代码的运行效果如下。

properly-use-state-management-to-develope-10

使用@ObjectLink接受传入的item后，使得TextComponent组件内的textStyle变量具有了被观测的能力。在父组件更改styleList中的值时，由于@ObjectLink是引用传递，所以会观测到styleList每一个数据项的地址指向的对应item的fontSize的值被改变，因此触发UI的刷新。

这是一个较为实用的使用状态管理进行刷新的开发方式。

文章知识点与官方知识档案匹配，可进一步学习相关知识
CS入门技能树Linux入门初识Linux42834 人正在系统学习中
鸿蒙NEXT全套学习资料
微信名片
注：本文转载自blog.csdn.net的让开，我要吃人了的文章"https://blog.csdn.net/weixin_55362248/article/details/141864987"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！