ArkTS 关于ForEach的第三个参数键值【小白拓展】

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

ForEach接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。是鸿蒙开发中的常用接口。

---

一、ForEach的基本使用

	ForEach( 数据源arr, 组件生成函数itemGenerator()=>{}, 键值生成函数()=>{})

值得注意的是，键值生成函数是非必填的。

二、键值生成函数的详解

1.键值生成函数的概念

为数据源arr的每个数组项生成唯一且持久的键值。
函数返回值为开发者自定义的键值生成规则。

框架默认的键值生成函数代码如下（示例）：

 (item: T, index: number) => { return index + '__' + JSON.stringify(item); }

2.常见需求场景

根据键值生成规则每个数组项生成唯一持久的键值。

当数据源是复杂数据类型时，仅仅改变每个数组项内部的数据，框架默认的键值生成函数是无法监听到的。
当且仅当数组项删除或增加，foreach才会重新渲染。

当我们想要监听到具体数据变化且重新渲染可视界面时，我们可以通过自定义键值生成规则来达到。

代码如下（示例）：

@State dataList: CartGoodsModel[] = []

ForEach(this.dataList, (cart: CartGoodsModel) => {},(cart: CartGoods) => cart.skuId + "_" + cart.selected)

---

3.如何处理ForEach重新渲染图片闪烁

设置是否同步加载图片。建议加载尺寸较小的本地图片时将syncLoad设为true，因为耗时较短，在主线程上执行即可。

Image($r('app.media.xxx))
	.syncLoad(true)

总结

提示：这里对文章进行总结：

以上就是今天要讲的内容，本文仅仅简单介绍了foreach的第三个参数键值使用，下一次我们介绍一下foreach和lazyforeach的不同点以及适用场景。