16、鸿蒙学习——Visibility与（if...else）该如何选择

在鸿蒙中我们如果要控制一个组件的显示与隐藏可以设置组件的Visibility属性，也可使用（if...else）条件控制，具体我们该选择哪个？二者有什么区别呢？

1、Visibility

名称	描述
Hidden	隐藏，但参与布局进行占位。
Visible	显示。
None	隐藏，但不参与布局，不进行占位。

// xxx.ets
@Entry
@Component
struct VisibilityExample {build() {Column() {Column() {// 隐藏不参与占位Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE)// 隐藏参与占位Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC)Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE)// 正常显示，组件默认的显示模式Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC)Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE)}.width('90%').border({ width: 1 })}.width('100%').margin({ top: 5 })}
}

 2、if...else

if语句的每个分支都包含一个构建函数。此类构建函数必须创建一个或多个子组件。在初始渲染时，if语句会执行构建函数，并将生成的子组件添加到其父组件中。

每当if或else if条件语句中使用的状态变量发生变化时，条件语句都会更新并重新评估新的条件值。如果条件值评估发生了变化，这意味着需要构建另一个条件分支。此时ArkUI框架将：

• 删除所有以前渲染的（早期分支的）组件。
• 执行新分支的构造函数，将生成的子组件添加到其父组件中。

二者区别

通过if进行条件渲染，其作用方式是满足条件时创建、未满足条件时销毁组件：- 只有在满足条件时，组件才会被创建。 - 条件不满足时，组件会被销毁，不会挂载在组件树上。

通过visibility进行显隐控制，根据参数值，控制当前组件显示或隐藏： - 初始时，无论是否显示，组件都会被创建。 - 隐藏时，组件不会被销毁，会继续挂载在组件树上，只是状态为不可见。

如何选择

1、关于if条件渲染或visibility显隐控制，实现组件的展示和隐藏状态的切换，两者的优势场景分别如下： 显隐控制的优势场景： - 如果组件动效占用较多、频繁地在展示和隐藏间切换时，建议使用显隐控制替代条件渲染，以避免组件的频繁创建与销毁，提升性能。详细使用场景，请参考《[优化布局性能](zh-cn/application-dev/performance/reduce-view-nesting-levels.md · OpenHarmony/docs - Gitee.com)》。

2、条件渲染的优势场景： - 在应用冷启动阶段，应用加载绘制首页时，如果组件初始不需要显示，建议使用条件渲染替代显隐控制，以减少渲染时间，加快启动速度。详细使用场景，请参考《[应用冷启动与加载绘制首页](zh-cn/application-dev/performance/reduce-redundant-operations-when-render-first-frame.md · OpenHarmony/docs - Gitee.com)》。

3、如果组件动效占用较少或无动效、不会较频繁地在展示和隐藏间切换，或者大部分时间不需要显示，建议使用条件渲染替代显隐控制，以减少界面复杂度、减少嵌套层次，提升性能。 - 如果被控制的组件所占内存庞大，开发者优先考虑内存时，建议使用条件渲染替代显隐控制，以即时销毁不需要显示的组件，节省内存。

4、针对反复切换条件渲染的控制分支的情况，且控制分支中的组件子树结构比较复杂，建议使用组件复用机制，提升应用性能。详细使用场景，请参考《[组件复用实践](zh-cn/application-dev/performance/component-recycle.md · OpenHarmony/docs - Gitee.com)》。

5、针对反复切换条件渲染的控制分支，但切换项仅涉及页面中少部分组件的情况，建议精准控制组件更新的范围，例如使用容器限制刷新范围，提升应用性能。详细使用场景，请参考《[提升应用响应速度](zh-cn/application-dev/performance/improve-application-response.md · OpenHarmony/docs - Gitee.com)》。

参考：华为开发者问答 | 华为开发者联盟