React-Listen & Keys

Wir könnenJavaScripts map()-Methodeverwenden, um Listen zu erstellen.

---

Wir können das obige Beispiel in eine Komponente umgestalten. Die Komponente erhält einen Array-Parameter, und jedem Listenelement wird ein Schlüssel zugewiesen, andernfalls erscheint eine Warnungfür Listenelemente sollte ein Schlüssel angegeben werden, was bedeutet, dass ein Schlüssel enthalten sein muss:

---

Keys

Keys können React dabei helfen zu erkennen, welche Elemente sich geändert haben, wenn bestimmte Elemente im DOM hinzugefügt oder entfernt werden. Daher sollte jedem Element im Array eine stabile Kennung gegeben werden.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

Der Key eines Elements sollte idealerweise eine eindeutige Zeichenkette sein, die das Element in der Liste hat. Normalerweise verwenden wir die id aus den Daten als Key für das Element:

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

Wenn das Element keine stabile id hat, kann man seinen Index in der Sequenz als Key verwenden:

const todoItems = todos.map((todo, index) =>
  // 只有在没有确定的 id 时使用
  <li key={index}>
    {todo.text}
  </li>
);

Wenn die Liste umsortiert werden kann, empfehlen wir nicht, den Index als Key zu verwenden, da dies dazu führen kann, dass das Rendering sehr langsam wird.

---

Komponenten mit Keys extrahieren

Der Key eines Elements ist nur im Vergleich zu seinen Geschwisterknoten aussagekräftig.

Wenn beispielsweise eine ListItem-Komponente extrahiert wird, sollte der Key an diesem<ListItem />Element belassen werden und nicht am <li>Element innerhalb der ListItem-Komponente.

Falsches Beispiel

function ListItem(props) {
  const value = props.value;
  return (
    // 错啦！你不需要在这里指定key:
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    //错啦！元素的key应该在这里指定：
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <NumberList numbers={numbers} />
);

Die korrekte Verwendung von Keys

Wenn du Elemente innerhalb der map()-Methode aufrufst, solltest du immer daran denken, jedem Element einen eindeutigen Key hinzuzufügen.

---

Der Key eines Elements sollte unter seinen Geschwisterelementen eindeutig sein.

Die in Array-Elementen verwendeten Keys sollten unter ihren Geschwisterelementen eindeutig sein. Sie müssen jedoch nicht global eindeutig sein. Wenn wir zwei verschiedene Arrays erzeugen, können wir dieselben Keys verwenden.

Der key dient als Hinweis für React, aber er wird nicht an deine Komponenten weitergegeben. Wenn deine Komponente denselben Wert wie der key benötigt, übergebe ihn als prop:

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

Im obigen Beispiel kann die Post-Komponente props.id lesen, aber nicht props.key.

---

Einbetten von map() in JSX

Im obigen Beispiel haben wir eine separate Variable listItems deklariert und sie in JSX eingefügt:

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />

  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

JSX ermöglicht das Einbetten beliebiger Ausdrücke in geschweiften Klammern, daher können wir es in map() so verwenden:

Dies kann manchmal Ihren Code klarer machen, aber manchmal kann dieser Stil auch übermäßig verwendet werden. Genau wie in JavaScript bleibt es Ihnen überlassen, zu entscheiden, wann Sie eine Variable zur Lesbarkeit extrahieren. Aber denken Sie daran: Wenn ein map() zu viele Ebenen tief verschachtelt ist, können Sie eine Komponente extrahieren.

Weitere Erweiterungen