Skip to main content

React 性能

具有 Ionic 组件的环路​

¥Loops with Ionic Components

当将循环与 Ionic 组件一起使用时，我们建议使用 React 的 key 属性。这使得 React 能够通过仅更新组件内部的内容而不是完全重新创建组件来以有效的方式重新渲染循环元素。

¥When using loops with Ionic components, we recommend using React's key attribute. This allows React to re-render loop elements in an efficient way by only updating the content inside of the component rather than re-creating the component altogether.

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

¥By using key you can provide a stable identity for each loop element so React can track insertions and deletions within the iterator. Below is an example of how to use 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 用于为每个循环元素提供稳定的标识。

¥In this example, we have an array of objects called items. Each object contains a value and an id. Using the key attribute, we pass the item.id for each object. This id is used to provide a stable identity for each loop element.

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

¥For more information on how React renders lists using key see: https://react.nodejs.cn/learn/rendering-lists#keeping-list-items-in-order-with-key

目录