Warum sind Fragmente in Reaktion 16 besser als Container-Divs?

In React 16.2 wurde eine verbesserte Unterstützung für Fragmentshinzugefügt. Weitere Informationen finden Sie in Reacts Blogbeitrag hier.

Wir alle kennen den folgenden Code:

render() {
  return (
    // Extraneous div element :(
    <div>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </div>
  );
}

Ja, wir brauchen ein Container-Div, aber es ist keine so große Sache.

In React 16.2 können wir dies tun, um das umgebende Container-Div zu vermeiden:

render() {
  return (
    <Fragment>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </Fragment>
  );
}

In beiden Fällen benötigen wir noch ein Containerelement, das die inneren Elemente umgibt.

Meine Frage ist, warum ist eine Fragmentvorzuziehen? Hilft es bei der Leistung? Wenn ja warum? Würde gerne einen Einblick bekommen.

1. Es ist ein kleines bisschen schneller und hat weniger Speicherbedarf (es muss kein zusätzlicher DOM-Knoten erstellt werden). Dies hat nur bei sehr großen und / oder tiefen Bäumen einen echten Vorteil, aber die Anwendungsleistung leidet häufig unter dem Tod durch tausend Schnitte. Dies ist ein Schnitt weniger.
2. Einige CSS-Mechanismen wie Flexbox und CSS Grid haben eine spezielle Eltern-Kind-Beziehung, und das Hinzufügen von divs in der Mitte macht es schwierig, das gewünschte Layout beizubehalten, während logische Komponenten extrahiert werden.
3. Der DOM-Inspektor ist weniger überladen. :-)

Die Beschreibungen einiger anderer Anwendungsfälle finden Sie in diesem React-Problem: Fügen Sie eine Fragment-API hinzu, um die Rückgabe mehrerer Komponenten aus dem Rendering zu ermöglichen

Zu allen obigen Antworten gibt es noch einen weiteren Vorteil: Code-Lesbarkeit , FragmentKomponente unterstützt eine syntaktische Zuckerform , <>. Somit kann der Code in Ihrer Frage einfacher geschrieben werden als:

render() {
  return (
    <>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </>
  );
}

Laut docs ,

In React wird dies zu einem <React.Fragment/>Element, wie im Beispiel aus dem vorherigen Abschnitt. (Non-React-Frameworks, die JSX verwenden, werden möglicherweise zu etwas anderem kompiliert.)

Unordnungfrei, oder?

Beachten Sie, dass Sie weiterhin die <Fragment>Syntax verwenden müssen, wenn Sie keydas Fragment bereitstellen möchten.

• Zusätzliche Funktionen, die zuvor mit JSX nicht möglich waren
• Besseres semantisches JSX-Markup. Wrapper-Elemente werden bei Bedarf verwendet, nicht weil sie dazu gezwungen werden.
• Weniger Dom-Markup insgesamt (höhere Renderleistung und weniger Speicheraufwand)

So einfach wie wenn Sie kein Wrapper-Element benötigen, müssen Sie keines verwenden. Weniger Elemente zu haben ist großartig, aber ich denke, der größte Vorteil besteht darin, Elemente in jsx rendern zu können, die vorher nicht möglich waren, und Wrapper-Elementen eine bessere semantische Bedeutung zu verleihen, da sie jetzt optional sind.

Das war vorher nicht möglich:

 <select>
    {this.renderOptions()}
 </select>

Wenn Sie in Reaktion 15 auf Folgendes schauen, können Sie nicht feststellen, ob das Wrapper-Element benötigt wird oder nicht:

<span>
  <h1>Hello</h1>
  {this.getContent()}
</span>

Gemäß den Dokumenten von reactjs.org besteht die wichtigste Anforderung <Fragment> </Fragment>anstelle von div darin, zu vermeiden, dass die HTML-Semantik unterbrochen wird. Wenn wir divs anstelle von verwenden <Fragment> </Fragment>, brechen wir die HTML-Semantik.

Um mehr über die HTML-Semantik zu erfahren. Bitte klicken Sie und es gibt auch Fälle, in denen wenn Sie divs anstelle von Fragmenten verwenden, diese ungültig sind. Sehen Sie sich beispielsweise diesen Code an:

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

<table>
      <tr>
        <div>
          <td>Hello</td>
          <td>World</td>
        </div>
      </tr>
 </table>

Fragmente lösen dieses Problem.

1. Mit <React.Fragment>...</React.Fragment>können wir unseren JSX-Elementen ein übergeordnetes Tag hinzufügen, ohne dem DOM einen zusätzlichen Knoten hinzuzufügen.
2. Sie können die zusätzlichen div-Tags durch React.Fragment ersetzen
3. Das Schreiben von React.Fragment ist jedes Mal zu lang für Sie. React.Fragment verfügt über eine Kurzsyntax, die Sie verwenden können. Es ist<>...</>.