Lines Matching refs:Repeat

1 # Repeat: Reusing Child Components
5 > Repeat is supported since API version 12.
7 For details about API parameters, see [Repeat APIs](https://gitee.com/openharmony/docs/blob/master/…
9Repeat**, used together with container components, renders repeated components based on the data s…
11Repeat** iterates data from the provided data source as required and creates the corresponding com…
15 - Repeat uses key value as identifiers. Therefore, **key()** must generate a unique value for each …
16 - **Repeat virtualScroll** must be used in the scrolling container component. Only the [List](../re…
17Repeat**, only one child component can be created in each iteration. Otherwise, there is no constr…
18 - When **Repeat** and custom component (or the @Builder function) are used together, the **RepeatIt…
19 …**virtualScroll** is enabled. If multiple template types are the same, **Repeat** overrides old **…
21Repeat** is used in a container component, only one **Repeat** can be contained. Take **List** as …
22 - When **virtualScroll** is enabled, the decorators of V1 are not supported in **Repeat**. Using th…
26 The purpose of **key()** is to allow **Repeat** to identify the details of array changes, including…
32 …hanges when the data item is moved, that is, the key changes. Therefore, Repeat considers that the…
37 **key()** can be left empty. **Repeat** will generate the default key.
39 ![Repeat-NonVS-KeyGen](./figures/Repeat-NonVS-KeyGen.png)
45 ![Repeat-VS-KeyGen](./figures/Repeat-VS-KeyGen.png)
51 All child components are created when **Repeat** is rendered for the first time. The original compo…
53Repeat** component updates data, it compares all keys in the last update with those in the latest …
55Repeat** compares all duplicate keys and reuses them, if the last key is unique and a new key is g…
57 … child components is less than the number of newly updated components, **Repeat** will create comp…
59 ![Repeat-NonVS-FuncGen](./figures/Repeat-NonVS-FuncGen.png)
63 At the first time when **Repeat** renders child components, only the required component is generate…
69 ![Repeat-Start](./figures/Repeat-Start.png)
71Repeat** component has two types of templateId. **templateId a** sets three as its maximum cache v…
73 ![Repeat-Slide](./figures/Repeat-Slide.png)
75 … component, coming up with a result of **templateId b**. In this case, **Repeat** obtains a node f…
77 …re are four nodes in the cache pool, which exceeds the rated three, so **Repeat** will release the…
79 ![Repeat-Slide-Done](./figures/Repeat-Slide-Done.png)
83 ![Repeat-Start](./figures/Repeat-Start.png)
87 ![Repeat-Update1](./figures/Repeat-Update1.png)
89 Now, **Repeat** notifies the parent component to re-lay out the nodes and compares the keys one by …
91 ![Repeat-Update2](./figures/Repeat-Update2.png)
95 ![Repeat-Update-Done](./figures/Repeat-Update-Done.png)
103 - When **totalCount** is greater than **arr.length**, Repeat renders **totalCount** list items, and…
111 **cachedCount** indicates the maximum number of subnodes that can be cached in the **Repeat** cache…
113 …ount()** of the scrolling container component and **cachedCount()** of **Repeat**. Both are used t…
115 …st** or **Grid** render these nodes to achieve better performance. But **Repeat** treats these nod…
116 - **cachedCount()** of **Repeat** indicates the nodes that are treated as invisible by **Repeat**. …
118 …number of nodes that may appear on the screen of the current template, **Repeat** can be reused as…
145 Repeat<string>(this.simpleList)
178 …tems 1 and 2 are exchanged, if the key is as the same as the last one, **Repeat** reuses the previ…
199 Repeat<string>(this.simpleList)
228 ![Repeat-Non-Initial-Render-Case-Exchange-Effect](./figures/Repeat-Non-Initial-Render-Case-Exchange…
232 This section describes the actual application scenarios of **Repeat** and the reuse of component no…
236 …ypical data source operations in the **virtualScroll** scenario of the **Repeat** component, inclu…
330 Repeat<Repeat005Clazz>(this.simpleList)
366 ![Repeat-VirtualScroll-Demo](./figures/Repeat-VirtualScroll-Demo.gif)
462 Repeat<Repeat006Clazz>(this.simpleList)
508 ![Repeat-VirtualScroll-2T-Demo](./figures/Repeat-VirtualScroll-2T-Demo.gif)
510 ### Using Repeat in a Nesting Manner
515 // Repeat can be nested in other components.
531 Text('Using Repeat virtualScroll in a Nesting Manner')
535 Repeat<string>(this.outerList)
542 Repeat<number>(this.innerList)
574 ![Repeat-Nest](./figures/Repeat-Nest.png)
580 Use **virtualScroll** of **Repeat** in the **List** container component. The following is an exampl…
618 Text('List Contains the Repeat Component')
623 Repeat<DemoListItemInfo>(this.videoList)
679 ![Repeat-Demo-List](./figures/Repeat-Demo-List.gif)
683 Use **virtualScroll** of **Repeat** in the **Grid** container component. The following is an exampl…
719 Text('Grid Contains the Repeat Component')
725 Repeat<DemoGridItemInfo>(this.itemList)
807 ![Repeat-Demo-Grid](./figures/Repeat-Demo-Grid.gif)
811 Use **virtualScroll** of **Repeat** in the **Swiper** container component. The following is an exam…
852 Text('Swiper Contains the Repeat Component')
861 Repeat(this.pics)
890 ![Repeat-Demo-Swiper](./figures/Repeat-Demo-Swiper.gif)
896 Declare the **Repeat** component in the **List** component to implement the **key** generation logi…
923 Repeat(this.arrayHolder.arr)
957 ![Repeat-case1-Error](./figures/Repeat-Case1-Error.gif)
979 Repeat(this.arrayHolder.arr)
1020 ![Repeat-case1-Succ](./figures/Repeat-Case1-Succ.gif)
1024 … is large, the lazy loading is used to load some data first. To enable **Repeat** to display the c…
1065 Repeat(this.vehicleItems)
1116 ![Repeat-Case2-Succ](./figures/Repeat-Case2-Succ.gif)
1118 ### Constraints on the Mixed Use of Repeat and @Builder
1120 When **Repeat** and @Builder are used together, parameters of the **RepeatItem** type must be passe…
1140 …Text('Use Repeat and @Builder together: The abnormal display is on the left, and the normal displa…
1146 Repeat<number>(this.simpleList1)
1167 Repeat<number>(this.simpleList2)
1213 ![Repeat-Builder](./figures/Repeat-Builder.png)