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%') 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.