ForEach什么情况下会触发复用

@Entry 
@Component 
struct MyComponent { 
  // data: MyDataSource2 = new MyDataSource2(); 
  @State data: DataI[] = [] 
  comType:string[] =['text', 'image', 'row', 'col'] 
 
  aboutToAppear() { 
    this.data = new Array(20).fill(1).map((i: number,idx): DataI => { 
      return { 
        str: idx + '', 
        type: this.comType[idx % this.comType.length] 
      } 
    }) 
  } 
 
  build() { 
    Column(){ 
      Button('update').onClick(()=>{ 
        this.data = new Array(20).fill(1).map((i: number,idx): DataI => { 
          return { 
            str: idx + '_update', 
            type: this.comType[idx % this.comType.length] 
          } 
        }) 
      }).height(60) 
      List() { 
        ForEach(this.data, (item: DataI, index) => { 
          ListItem() { 
            // if(item){ 
            Gizmos({ data: item, Child: ChildComponent }) 
              .reuseId(item.type) 
            // } 
          } 
          .borderColor(Color.Black) 
          .borderWidth(3) 
        }, (item: DataI) => item.str) 
      } 
      .layoutWeight(1) 
      .cachedCount(1) 
    } 
    .width('100%') 
    .height('100%') 
  } 
}