HarmonyOS NEXT 通过条件渲染或显隐控制来实现组件在表现和潜伏间的切换。

开辟者可以通过条件渲染或显隐控制两种方式来实现组件在表现和潜伏间的切换。本文从两者原理机制的区别出发，对二者实用场景分别举行阐明，实现相应实用场景的示例并给出性能对比数据。
原理机制

条件渲染
if/else条件渲染是ArkUI应用开辟框架提供的渲染控制的本事之一。条件渲染可根据应用的差异状态，渲染对应分支下的UI形貌。条件渲染的作用机制如下：

  

• 页面初始构建时，会评估条件语句，构建实用分支的组件，若缺少实用分支，则不构建任何内容。  
  
• 应用状态变革时，会重新评估条件语句，删除不实用分支的组件，构建实用分支的组件，若缺少实用分支，则不构建任何内容。
  

显隐控制

显隐控制visibility是ArkUI应用开辟框架提供的组件通用属性之一。开辟者可以通过设定组件属性visibility差异的属性值，进而控制组件的显隐状态。visibility属性值及其形貌如下：

机制区别

具体针对实现组件表现和潜伏间切换的场景，条件渲染和显隐控制的作用机制区别总结如下：

实用场景

通过条件渲染或显隐控制，实现组件的表现和潜伏间的切换，两者的实用场景分别如下：
条件渲染的实用场景：

  

• 在应用冷启动阶段，应用加载绘制首页时，如果组件初始不必要表现，发起利用条件渲染更换显隐控制，以淘汰渲染时间，加速启动速率。  
  
• 如果组件不会较频仍地在表现和潜伏间切换，大概大部分时间不必要表现，发起利用条件渲染更换显隐控制，以淘汰界面复杂度、淘汰嵌套条理，提升性能。  
  
• 如果被控制的组件所占内存巨大，开辟者优先思量内存时，发起利用条件渲染更换显隐控制，以即时烧毁不必要表现的组件，节省内存。  
  
• 如果组件子树结构比力复杂，且反复切换条件渲染的控制分支，发起利用条件渲染共同组件复用机制，提升应用性能。  
  
• 如果切换项仅涉及部分组件的情况，且反复切换条件渲染的控制分支，发起利用条件渲染共同容器限定，精准控制组件更新的范围，提升应用性能。
  

显隐控制的实用场景：

  

• 如果组件频仍地在表现和潜伏间切换时，发起利用显隐控制更换条件渲染，以制止组件的频仍创建与烧毁，提升性能。  
  
• 如果组件潜伏后，在页面结构中，必要保持占位，发起实用显隐控制。
  

显隐控制

针对表现和潜伏间频仍切换的场景，下面示例通过按钮点击，实现1000张图片表现与潜伏，来简单复现该场景，并举行正反例性能数据的对比。
反例
利用条件循环实现表现和潜伏间的切换。

1. @Entry
2. @Component
3. struct WorseUseIf {
4.    
5.    
6.   @State isVisible: boolean = true;
7.   private data: number[] = [];
9.   aboutToAppear() {
10.    
11.    
12.     for (let i: number = 0; i < 1000; i++) {
13.    
14.    
15.       this.data.push(i);
16.     }
17.   }
19.   build() {
20.    
21.    
22.     Column() {
23.    
24.    
25.       Button("Switch visible and hidden").onClick(() => {
26.    
27.    
28.         this.isVisible = !(this.isVisible);
29.       }).width('100%')
30.       Stack() {
31.    
32.    
33.         if (this.isVisible) {
34.    
35.    // 使用条件渲染切换，会频繁创建与销毁组件
36.           Column() {
37.    
38.    
39.             ForEach(this.data, (item: number) => {
40.    
41.    
42.               Image($r('app.media.icon')).width('25%').height('12.5%')
43.             }, (item: number) => item.toString())
44.           }
45.         }
46.       }
47.     }
48.   }
49. }

复制代码

正例
利用显隐控制实现表现和潜伏间的切换。

1. @Entry
2. @Component
3. struct BetterUseVisibility {
4.    
5.    
6.   @State isVisible: boolean = true;
7.   private data: number[] = [];
9.   aboutToAppear() {
10.    
11.    
12.     for (let i: number = 0; i < 1000; i++) {
13.    
14.    
15.       this.data.push(i);
16.     }
17.   }
19.   build() {
20.    
21.    
22.     Column() {
23.    
24.    
25.       Button("Switch visible and hidden").onClick(() => {
26.    
27.    
28.         this.isVisible = !(this.isVisible);
29.       }).width('100%')
30.       Scroll() {
31.    
32.    
33.         Column() {
34.    
35.    
36.           ForEach(this.data, (item: number) => {
37.    
38.    
39.             Image($r('app.media.icon')).width('25%').height('12.5%')
40.           }, (item: number) => item.toString())
41.         }
42.       }.visibility(this.isVisible ? Visibility.Visible : Visibility.None)// 使用显隐控制切换，不会频繁创建与销毁组件
43.     }
44.   }
45. }

复制代码

效果对比
正反例雷同的利用步调：通过点击按钮，将初始状态为表现的循环渲染组件切换为潜伏状态，再次点击按钮，将潜伏状态切换为表近况态。两次切换间的时间隔断长度，需包管页面渲染完

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金