当前位置：首页 > news >正文

ForEach刷新UI机制

news 2025/6/25 10:13:25

官网地址：ForEach

在ArkUI中，提供了ForEach循环语句，用来初始化一个列表数据，我们知道，当ForEach中的数组发生变化时，会引起UI的刷新，但是究竟如何变化，会引起UI怎样的刷新，还需要进一步的去探索其逻辑。

1. ForEach参数和规则

参数：

参数名	类型	必填	说明
arr	Array<Object>	是	数据源，为Array类型的数组。说明： - 可以设置为空数组，此时不会创建子组件。 - 可以设置返回值为数组类型的函数，例如arr.slice(1, 3)，但设置的函数不应改变包括数组本身在内的任何状态变量，例如不应使用Array.splice(),Array.sort()或Array.reverse()这些会改变原数组的函数。
itemGenerator	(item: Object, index: number) => void	是	组件生成函数。 - 为数组中的每个元素创建对应的组件。 - item参数：arr数组中的数据项。 - index参数（可选）：arr数组中的数据项索引。说明： - 组件的类型必须是ForEach的父容器所允许的。例如，ListItem组件要求ForEach的父容器组件必须为List组件。
keyGenerator	(item: Object, index: number) => string	否	键值生成函数。 - 为数据源arr的每个数组项生成唯一且持久的键值。函数返回值为开发者自定义的键值生成规则。 - item参数：arr数组中的数据项。 - index参数（可选）：arr数组中的数据项索引。说明： - 如果函数缺省，框架默认的键值生成函数为(item: T, index: number) => { return index + '__' + JSON.stringify(item); } - 键值生成函数不应改变任何组件状态。

键值的生成规则和itemGenerator 、keyGenerator有关：

1.如果是keyGenerator这个函数缺省，此时生成规则由框架确定，生成规则为item和index拼接，(item: any, index: number)=>{ return index +“_”+ JSON.stringify(item); }。

2.如果keyGenerator没有缺省且未包含index，当itemGenerator中包含index，生成的规则是自定义键值与index拼接成的字符串，如(item)=>item+2 对应的键值是 index+'_'+(item+2)，如果itemGenerator中未包含index，此时keyGenerator的生成规则是由开发者自定义的键值生成规则。

3.如果keyGenerator没有缺省,且包含index，此时不管itemGenerator中是否包含index，生成的键值规则都是开发者自定义的键值生成规格，框架不会对去拼接index。

2. 场景和示例

ForEach在初始化时，会加载数组中所有的数据，并为其创建控件，也就是厨师数组如果有n项，就会创建n个对象

@Component
export struct ForEachView {@State private list: number[] = [1, 2, 3]private list1: number[] = [1, 2]private list2: number[] = [1, 2, 3, 4, 5]private isOne: boolean = true;build() {Column({ space: 20 }) {Column({ space: 10 }) {ForEach(this.list, (item: number) => {Child({ item: item })}, (item: number, index: number) => {console.debug(`ForEach: item = ${item}, index = ${index}`)return item.toString()})}Row({ space: 10 }) {Button("add").onClick(() => {this.list.push(4)})Button("insert").onClick(() => {this.list.splice(1, 0, 5)})Button("delete").onClick(() => {this.list.pop();})Button("changeArray").onClick(() => {if (this.isOne) {this.list = this.list1} else {this.list = this.list2}this.isOne = !this.isOne;})}}}
}@Component
struct Child {@Prop item: number;aboutToAppear(): void {console.debug(`aboutToAppear: child${this.item}`)}build() {Text(this.item.toString()).width(100).height(50).border({ width: 2, color: Color.Red })}aboutToDisappear(): void {console.debug(`aboutToDisappear: child${this.item}`)}}