Einführung und detaillierte Verwendung von React Fragment

Vorwort

Beim stapelweisen Hinzufügen von Elementen zum DOM-Baum empfiehlt es sich, ein document.createDocumentFragment zu erstellen, um die Elemente zuerst stapelweise zum DOM-Baum hinzuzufügen.
DocumentFragment, und fügen Sie dann DocumentFragment zum DOM-Baum hinzu, wodurch die Anzahl der DOM-Operationen reduziert wird und kein neues Element erstellt wird.

Ähnlich wie DocumentFragment verfügt auch React über das Konzept von Fragment, das ähnliche Verwendungszwecke hat. Vor React 16 wurde Fragment über das Erweiterungspaket react-addons-create-fragment erstellt, während in React 16 „Fragment“ direkt über <React.Fragment></React.Fragment> erstellt wird.

Motivation für Fragmente

Ein gängiges Muster besteht darin, dass eine Komponente eine Liste untergeordneter Elemente zurückgibt. Nehmen Sie diesen React-Codeausschnitt als Beispiel:

Klasse Table erweitert React.Component {
  rendern() {
    zurückkehren (
      <Tabelle>
        <tr>
          <Spalten />
        </tr>
      </Tabelle>
    );
  }
}

<Columns /> muss mehrere Elemente zurückgeben, damit das gerenderte HTML gültig ist. Wenn das übergeordnete Div im Render() von <Columns /> verwendet wird, ist das generierte HTML ungültig.

Klasse Columns erweitert React.Component {
  rendern() {
    zurückkehren (
      <div>
        <td>Hallo</td>
        <td>Welt</td>
      </div>
    );
  }
}

Erhalten Sie eine < Table />-Ausgabe:

<Tabelle>
  <tr>
    <div>
      <td>Hallo</td>
      <td>Welt</td>
    </div>
  </tr>
</Tabelle>

Um dieses Problem zu lösen, entstanden Fragmente.

Einführung und Verwendung von React-Fragmenten

Die Komponente React.Fragment ermöglicht die Rückgabe mehrerer Elemente von der Methode render(), ohne dass zusätzliche DOM-Elemente erstellt werden müssen. Ein gängiges Muster besteht darin, dass eine Komponente mehrere Elemente zurückgibt. Mit Fragmenten können Sie Unterlisten gruppieren, ohne dem DOM zusätzliche Knoten hinzuzufügen.

Zum Verständnis: Wenn wir eine Komponente definieren, möchte das äußerste, in die Rückgabe eingeschlossene Div häufig nicht auf der Seite gerendert werden. Daher müssen wir unsere Fragmentkomponente verwenden. Genau wie Vues <template ></ template >.

rendern() {
  zurückkehren (
    <Reagieren.Fragment>
      Etwas Text.
      <h2>Eine Überschrift</h2>
    </React.Fragment>
  );
}

Sie können auch die Kurzsyntax <></> verwenden.

rendern() {
  zurückkehren (
    <>
      Etwas Text.
      <h2>Eine Überschrift</h2>
    </>
  );
}

Darüber hinaus unterstützt Render ab React 16 die Rückgabe von Arrays, und viele Leute kennen diese Funktion. Mit dieser Funktion lässt sich bereits eine unnötige Knotenverschachtelung reduzieren.

importiere React von „react“;

Standardfunktion exportieren () {
    zurückkehren [
        <div>1</div>,
        <div>2</div>,
        <div>3</div>
    ];
}

Unterschied zwischen <React.Fragment> und <>

Die Syntax <></> kann keine Schlüssel oder Attribute akzeptieren, während <React.Fragment> dies kann.

Mit der expliziten <React.Fragment>-Syntax deklarierte Fragmente können Schlüssel haben. Ein Anwendungsfall ist das Zuordnen einer Sammlung zu einem Array von Fragmenten, beispielsweise das Erstellen einer Liste mit Beschreibungen:

Funktionsglossar (Eigenschaften) {
  zurückkehren (
    <dl>
      {props.items.map(item => (
        // Ohne „key“ gibt React eine Schlüsselwarnung aus <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{Artikelbeschreibung}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

Der Schlüssel ist das einzige Attribut, das an ein Fragment übergeben werden kann. Die Unterstützung für andere Eigenschaften, z. B. Ereignisse, wird möglicherweise in der Zukunft hinzugefügt.

Hinweis: Die Kurzform <></> wird derzeit von einigen Front-End-Tools nicht gut unterstützt und mit create-react-app erstellte Projekte werden möglicherweise nicht kompiliert. Es ist also normal, auf diese Situation zu stoßen.

Dies ist das Ende dieses Artikels über die Einführung und detaillierte Verwendung von React Fragment. Weitere relevante Inhalte zu React Fragment finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!