Verwendung der 'key'-Prop in React-Listen

In React wird die 'key'-Prop primär zur eindeutigen Identifizierung jedes Elements in einer Liste verwendet. Sie spielt eine entscheidende Rolle bei der Optimierung der Leistung und Effizienz einer React Anwendung.

const items = ['Apple', 'Banana', 'Orange'];
const listItems = items.map((item, index) =>
  <li key={index}>
    {item}
  </li>
);

In diesem Beispiel wird jedem Element in der Liste ein eindeutiger 'key'-Wert zugewiesen. Der Schlüssel sollte über verschiedene Wiedergaben des Elements hinweg stabil sein.

Warum sind Keys wichtig?

React benötigt eine Möglichkeit, um einzelne Elemente in einer Liste zu identifizieren und zu verfolgen. Wenn sich der Zustand eines Elements ändert, muss React in der Lage sein, das spezifische Element zu lokalisieren und neu zu rendern, bei gleichzeitigem Erhalt der Zustandsdaten des Elements. Ohne einen eindeutigen Schlüsselwert müsste React theoretisch die gesamte Liste jedes Mal neu rendern, wenn sich ein Zustand ändert. Dies wäre natürlich ineffizient und könnte zur Verringerung der Leistung führen.

Es ist wichtig zu beachten, dass die Verwendung von Indizes als Schlüssel problematisch sein kann, insbesondere wenn die Elementreihenfolge in der Liste geändert werden kann. Der Index würde in solchen Fällen nicht übereinstimmen und daher nicht eindeutig sein. Stattdessen sollte in solchen Fällen eine eindeutige ID verwendet werden.

const todos = [
  {id: 1, task: 'Do laundry'},
  {id: 2, task: 'Buy groceries'}
];
const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.task}
  </li>
);

In diesem Beispiel wird die id eines Todo-Objekts als Schlüssel verwendet, was eine eindeutige Identifizierung unabhängig von der Reihenfolge in der Liste ermöglicht.

Die 'key'-Prop ist ein entscheidendes Werkzeug in React, um die Effizienz und Leistung Ihrer Anwendung zu maximieren. Achten Sie daher auf die geeignete und korrekte Verwendung in Ihren Listen.