版本: v8

React 性能

使用 Ionic 组件循环

当使用 Ionic 组件循环时，我们建议使用 React 的 key 属性。这允许 React 以高效的方式重新渲染循环元素，通过仅更新组件内部的内容，而不是完全重新创建组件。

通过使用 key，您可以为每个循环元素提供稳定的身份，以便 React 可以跟踪迭代器内的插入和删除。以下是如何使用 key 的示例。

MyComponent.tsx

import React, { useState } from 'react';
import { IonContent, IonItem, IonLabel, IonPage } from '@ionic/react';

export const MyComponent: React.FC = () => {
  const [items, setItems] = useState([{ id: 0, value: 'Item 0' }, { id: 1, value: 'Item 1' }, ...]);

  return (
    <IonPage>
      <IonContent>
        {items.map(item => {
          return (
            <IonItem key={item.id}>
              <IonLabel>{item.value}</IonLabel>
            </IonItem>
          )
        })}
      </IonContent>
    </IonPage>
  )
}

在此示例中，我们有一个名为 items 的对象数组。每个对象包含一个 value 和一个 id。使用 key 属性，我们为每个对象传递 item.id。这个 id 用于为每个循环元素提供稳定的身份。

有关 React 如何使用 key 渲染列表的更多信息，请参阅：https://reactjs.ac.cn/learn/rendering-lists#keeping-list-items-in-order-with-key

使用 Ionic 组件循环​

内容

使用 Ionic 组件循环