鸿蒙Next自定义组件冻结功能解析

头像
严肃的烤土司
     上海
    阅读 7 分钟

    一、功能概述

    鸿蒙Next的自定义组件冻结功能专为优化复杂UI页面性能而设计，在包含多页面栈、长列表或宫格布局等场景中作用显著。当状态变量绑定多个UI组件时，其变化可能引发大量UI组件刷新，导致界面卡顿和响应延迟。此功能通过设置freezeWhenInactive属性激活组件冻结机制，仅更新处于激活状态的自定义组件，缩小更新范围，提高复杂UI场景下的刷新效率。当inactive状态的组件重新变为active时，状态管理框架会执行必要刷新操作以确保UI正确展示，实现按需刷新，如多页面栈、长列表或宫格布局中仅刷新当前可见组件，延迟不可见组件的刷新。

    适用场景

    1. 页面路由：当前栈顶页面为active，非栈顶不可见页面为inactive。
    2. TabContent：当前显示的TabContent中的自定义组件处于active状态，其余为inactive（首次渲染时，Tab只创建当前显示的TabContent，切换全部TabContent后才全部创建）。
    3. LazyForEach：仅当前显示的LazyForEach中的自定义组件为active，缓存节点的组件为inactive。
    4. Navigation：当前显示的NavDestination中的自定义组件为active，其他未显示的NavDestination组件为inactive。

    注意事项

    组件active / inactive不等同于可见性，如堆叠布局（Stack）下被遮罩的组件虽不可见，但不视为inactive状态，不在组件冻结适用范围内。从API version 11开始支持该功能。

    二、功能示例

    （一）页面路由

    1. 页面A跳转到页面B

      • 点击页面A中的“first page storageLink + 1”按钮，storageLink状态变量改变，@Watch中注册的first方法被调用。
      • 通过router.pushUrl({url: 'pages/second'})跳转到页面B后，页面A隐藏，状态变为inactive。此时点击页面B中的“this.storageLink2 += 2”按钮，仅回调页面B中@Watch注册的second方法，因为页面A的状态变量已被冻结。
      • 点击“back”返回页面A，页面A状态由inactive变为active，重新刷新之前被冻结的状态变量，@Watch中注册的first方法再次被调用。

    2. 相关代码示例

      // 页面A
import { router } from '@kit.ArkUI';
@Entry
@Component({ freezeWhenInactive: true })
struct FirstTest {
  @StorageLink('PropA') @Watch("first") storageLink: number = 47;
  first() {
 console.info("first page " + `${this.storageLink}`)
  }
  build() {
 Column() {
   Text(`From fist Page ${this.storageLink}`).fontSize(50)
   Button('first page storageLink + 1').fontSize(30)
    .onClick(() => {
       this.storageLink += 1
     })
   Button('go to next page').fontSize(30)
    .onClick(() => {
       router.pushUrl({ url: 'pages/second' })
     })
 }
  }
}

// 页面B
import { router } from '@kit.ArkUI';
@Entry
@Component({ freezeWhenInactive: true })
struct SecondTest {
  @StorageLink('PropA') @Watch("second") storageLink2: number = 1;
  second() {
 console.info("second page: " + `${this.storageLink2}`)
  }
  build() {
 Column() {
   Text(`second Page ${this.storageLink2}`).fontSize(50)
   Button('Change Divider.strokeWidth')
    .onClick(() => {
       router.back()
     })
   Button('second page storageLink2 + 2').fontSize(30)
    .onClick(() => {
       this.storageLink2 += 2
     })
 }
  }
}

    （二）TabContent

    1. 操作与响应

      • 点击“change message”更改message的值，当前正在显示的TabContent组件中的@Watch注册的onMessageUpdated方法被触发。
      • 点击切换到另外的TabContent，该TabContent状态由inactive变为active，对应的@Watch注册的onMessageUpdated方法被触发。
      • 再次点击“change message”更改message的值，仅当前显示的TabContent子组件中的@Watch注册的onMessageUpdated方法被触发。

    2. 相关代码示例

      @Entry
@Component
struct TabContentTest {
  @State @Watch("onMessageUpdated") message: number = 0;
  private data: number[] = [0, 1]
  onMessageUpdated() {
 console.info(`TabContent message callback func ${this.message}`)
  }
  build() {
 Row() {
   Column() {
     Button('change message').onClick(() => {
       this.message++
     })
     Tabs() {
       ForEach(this.data, (item: number ) => {
         TabContent() {
           FreezeChild({ message: this.message, index: item })
         }.tabBar(`tab${item}`)
       }, (item: number) => item.toString())
     }
   }
  .width('100%')
 }
.height('100%')
  }
}

@Component({ freezeWhenInactive: true })
struct FreezeChild {
  @Link @Watch("onMessageUpdated") message: number
  private index: number = 0
  onMessageUpdated() {
 console.info(`FreezeChild message callback func ${this.message}, index: ${this.index}`)
  }
  build() {
 Text("message" + `${this.message}, index: ${this.index}`)
  .fontSize(50)
  .fontWeight(FontWeight.Bold)
  }
}

    （三）LazyForEach

    1. 操作与响应

      • 点击“change message”更改message的值，当前正在显示的ListItem中的子组件@Watch注册的onMessageUpdated方法被触发，缓存节点@Watch注册的方法不会被触发（若不使用组件冻结，当前显示的ListItem和cachecount缓存节点@Watch注册的onMessageUpdated方法都会触发watch回调）。
      • List区域外的ListItem滑动到List区域内，状态由inactive变为active，对应的@Watch注册的onMessageUpdated方法被触发。
      • 再次点击“change message”更改message的值，仅有当前显示的ListItem中的子组件@Watch注册的onMessageUpdated方法被触发。

    2. 相关代码示例

      // 数据源相关类
class BasicDataSource implements IDataSource {
  // 省略部分代码
}
class MyDataSource extends BasicDataSource {
  // 省略部分代码
}

@Entry
@Component
struct LforEachTest {
  private data: MyDataSource = new MyDataSource();
  @State @Watch("onMessageUpdated") message: number = 0;
  onMessageUpdated() {
 console.info(`LazyforEach message callback func ${this.message}`)
  }
  aboutToAppear() {
 for (let i = 0; i <= 20; i++) {
   this.data.pushData(`Hello ${i}`)
 }
  }
  build() {
 Column() {
   Button('change message').onClick(() => {
     this.message++
   })
   List({ space: 3 }) {
     LazyForEach(this.data, (item: string ) => {
       ListItem() {
         FreezeChild({ message: this.message, index: item })
       }
     }, (item: string) => item)
   }.cachedCount(5).height(500)
 }
  }
}

@Component({ freezeWhenInactive: true })
struct FreezeChild {
  @Link @Watch("onMessageUpdated") message: number;
  private index: string = "";
  aboutToAppear() {
 console.info(`FreezeChild aboutToAppear index: ${this.index}`)
  }
  onMessageUpdated() {
 console.info(`FreezeChild message callback func ${this.message}, index: ${this.index}`)
  }
  build() {
 Text("message" + `${this.message}, index: ${this.index}`)
  .width('90%')
  .height(160)
  .backgroundColor(0xAFEEEE)
  .textAlign(TextAlign.Center)
  .fontSize(30)
  .fontWeight(FontWeight.Bold)
  }
}

    （四）Navigation

    1. 操作与响应

      • 点击“change message”更改message的值，当前正在显示的MyNavigationTestStack组件中的@Watch注册的info方法被触发。
      • 点击“Next Page”切换到PageOne，创建pageOneStack节点；再次点击“change message”，仅pageOneStack中的NavigationContentMsgStack子组件中的@Watch注册的info方法被触发。
      • 依此类推，在页面切换过程中，只有当前显示页面的相关组件会响应状态变量变化。点击“Back Page”返回时，对应页面的组件重新响应状态变化。

    2. 相关代码示例

      @Entry
@Component
struct MyNavigationTestStack {
  @Provide('pageInfo') pageInfo: NavPathStack = new NavPathStack();
  @State @Watch("info") message: number = 0;
  @State logNumber: number = 0;
  info() {
 console.info(`freeze-test MyNavigation message callback ${this.message}`);
  }
  @Builder
  PageMap(name: string) {
 if (name === 'pageOne') {
   pageOneStack({ message: this.message, logNumber: this.logNumber })
 } else if (name === 'pageTwo') {
   pageTwoStack({ message: this.message, logNumber: this.logNumber })
 } else if (name === 'pageThree') {
   pageThreeStack({ message: this.message, logNumber: this.logNumber })
 }
  }
  build() {
 Column() {
   Button('change message')
    .onClick(() => {
       this.message++;
     })
   Navigation(this.pageInfo) {
     Column() {
       Button('Next Page', { stateEffect: true, type: ButtonType.Capsule })
        .width('80%')
        .height(40)
        .margin(20)
        .onClick(() => {
           this.pageInfo.pushPath({ name: 'pageOne' });
         })
     }
   }.title('NavIndex')
  .navDestination(this.PageMap)
  .mode(NavigationMode.Stack)
 }
  }
}

@Component
struct pageOneStack {
  // 省略部分代码
  build() {
 NavDestination() {
   Column() {
     NavigationContentMsgStack({ message: this.message, index: this.index, logNumber: this.logNumber })
     Text("cur stack size:" + `${this.pageInfo.size()}`)
      .fontSize(30)
      .fontWeight(FontWeight.Bold)
     Button('Next Page', { stateEffect: true, type: ButtonType.Capsule })
      .width('80%')
      .height(40)
      .margin(20)
      .onClick(() => {
         this.pageInfo.pushPathByName('pageTwo', null);
       })
     Button('Back Page', { stateEffect: true, type: ButtonType.Capsule })
      .width('80%')
      .height(40)
      .margin(20)
      .onClick(() => {
         this.pageInfo.pop();
       })
   }.width('100%').height('100%')
 }.title('pageOne')
.onBackPressed(() => {
   this.pageInfo.pop();
   return true;
 })
  }
}

// pageTwoStack和pageThreeStack结构类似，省略部分代码

@Component({ freezeWhenInactive: true })
struct NavigationContentMsgStack {
  @Link @Watch("info") message: number;
  @Link index: number;
  @Link logNumber: number;
  info() {
 console.info(`freeze-test NavigationContent message callback ${this.message}`);
 console.info(`freeze-test ---- called by content ${this.index}`);
 this.logNumber++;
  }
  build() {
 Column() {
   Text("msg:" + `${this.message}`)
    .fontSize(30)
    .fontWeight(FontWeight.Bold)
   Text("log number:" + `${this.logNumber}`)
    .fontSize(30)
    .fontWeight(FontWeight.Bold)
 }
  }
}

    鸿蒙Next的自定义组件冻结功能通过合理的场景适配和简单的属性设置，有效提升了复杂UI页面的性能表现，开发者可根据实际项目需求灵活运用该功能来优化应用的用户体验。

    HarmonyOSharmonyos-nextharmonyos
    严肃的烤土司
    1 声望0 粉丝
    « 上一篇
    鸿蒙Next Track 使用方法总结
    下一篇 »
    鸿蒙Next状态管理优秀实践

    引用和评论

    推荐阅读
    头像
    鸿蒙Next自定义组件的布局

    严肃的烤土司阅读 20

    头像
    HarmonyOS NEXT 技术问答冲榜，等你来战！

    SegmentFault思否赞 15阅读 43.1k评论 6

    头像
    “一起学 HarmonyOS”第二弹来啦！

    SegmentFault思否赞 5阅读 30.6k评论 5

    头像
    HarmonyOS Next 应用实战案例—“马背上的家乡”元服务

    申公豹赞 8阅读 2k评论 3

    头像
    API接口设计的未来趋势：探索技术方向与实践方案

    Swift社区赞 3阅读 1k

    头像
    HarmonyOS 如何获取设备信息（系统、版本、网络连接状态）

    Swift社区赞 3阅读 1k

    头像
    构建安全护盾：HarmonyOS 应用的数据安全审计与日志管理实战

    Swift社区赞 3阅读 846

    0 条评论
    得票最新