【HarmonyOS实战开发】鸿蒙NEXT 渲染控制

目录

●渲染控制概述
●if/else：条件渲染
●ForEac：循环渲染
●LazyForEach：数据懒加载
●Repeat：循环渲染（推荐）
●ConnentSlot：混合开发

渲染控制概述

ArkUI通过自定义组件的build()函数和@builder装饰器声明式UI描述语句构建相应的的UI。在声明式描述语句中开发者除了使用系统组件外，还可以使用渲染语句来辅助UI的构建，这些渲染控制语句包括控制组件是否显示的条件语句，基于数组数据快速生成组件的虚幻渲染语句，针对大数据量的数据懒加载语句，针对混合模式开发的组件渲染语句。

if/else：条件渲染

ArkTS提供了渲染控制的能力，条件渲染可根据应用的不同状态，使用if、else和else if渲染对应状态下的UI内容。

使用规则

●支持if、else和else if语句
●if、else后跟随的条件语句可以使用状态变量
●允许在容器组件内使用，通过条件渲染语句构建不同的子组件。
●条件渲染语句在涉及到组件的父子关系时是"透明"的，当父组件和子组件之间存在一个或多个if语句时，必须遵守父组件关于子组件使用的规则
●每个分支内部的构建海曙必须遵循构建函数的规则，并创建一个或多个组件。无法创建组建的空构建函数会产生语法错误
●某些容器组件限制子组件的类型或数量，将条件渲染语句用于这些组件内时，这些限制同样应用于条件渲染语句内创建的组件。例如：Grid容器组件的子组件仅支持GridItem组件，在Grid内使用条件渲染语句时，条件渲染语句内仅允许使用GridItem组件。

更新机制

当if、else后跟随的状态判断中使用的状态变量值变化时，条件渲染语句会进行更新，更新步骤如下：

1.评估if和else if的状态判断条件，如果分支没有变化，无需执行以下步骤。如果分支有变化，则执行2、3步骤
2.删除此前构建的所有子组件
3.执行新分支的构造函数，将获取到的组件添加到if父容器中。如果缺少适用的else分支，则不构建然和内容。条件可以包括Typescript表达式。对于构造函数中的表达式，此类表达式不得更改应用程序状态。

ForEach:循环渲染

ForEach接口基于数组类型数据来进行需=循环渲染，需要与容器组件配合使用，且接口返回的数组应当是允许包含在ForEach父容器组件中的子组件。例如，ListItem组件要求ForEach的父容器组件必须为List组件

接口 描述

ForEach(
  arr: Array,
  itemGenerator: (item: Object, index: number) => void,
  keyGenerator?: (item: Object, index: number) => string
)

以下是参数的详细说明：

键值生成规则

在ForEach循环渲染过程中，系统会为每个数组元素生成一个唯一且持久的键值，用于表示对应的组件。当这个键值发生变化时，ArkUI框架将视为该数组元素已被替换或修改，并会基于新的键值创建一个新的组件。
ForEach提供了一个名为keyGenerator的参数，这是一个函数，