文章目录一、引言二、基础用法告别手动重复2.1 三个参数2.2 实战代码三、进阶用法理解 Key 的重要性3.1 不指定 Key 的问题3.2 正确指定 Key3.3 使用建议四、总结一、引言在鸿蒙应用开发中我们经常需要渲染列表数据。比如一个热榜页面上面有很多热点条目。如果手动一个一个去写组件不仅代码冗余而且维护困难。这时候ForEach循环渲染组件就派上用场了。本文将带你快速掌握ForEach的基本用法和高级技巧。二、基础用法告别手动重复假设我们要渲染一个热榜列表最原始的方式是手动编写每一个Text组件Text(热点1) Text(热点2) Text(热点3) // ... 如果有100条就要写100个这样显然不现实。使用ForEach可以轻松解决这个问题。2.1 三个参数ForEach接受三个参数参数必填说明arr是数据源必须是数组类型itemGenerator是组件生成函数为每个数组元素创建对应的子组件keyGenerator否键值生成函数为每个数组项生成唯一且持久的键值。若未提供 keyGenerator框架默认使用 index ‘__’ JSON.stringify(item)作为键值2.2 实战代码首先创建一个数组作为数据源State hotList: string[] [热点1, 热点3, 热点4]然后在build方法中使用ForEach进行循环渲染完整代码如下Entry Component struct Index { State hotList: string[] [热点1, 热点3, 热点4] build() { Column() { ForEach(this.hotList, (item: string) { Text(item) .fontSize(30) .margin({ top: 10 }) }) } } }代码解释第一个参数this.hotList是数据源。第二个参数是一个箭头函数item代表数组中的每一项。这里我们为每一项创建一个Text组件并显示该项的内容。运行后页面就会自动渲染出四个Text组件显示对应的热点内容。这样无论数据源有多少项代码都只需要写一次非常方便。三、进阶用法理解 Key 的重要性ForEach的第三个参数key生成函数非常关键它决定了当数据源变化时哪些组件需要被重新渲染。3.1 不指定 Key 的问题看下面这个例子Entry Component struct Index { State hotList: string[] [热点1, 热点3, 热点4] build() { Column() { Button(添加元素2) .onClick(() { this.hotList.splice(1, 0, 热点2) // 在索引1处插入元素2 }) ForEach(this.hotList, (item: string) { MyComponent({ value: item }) }) } } } Component struct MyComponent { Prop value:string aboutToAppear(): void { console.log(${this.value} 被渲染了) } build() { Text(item) .fontSize(30) .margin({ top: 10 }) } }MyComponent是一个自定义组件它在aboutToAppear生命周期中打印日志表示自己被渲染了。当我们点击按钮添加元素热点2后数组变为[热点1, 热点2, 热点3, 热点4]。按道理只有新添加的热点2需要渲染但实际日志可能会显示热点3和热点4也被重新渲染了。原因ForEach在不指定第三个参数时ForEach渲染出来的组件默认使用索引开头的字符串index ‘__’ JSON.stringify(item)作为key。通过index ‘__’ JSON.stringify(item)可知在未添加热点2的时候热点3对应的 key 为1__热点3热点4对应的 key 为2_热点4添加元素热点2后数组内的元素索引发生了变化原来索引为1的元素热点3变成了索引2原来索引为2的元素热点4变成了索引3。由于默认key与索引息息相关相关元素的索引发生了变化它对应的key也会发生变化。此时热点3对应的 key 为2__热点3热点4对应的 key 为3_热点4key发生变化后这些key发生变化的组件就会被重新渲染。3.2 正确指定 Key为了解决上述问题我们需要为每一项指定一个唯一且稳定的 key而不是依赖索引。ForEach(this.numbers, (item: number) { MyComponent({ value: item }) }, (item: number) item.toString()) // 使用元素本身的值作为 key现在key 分别是热点1、热点3、热点4。当我们插入元素热点2时新元素的 key 是热点2而热点3和热点4的 key 没有变化因此它们不会被重新渲染只有新元素热点2会被渲染。3.3 使用建议优先使用数据中自带的唯一 ID如item.id作为 key。避免使用索引作为 key除非你明确知道数据不会发生插入、删除或排序操作。如果发现数据变了但页面没有更新首先检查 key 是否使用不当。四、总结ForEach是鸿蒙应用开发中非常实用的循环渲染组件。通过它我们可以高效地渲染列表数据告别手动重复编写 UI 代码。同时正确理解和使用第三个参数key可以避免不必要的组件重渲染提升应用性能。希望本文能帮助你快速上手ForEach在实际开发中写出更优雅、高效的代码。