ReactJS - Fragmente

Hallo da, ambitionierte Entwickler! Heute tauchen wir in eine der nützlichen Funktionen von React ein: Fragmente. Als Ihr freundlicher Nachbarschaftsinformatiklehrer freue ich mich darauf, Sie durch dieses Thema zu führen. Bis zum Ende dieser Lektion werden Sie Fragmente wie ein Profi einsetzen können! Also, lasst uns loslegen.

Was sind Fragmente?

Stellen Sie sich vor, Sie packen für eine Reise und möchten alle Ihre Essentials zusammenhalten, ohne einen klobigen Koffer zu verwenden. Genau das machen Fragmente in React! Sie erlauben es uns, mehrere Elemente zusammenzufassen, ohne eine zusätzliche DOM-Node hinzuzufügen.

In React kann ein Komponente nur ein einzelnes Element zurückgeben. Dies führte oft dazu, dass Entwickler mehrere Elemente in einer unnötigen <div> einwickelten. Fragmente lösen dieses Problem elegant.

Schauen wir uns ein einfaches Beispiel an:

import React from 'react';

function WithoutFragment() {
return (
<div>
<h1>Hello</h1>
<p>World</p>
</div>
);
}

function WithFragment() {
return (
<React.Fragment>
<h1>Hello</h1>
<p>World</p>
</React.Fragment>
);
}

In der WithoutFragment-Komponente sind wir gezwungen, eine <div> zu verwenden, um unsere Elemente zu umwickeln. Aber in WithFragment verwenden wir React.Fragment, um unsere Elemente zusammenzufassen, ohne eine zusätzliche DOM-Node hinzuzufügen.

Kurznotation

Das Tippen von React.Fragment jedes Mal kann etwas mühsam sein. Es ist wie das Schreiben Ihres vollen Namens auf jeder Seite einer Prüfung! Glücklicherweise bietet React eine kürzere Notation:

function ShortSyntax() {
return (
<>
<h1>Hello</h1>
<p>World</p>
</>
);
}

Die leeren Tags <> und </> sind eine Abkürzung für <React.Fragment> und </React.Fragment>. Es ist wie die Verwendung eines Spitznamens anstelle Ihres vollen Namens - kürzer und süßer!

Warum Fragmente verwenden?

Vielleicht fragen Sie sich, "Warum sich mit Fragmenten beschäftigen? Was ist falsch daran, divs zu verwenden?" Great question! Lassen Sie mich das mit einem Beispiel erklären:

function TableExample() {
return (
<table>
<tr>
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
</tr>
</table>
);
}

In diesem Beispiel wäre unsere HTML ungültig, wenn wir anstelle eines Fragments eine <div> verwenden würden, da <div> nicht als Kind von <tr> erlaubt ist. Fragmente erlauben uns, diese <td>-Elemente zusammenzufassen, ohne die Tabellenstruktur zu brechen.

Fragmente mit Keys

Nun, lassen Sie uns aufstocken! Manchmal müssen Sie Ihrem Fragment einen Key hinzufügen, insbesondere beim Rendern von Listen. Hier ist, wie Sie das tun können:

function Glossary(props) {
return (
<dl>
{props.items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}

In diesem Beispiel verwenden wir React.Fragment mit einer key-Eigenschaft. Dies ist nützlich, wenn Sie über ein Array abtasten und jedem resultierenden Fragment einen Key zuweisen müssen.

Beachten Sie, dass Sie die Kurznotation <> nicht verwenden können, wenn Sie einen Key übergeben müssen. Es ist wie versucht, einen Spitznamen auf Ihrem Pass zu verwenden - es funktioniert einfach nicht!

Wann Fragmente verwenden?

Hier ist eine praktische Tabelle, um Ihnen zu helfen, zu entscheiden, wann Sie Fragmente verwenden sollen:

Szenario	Fragment verwenden?	Erklärung
Gruppieren von Elementen ohne zusätzliche DOM-Knoten hinzuzufügen	Ja	Fragmente erstellen keine zusätzlichen DOM-Elemente
Rückgabe mehrerer Elemente aus einer Komponente	Ja	Komponenten müssen ein einzelnes Element zurückgeben, und Fragmente erlauben dies ohne zusätzliche Einbettung
Abtasten eines Arrays und Rückgabe mehrerer Elemente für jedes Element	Ja	Verwenden Sie in diesem Fall gekennzeichnete Fragmente
Styles oder Ereignis-Handler zu einem Wrapper hinzufügen	Nein	Verwenden Sie eine <div> oder ein anderes geeigneten Element stattdessen

Fazit

Und das war's, Leute! Wir haben die Welt der React-Fragmente durchquert. Von der Verständnis der grundlegenden Verwendung bis hin zu gekennzeichneten Fragmenten sind Sie jetzt darauf vorbereitet, diese leistungsstarke Funktion in Ihren React-Anwendungen zu verwenden.

Erinnern Sie sich daran, dass Fragmente wie der unsichtbare Kleber sind, der Ihre Komponenten zusammenhält. Sie halten Ihren DOM sauber und Ihren Code semantisch. Wenn Sie sich das nächste Mal auf eine unnötige <div> stürzen, denken Sie an das Fragment!

Üben Sie die Verwendung von Fragmenten in Ihren React-Projekten, und Sie werden很快 sehen, wie sie Ihren Code sauberer und effizienter machen. Frohes Coden und möge das Fragment mit Ihnen sein!

Credits: Image by storyset