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://react.dev.org.tw/learn/rendering-lists#keeping-list-items-in-order-with-key