HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第27天，ForEach：循环渲染。
HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第27天，ForEach：循环渲染。
-
ForEach：循环渲染
-
ForEach接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。例如，ListItem组件要求ForEach的父容器组件必须为List组件。
说明
从API版本9开始，该接口支持在ArkTS卡片中使用。 -
接口描述
ForEach(
arr: Array,
itemGenerator: (item: any, index: number) => void,
keyGenerator?: (item: any, index: number) => string
)- 参数描述
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| arr | Array<any> | 是 | 数据源，为Array类型的数组。 |
| 说明： | |||
| - 可以设置为空数组，此时不会创建子组件。 | |||
| - 可以设置返回值为数组类型的函数，例如arr.slice(1, 3)，但设置的函数不应改变包括数组本身在内的任何状态变量，例如不应使用Array.splice(),Array.sort()或Array.reverse()这些会改变原数组的函数。 | |||
| itemGenerator | (item: any, index: number) => void | 是 | 组件生成函数。 |
| 说明： | |||
| - 为数组中的每个元素创建对应的组件。 | |||
| - item参数：arr数组中的数据项。 | |||
| - index参数（可选）：arr数组中的数据项索引。 | |||
| - 组件的类型必须是ForEach的父容器所允许的。例如，ListItem组件要求ForEach的父容器组件必须为List组件。 | |||
| keyGenerator | (item: any, index: number) => string | 否 | 键值生成函数。 |
| 说明： | |||
| - 如果函数缺省，框架默认的键值生成函数为(item: T, index: number) => { return index + ‘__’ + JSON.stringify(item); }。 | |||
| - 键值生成函数不应改变任何组件状态。 |
- 说明
- ForEach的itemGenerator函数可以包含if/else条件渲染逻辑。另外，也可以在if/else条件渲染语句中使用ForEach组件。
- 在初始化渲染时，ForEach会加载数据源的所有数据，并为每个数据项创建对应的组件，然后将其挂载到渲染树上。如果数据源非常大或有特定的性能需求，建议使用LazyForEach组件。
- 键值生成规则 在ForEach循环渲染过程中，系统会为每个数组元素生成一个唯一且持久的键值，用于标识对应的组件。当这个键值变化时，ArkUI框架将视为该数组元素已被替换或修改，并会基于新的键值创建一个新的组件。
ForEach提供了一个名为keyGenerator的参数，这是一个函数，开发者可以通过它自定义键值的生成规则。如果开发者没有定义keyGenerator函数，则ArkUI框架会使用默认的键值生成函数，即(item: any, index: number) => { return index + ‘__’ + JSON.stringify(item); }。
ArkUI框架对于ForEach的键值生成有一套特定的判断规则，这主要与itemGenerator函数的第二个参数index以及keyGenerator函数的第二个参数index有关，具体的键值生成规则判断逻辑如下图所示。
-
组件创建规则 在确定键值生成规则后，ForEach的第二个参数itemGenerator函数会根据键值生成规则为数据源的每个数组项创建组件。组件的创建包括两种情况：ForEach首次渲染和ForEach非首次渲染。
-
使用场景 ForEach组件在开发过程中的主要应用场景包括：数据源不变、数据源数组项发生变化（如插入、删除操作）、数据源数组项子属性变化。
-
使用建议
更多关于HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第27天，ForEach：循环渲染。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，ArkTS语言提供了ForEach组件用于循环渲染。ForEach允许开发者基于数据源动态生成UI组件，适用于列表、网格等需要重复渲染的场景。
ForEach的基本语法如下：
ForEach(
items: Array<any>,
itemGenerator: (item: any, index?: number) => void,
keyGenerator?: (item: any, index?: number) => string
)items：数据源，通常是一个数组。itemGenerator：生成UI组件的函数，接收当前项和索引作为参数。keyGenerator：可选参数，用于生成唯一键值，优化渲染性能。
示例代码：
@Entry
@Component
struct MyComponent {
private data: string[] = ['Item 1', 'Item 2', 'Item 3'];
build() {
Column() {
ForEach(this.data, (item: string, index: number) => {
Text(item)
.fontSize(20)
.margin(10)
}, (item: string, index: number) => item)
}
}
}在这个示例中，ForEach遍历data数组，为每个项生成一个Text组件，并显示在Column中。keyGenerator使用项本身作为唯一键值。
ForEach支持嵌套使用，可以处理复杂的数据结构。此外，ForEach会自动处理数据变化，当数据源更新时，UI会自动重新渲染。
总结：ForEach是ArkTS中用于循环渲染的组件，适用于动态生成UI的场景，支持数据源变化自动更新UI。
更多关于HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第27天，ForEach：循环渲染。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
