Was sind 'Fragments' in React?

Werkzeuge zur Speicherverwaltung

Komponenten, die mehrere Elemente zurückgeben können

Ein Muster für die Prop-Validierung

Teile des Zustands einer Komponente

Verständnis von 'Fragments' in React

In React sind 'Fragments' ein nützliches Feature, das es Entwicklern ermöglicht mehrere Elemente zurückgeben zu können aus einer Komponente. Sie lassen uns Gruppen von Kindern in einer Komponentenliste hinzufügen, ohne dass wir dafür zusätzliche Knoten zum DOM hinzufügen müssen.

Ohne Fragments, ist es üblich, dass wir zusätzliche

oder Tags einfügen müssen, um Gruppen von Elementen zu umfassen. Diese zusätzlichen Tags können jedoch den DOM überladen und die Anwendung verlangsamen.

Mit Fragments können wir dies vermeiden. Hier ist ein einfacher Codeausschnitt, der den Unterschied verdeutlicht:

// Ohne Fragments
render() {
  return (
    <div>
      <ChildA />
      <ChildB />
      <ChildC />
    </div>
  );
}

// Mit Fragments
render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

In beiden Fällen geben die Komponenten mehrere Elemente zurück. Aber im ersten Fall fügen wir eine zusätzliche

in den DOM ein, während wir im zweiten Fall mit Fragments dies umgehen können.

Da React 'Fragments' praktisch sind, empfehlen wir sie wann immer möglich zu verwenden, insbesondere wenn Sie mehrere Elemente aus einer Komponente zurückgeben müssen. Es ist eine einfache Methode, die Ihr Markup sauberer und Ihre Anwendung schneller macht.

Es ist wichtig zu beachten, dass 'Fragments' kein Ersatz für vollständige Elternkomponenten mit ihren eigenen Lebenszyklusmethoden sind. Sie dienen lediglich dazu, überflüssige HTML Elemente zu minimieren und gleichzeitig die Möglichkeit zu bieten, mehrere Kinderelemente zu gruppieren.

Verständnis von 'Fragments' in React

Related Questions