foreach作为组件渲染函数为鸿蒙中非常常见的函数,经常使用foreach进行列表及组件的渲染，是鸿蒙UI构建的大杀器

因此我们需要了解foreach的用法，

ForEach：循环渲染

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

示例代码

不建议使用基本类型作为数组元素，当数据源重复时，会造成缺失，建议使用对象数组作为数组传入。

先定义一个数组元素类型的接口，Id为数组的唯一标识，可以作为数组中唯一的键使用

接口定义

interface content{
  num:string
  id?:string
}

数据源

@State nums:content[]=[
{num:'1',id:"1"},
  {num:'1',id:'2'},
  {num:'1',id:'3'}
]

静态布局

Column(){
  Button('change arr').onClick(()=>{
    this.nums.push({num:"99",id:"4"})
    this.nums[0]={num:"43",id:'1'}
    this.nums=[...this.nums]
    console.log(`nums:${JSON.stringify(this.nums)}`)
  })
  //我们使用foreach三种传入参数方式进行构建，可以减少性能的开销
  ForEach(this.nums,(item:content,index:number)=>{
    Text(`content:${item.num}`)
  },(key:content)=> {
    ```
return JSON.stringify(key)+'_'+index

  })

}.width('100%')
.height('100%')