ArkTs基础语法-声明式UI-条件渲染/循环渲染

条件渲染

使用规则

• 支持if、else和else if语句。
• if、else if语句后跟随的条件语句可以使用状态变量或者常规变量
• 允许在容器组件内使用，通过条件语句构建不同的子组件
• 条件渲染语句在组件的父子关系中是透明的
• 每个分支内部，都需要遵循构建函数的规则，创建一个或者多个组件
• 某些容器组件限制子组件的类型或数量，在条件渲染语句中，也将遵守这些规则。

更新机制

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

1. 重新评估判断条件，分支是否有变化
2. 如果分支发生变化，删除此前构建的所有子组件，同时执行新分支的构造函数，将新组建添加到父容器中

循环渲染

	ForEach(this.arr, (item: string, index) => {
        Text(item)
          .width(50)
          .height(50)
      }, (item: string, index: number) => {
        return item
      })

键值生成规则

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

ForEach提供了一个名为keyGenerator的参数，这是一个函数，可以通过该函数自定义键值的生成规则。ArkUI框架的默认键值生成函数为：(item: Object, index: number) => {return index + '_' + JSON.stringify(item);}

ForEach键值生成规则：

组件创建规则

在确定键值生成规则后，ForEach的第二个参数itemGenerator函数会根据键值生成规则为数据源的每个数据项创建组件。

首次渲染

在ForEach首次渲染时，会根据ForEach会为每项数据生成唯一键值，并创建对应的组件。

如果keyGenerator函数返回的值存在相同的情况下，框架只会创建第一个组件，不会创建多个拥有相同键值的组件。

非首次渲染

在ForEach组件进行非首次渲染时，会检查新生成的键值是否已经存在，如果不存在，会创建一个新的组件，如果已经存在，则直接渲染该键值所对应的组件。

使用场景

数据源不变

在数据源保持不变的场景中，数据源可以直接采用基本数据类型。例如，在页面加载状态时，可以使用骨架屏列表进行渲染展示。

数据源数组项发生变化

在数据源数组项发生变化的场景下，例如进行数组插入、删除或者数组项索引位置发生交换时，数据源应为对象数组类型，自定义ForEach中的第三个参数keyGenerator函数，使用对象的唯一ID作为最终键值。

数据源数组项子属性变化

当数据源的数组项为对象类型，并且只修改了某个属性时，ArkUI框架无法监听到@State装饰器修饰的数据源数组项的属性变化，导致无法触发ForEach重新渲染。需要配合@Observed和@ObjectLink装饰器使用。

@Observed
class Article {
  id: string;