HarmonyOS：自定义组件冻结功能

一、简介

自定义组件冻结功能专为优化复杂UI页面的性能而设计，尤其适用于包含多个页面栈、长列表或宫格布局的场景。在这些情况下，当状态变量绑定了多个UI组件，其变化可能触发大量UI组件的刷新，进而导致界面卡顿和响应延迟。为了提升这类负载UI界面的刷新性能，开发者可以选择尝试使用自定义组件冻结功能。

组件冻结的工作原理是：

开发者通过设置freezeWhenInactive属性，即可激活组件冻结机制。

启用后，系统将仅对处于激活状态的自定义组件进行更新，这使得UI框架可以尽量缩小更新范围，仅限于用户可见范围内（激活状态）的自定义组件，从而提高复杂UI场景下的刷新效率。

当之前处于inactive状态的自定义组件重新变为active状态时，状态管理框架会对其执行必要的刷新操作，确保UI的正确展示。

简而言之，组件冻结旨在优化复杂界面下的UI刷新性能。在存在多个不可见自定义组件的情况下，如多页面栈、长列表或宫格，通过组件冻结可以实现按需刷新，即仅刷新当前可见的自定义组件，而将不可见自定义组件的刷新延迟至它们变为可见时。

需要注意，组件active/inactive并不等同于其可见性。组件冻结目前仅适用于以下场景：

页面路由：当前栈顶页面为active，非栈顶不可见页面为inactive

TabContent：只有当前显示的TabContent中的自定义组件处于active状态，其余则为inactive。

LazyForEach：仅当前显示的LazyForEach中的自定义组件为active，而缓存节点的组件则为inactive。

Navigation：当前显示的NavDestination中的自定义组件为active，而其他未显示的NavDestination组件则为inactive。其他场景，如堆叠布局（Stack）下的被遮罩的组件，这些组件尽管不可见，但并不被视为inactive状态，因此不在组件冻结的适用范围内。

说明
从API version 11开始，支持自定义组件冻结功能。

二、当前支持的场景

2.1 页面路由

当页面A调用router.pushUrl接口跳转到页面B时，页面A为隐藏不可见状态，此时如果更新页面A中的状态变量，不会触发页面A刷新。页面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(30)
      Button('first page storageLink + 1').fontSize(20).margin({ top: 16})
        .onClick(()=>{
          this.storageLink +=1})
      Button('go to next page').fontSize(30)
        .margin({ top: 16})
        .onClick(()=>{
          router.pushUrl({ url: 'pages/SecondTest'})})}}}

页面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})}}}

在上面的示例中：

点击页面A中的Button “first page storageLink + 1”，storageLink状态变量改变，@Watch中注册的方法first会被调用。

通过router.pushUrl({url: ‘pages/second’})，跳转到页面B，页面A隐藏，状态由active变为inactive。 3 .点击页面B中的Button “this.storageLink2 += 2”，只回调页面B@Watch中注册的方法second，因为页面A的状态变量此时已被冻结。

点击“back”，页面B被销毁，页面A的状态由inactive变为active，重新刷新在inactive时被冻结的状态变量，页面A@Watch中注册的方法first被再次调用。

2.2 TabContent

对Tabs中当前不可见的TabContent进行冻结，不会触发组件的更新。

需要注意的是：在首次渲染的时候，Tab只会创建当前正在显示的TabContent，当切换全部的TabContent后，TabContent才会被全部创建。

@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').margin({ top: 40}).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 =0onMessageUpdated(){
    console.info(`FreezeChild message callback func ${this.message}, index: ${this.index}`)}build(){
    Text("message" + `${this.message}, index: ${this.index}`)
      .fontSize(30)
      .fontWeight(FontWeight.Bold)}}

在上面的示例中：

点击“change message”更改message的值，当前正在显示的TabContent组件中的@Watch中注册的方法onMessageUpdated被触发。

点击“two”切换到另外的TabContent，TabContent状态由inactive变为active，对应的@Watch中注册的方法onMessageUpdated被触发。

再次点击“change message”更改message的值，仅当前显示的TabContent子组件中的@Watch中注册的方法onMessageUpdated被触发。

运行效果图

2.3 LazyForEach

对LazyForEach中缓存的自定义组件进行冻结，不会触发组件的更新。

// Basic implementation of IDataSource to handle data listener
class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[]=[];
  private originDataArray: string[]=[];
  public totalCount(): number {return0;}
  public getData(index: number): string {return this.originDataArray[index];}
  // 该方法为框架侧调用，为LazyForEach组件向其数据源处添加listener监听
  registerDataChangeListener(listener: DataChangeListener): void {if(this.listeners.indexOf(listener)<0){
      console.info('add listener');
      this.listeners.push(listener);}}
  // 该方法为框架侧调用，为对应的LazyForEach组件在数据源处去除listener监听
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);if(pos >=0){
      console.info('remove listener');
      this.listeners.splice(pos, 1);}}
  // 通知LazyForEach组件需要重载所有子组件
  notifyDataReload(): void {
    this.listeners.forEach(listener =>{
      listener.onDataReloaded();})}
  // 通知LazyForEach组件需要在index对应索引处添加子组件
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener =>{
      listener.onDataAdd(index);})}
  // 通知LazyForEach组件在index对应索引处数据有变化，需要重建该子组件
  notifyDataChange(index: number): void {
    this.listeners.forEach(listener =>{
      listener.onDataChange(index);})}
  // 通知LazyForEach组件需要在index对应索引处删除该子组件
  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener =>{
      listener.onDataDelete(index);})}}
class MyDataSource extends BasicDataSource {
  private dataArray: string[]=[];
  public totalCount(): number {return this.dataArray.length;}
  public getData(index: number): string {return this.dataArray[index];}
  public addData(index: number, data: string): void {
    this.dataArray.splice(index, 0, data);
    this.notifyDataAdd(index);}
  public pushData(data: string): void {
    this.dataArray.push(data);
    this.notifyDataAdd(this.dataArray.length - 1);}}
@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').margin({ bottom: 16}).onClick(()=>{
        this.message++
      })
      List({ space: 3}){
        LazyForEach(this.data, (item: string)=>{ListItem(){
            FreezeChild2({ message: this.message, index: item })}}, (item: string)=> item)}.cachedCount(5).height(500)}}}
@Component({ freezeWhenInactive: true})
struct FreezeChild2 {
  @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(20)
      .fontWeight(FontWeight.Bold)}}

在上面的示例中：
1.点击“change message”更改message的值，当前正在显示的ListItem中的子组件@Watch中注册的方法onMessageUpdated被触发。缓存节点@Watch中注册的方法不会被触发。（如果不加组件冻结，当前正在显示的ListItem和cachecount缓存节点@Watch中注册的方法onMessageUpdated都会触发watch回调。）

2.List区域外的ListItem滑动到List区域内，状态由inactive变为active，对应的@Watch中注册的方法onMessageUpdated被触发。

3.再次点击“change message”更改message的值，仅有当前显示的ListItem中的子组件@Watch中注册的方法onMessageUpdated被触发。

2.4 Navigation

当NavDestination不可见时，会对其子自定义组件设置成非激活态，不会触发组件的刷新。当返回该页面时，其子自定义组件重新恢复成激活态，触发@Watch回调进行刷新。
在下面例子中，NavigationContentMsgStack会被设置成非激活态，将不再响应状态变量的变化，也不会触发组件刷新。

@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 })}elseif(name ==='pageTwo'){
      pageTwoStack({ message: this.message, logNumber: this.logNumber })}elseif(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'}); //将name指定的NavDestination页面信息入栈
            })}}.title('NavIndex')
      .navDestination(this.PageMap)
      .mode(NavigationMode.Stack)}}}
@Component
struct pageOneStack {
  @Consume('pageInfo') pageInfo: NavPathStack;
  @State index: number =1;
  @Link message: number;
  @Link logNumber: number;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();returntrue;})}}
@Component
struct pageTwoStack {
  @Consume('pageInfo') pageInfo: NavPathStack;
  @State index: number =2;
  @Link message: number;
  @Link logNumber: number;build(){NavDestination(){Column(){
        NavigationContentMsgStack({ message: this.message, index: this.index, logNumber: this.logNumber })
        Text("cur stack size:" + `${this.pageInfo.size()}`)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Button('Next Page', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(()=>{
            this.pageInfo.pushPathByName('pageThree', null);})
        Button('Back Page', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(()=>{
            this.pageInfo.pop();})}.width('100%').height('100%')}.title('pageTwo')
    .onBackPressed(()=>{
      this.pageInfo.pop();returntrue;})}}
@Component
struct pageThreeStack {
  @Consume('pageInfo') pageInfo: NavPathStack;
  @State index: number =3;
  @Link message: number;
  @Link logNumber: number;build(){NavDestination(){Column(){
        NavigationContentMsgStack({ message: this.message, index: this.index, logNumber: this.logNumber })
        Text("cur stack size:" + `${this.pageInfo.size()}`)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Button('Next Page', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(()=>{
            this.pageInfo.pushPathByName('pageOne', null);})
        Button('Back Page', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(()=>{
            this.pageInfo.pop();})}.width('100%').height('100%')}.title('pageThree')
    .onBackPressed(()=>{
      this.pageInfo.pop();returntrue;})}}
@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(20)
        .fontWeight(FontWeight.Bold)
      Text("log number:" + `${this.logNumber}`)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)}}}

在上面的示例中：

1.点击“change message”更改message的值，当前正在显示的MyNavigationTestStack组件中的@Watch中注册的方法info被触发。

2.点击“Next Page”切换到PageOne，创建pageOneStack节点。

3.再次点击“change message”更改message的值，仅pageOneStack中的NavigationContentMsgStack子组件中的@Watch中注册的方法info被触发。

4.再次点击“Next Page”切换到PageTwo，创建pageTwoStack节点。

5.再次点击“change message”更改message的值，仅pageTwoStack中的NavigationContentMsgStack子组件中的@Watch中注册的方法info被触发。

6.再次点击“Next Page”切换到PageThree，创建pageThreeStack节点。

7.再次点击“change message”更改message的值，仅pageThreeStack中的NavigationContentMsgStack子组件中的@Watch中注册的方法info被触发。

8.点击“Back Page”回到PageTwo，此时，仅pageTwoStack中的NavigationContentMsgStack子组件中的@Watch中注册的方法info被触发。

9.再次点击“Back Page”回到PageOne，此时，仅pageOneStack中的NavigationContentMsgStack子组件中的@Watch中注册的方法info被触发。

10.再次点击“Back Page”回到初始页，此时，无任何触发。

标签： harmonyos 鸿蒙开发语言

本文转载自: https://blog.csdn.net/ChinaDragon10/article/details/143275732
版权归原作者 ChinaDragonDreamer 所有，如有侵权，请联系我们删除。

HarmonyOS：自定义组件冻结功能

一、简介

二、当前支持的场景

2.1 页面路由

2.2 TabContent

2.3 LazyForEach

2.4 Navigation

发表评论

“HarmonyOS：自定义组件冻结功能”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航