【Harmony OS 4.0】渲染控制

1. if…else 条件渲染

1. 根据应用的不同状态，渲染不同的UI界面。
2. 修改条件分支的时候，会把原来的条件分支组件先删除，再重新创建一个条件分支组件。

1.1 代码示例如下：

// 自定义组件
@Component
struct MyChild {
  @Link count: number // @Link装饰器 - 父子双向同步 - 禁止本地初始化
  @Prop label: string // @Prop装饰器 - 父子单向同步 - 允许本地初始化

  build() {
    Row() {
      Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) {
        Text(`${this.label}`)
        Button(`计数器${this.count}`).onClick(() => {
          this.count += 1
        })
      }
    }
  }
}

@Entry
@Component
struct UITest6 {
  @State flag: boolean = true // @State装饰器 - 组件内状态 - 必须本地初始化
  @State parentCount: number = 0

  build() {
    Column() {
      if (this.flag) {
        MyChild({ count: $parentCount, label: '真真' })
      } else {
        MyChild({ count: $parentCount, label: '假假' })
      }
      Button(`是否真假：${this.flag}`).onClick(() => {
        this.flag = !this.flag
      }).margin(10)
    }
  }
}

2. 循环渲染

1. 可使用 ForEach 语句基于一个数组来快速渲染一个组件列表。
2. ForEach接口 基于 数组类型数据 来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。
   例如，ListItem组件要求ForEach的父容器组件必须为List组件。
3. 和 if…else 不一样，会做二次渲染，可以做到单独修改某一个值。

2.1 接收三个参数

ForEach(
  arr: any[],
  itemGenerator: (item: any, index?: number) => void,
  keyGenerator?: (item: any, index?: number) => string
)

2.1.1 arr

1. 需要进行循环渲染的数据源，必须为数组类型。

2.1.2 itemGenerator

1. 组件生成函数，用于为 arr 数组中的每个元素创建对应的组件。
2. 该函数可接收俩个参数，分别是：
   item：arr 数组中的数据项，
   index(可选)：arr 数组中的数据项的索引。

2.1.3 keyGenerator（可选）

1. 是 key 生成函数，用于 arr 数组中的每个数据项生成唯一的 key
2. key 的作用：
   ForEach 在数组发生变化时，需要重新渲染组件列表，再重新渲染时，它会尽量复用原来的组件对象，而不是重新渲染整个组件列表。
   key 的作用就是辅助 ForEach 完成组件对象的复用。
3. 具体逻辑如下：
   ForEach 在进行初次渲染时，会使用 keyGenerator 为数组中的每个元素生成一个唯一的 key，并将 key 作为组件对象的标识。当数组发生变化导致 ForEach 需要重新渲染时，ForEach 会再次使用 keyGenerator 为每个元素重新生成一遍 key，然后 ForEach 会检查新生成的 key 在上次渲染时是否已经存在，若存在，ForEach 就会认为这个 key 对应的数组元素没有发生变化，那它就会直接复用这个 key 所对应的组件对象；若不存在，ForEach 就会认为这个 key 对应的元素发生了变化，或者该元素为新增元素，此时，就会为该元素重新创建一个组件对象。
4. 如果开发者没有定义 keyGenerator函数，则系统会使用默认的 key 生成函数，即

(item: any, index: number) => { return index + '_' + JSON.stringify(item)}

在某些情况下默认的 key 生成函数，会导致界面渲染效率低下，此时可考虑通过 keyGenerator函数 自定义生成逻辑，即

ForEach(this.arr, (item) => {Text(item)}, item => JSON.stringify(item) )

5. 在自定义 key 的生成逻辑时，必须得保证每个元素的 key 都是唯一的，这是规定好的。

2.2 代码示例如下：

// 自定义组件
@Component
struct MyChild {
  @Prop label: string

  build() {
    Column() {
      Text(this.label).fontSize(24).fontColor("#9955FF")
    }
  }
}

@Entry
@Component
struct UITest7 {
  @State my_array: Array<string> = ['one', 'two', 'three']

  build() {
    Column({space: 15}) {
      ForEach(this.my_array, (item: string, index: number) => { // ForEach接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用。
        MyChild({label: item}) // 且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。
      })
      Button('修改two').onClick(() => {
        this.my_array[1] = 'new_two' // 和 if..else 不一样，会做二次渲染，可以做到单独修改某一个值。
      })
    }
    .justifyContent(FlexAlign.Center)
    .height("100%")
    .width('100%')
  }
}