In React 16.2 wurde eine verbesserte Unterstützung für Fragments
hinzugefü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 Fragment
vorzuziehen? Hilft es bei der Leistung? Wenn ja warum? Würde gerne einen Einblick bekommen.
div
ist, dass Sie nicht immer ein Wrapper-Element möchten. Wrapper-Elemente haben eine Bedeutung, und normalerweise benötigen Sie zusätzliche Stile, damit diese Bedeutung entfernt wird.<Fragment>
ist nur syntaktischer Zucker, der nicht gerendert wird. Es gibt Situationen, in denen das Erstellen eines Wrappers sehr schwierig ist, z. B. in SVG, wo<div>
es nicht verwendet werden kann und<group>
nicht immer das ist, was Sie wollen.Antworten:
div
s in der Mitte macht es schwierig, das gewünschte Layout beizubehalten, während logische Komponenten extrahiert werden.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
quelle
<dt><dd>
viel einfacher. Die Rückgabe gepaarter Elemente war zuvor umständlichFragments
.import Fragment from 'react'
. Aber es ist in RN undefiniert.number 2
Tische waren für uns das größte Problem. Die benötigte Struktur vontable>tr>td
(möglicherweise mitthead
und ähnlich) sorgte für einen umständlichen React-Code.import {Fragment} from 'react'
? Es ist ein benannter Export.Zu allen obigen Antworten gibt es noch einen weiteren Vorteil: Code-Lesbarkeit ,
Fragment
Komponente unterstützt eine syntaktische Zuckerform ,<>
. Somit kann der Code in Ihrer Frage einfacher geschrieben werden als:Laut docs ,
Unordnungfrei, oder?
Beachten Sie, dass Sie weiterhin die
<Fragment>
Syntax verwenden müssen, wenn Siekey
das Fragment bereitstellen möchten.quelle
<Fragment>
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:
Wenn Sie in Reaktion 15 auf Folgendes schauen, können Sie nicht feststellen, ob das Wrapper-Element benötigt wird oder nicht:
quelle
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:
Fragmente lösen dieses Problem.
quelle
<React.Fragment>...</React.Fragment>
können wir unseren JSX-Elementen ein übergeordnetes Tag hinzufügen, ohne dem DOM einen zusätzlichen Knoten hinzuzufügen.<>...</>.
quelle