Render-Kinder Reagieren Mit Fragment-oder Array-Komponenten

0
19

Woran denken Sie, wenn Sie Reagieren 16 kommt? Kontext? Fehler-Grenze? Diese sind auf den Punkt. Reagieren 16 kam mit den leckereien und vieles mehr, aber In diesem post, wir Blick auf das rendering macht es auch eingeführt — nämlich die Fähigkeit zu Rendern Kinder mit Fragmenten und Array-Komponenten.

Diese sind neu und wirklich spannende Konzepte, die kam aus dem Reagieren 16 freigeben, so betrachten wir Sie näher, um Sie kennenzulernen.

Fragmente

Es verwendet zu werden, Reagieren die Komponenten könnten nur ein einzelnes element zurückgeben. Wenn Sie jemals versucht, um wieder mehr als ein element, Sie wissen, dass Sie begrüßt werden mit diesem error: Syntax error: neben der JSX-Elemente müssen gewickelt werden, die in einem umschließenden tag. Der Weg aus, ist die Anwendung einer wrapper-div oder span-element, das wirkt wie die umschließenden tag.

Also anstatt dies zu tun:

Klasse Länder erstreckt Reagieren.Komponente {
render() {
return (
<li>Kanada</li>
<li>Australien</li>
<li>Norwegen</li>
<li>Mexico</li>
)
}
}

…müssen Sie entweder ein ol-oder ul-tag als ein wrapper auf diese Listenelemente:

Klasse Länder erstreckt Reagieren.Komponente {
render() {
return (
<ul>
<li>Kanada</li>
<li>Australien</li>
<li>Norwegen</li>
<li>Mexico</li>
</ul>
)
}
}

Die meisten Zeiten, kann dies nicht dem ursprünglichen Entwurf hatten Sie für die Anwendung, aber Sie sind Links mit keine andere Wahl, als Kompromisse, die auf diesem Boden.

Reagieren 16 löst diese mit Fragmenten. Diese neuen Funktionen können Sie wickeln Sie eine Liste von Kindern, die ohne hinzufügen einer zusätzlichen Knoten. Also anstatt das hinzufügen einer zusätzlichen element als wrapper, wie wir es in dem letzten Beispiel können wir werfen <Reagieren.Fragment – > dort den job tun:

Klasse Länder erstreckt Reagieren.Komponente {
render() {
return (
<Reagieren.Fragment>
<li>Kanada</li>
<li>Australien</li>
<li>Norwegen</li>
<li>Mexico</li>
</Reagieren.Fragment>
)
}
}

Sie mögen denken, dass macht nicht viel Unterschied. Aber, stellen Sie sich eine situation, wo Sie haben eine Komponente, listet die verschiedenen Elemente wie Früchte und andere Dinge. Diese Elemente sind alle Komponenten, und wenn Sie die Nutzung von alten Versionen Reagieren, Positionen in den einzelnen Komponenten verpackt sein, die in einem umschließenden tag. Jetzt, jedoch, können Sie Gebrauch machen von Fragmenten und tun, Weg mit unnötigem markup.

Hier ist ein Beispiel, was ich meine:

Klasse Artikel erweitert Reagieren.Komponente {
render() {
return (
<Reagieren.Fragment>
<Obst />
<Getränke>
<Getränke />
</Reagieren.Fragment>
)
}
}

Wir haben drei untergeordneten Komponenten im inneren des fragments und können nun eine Komponente für den container, wickelt es. Dies ist viel mehr in Linie mit dem erstellen von Komponenten aus allem und in der Lage sein, um code zu kompilieren mit weniger Reste.

Fragment Kürzel

Es ist ein shorthand-syntax bei der Arbeit mit Fragmenten, die Sie verwenden können. Getreu seinem fragment die Natur, die syntax ist wie ein Stück sich selbst, so dass nur leere Klammern hinter.

Gehen wir zurück zu unserem letzten Beispiel:

Klasse Frucht erstreckt Reagieren.Komponente {
render() {
return (
<>
<li>Apple</li>
<li>Orange</li>
<li>Heidelbeere</li>
<li>Kirsche</li>
</>
)
}
}
Frage: Ist ein fragment besser als ein div-container?

Suchen Sie vielleicht nach einem guten Grund für die Verwendung von Fragmenten statt der div-container immer mit. Dan Abramov beantwortet die Frage auf StackOverflow. Um zusammenzufassen:

  1. Es ist ein kleines bisschen schneller und hat weniger memory-Nutzung (keine Notwendigkeit, erstellen Sie eine zusätzliche DOM-Knoten). Dies hat nur dann einen wirklichen Vorteil, auf sehr große und/oder Tiefe der Bäume, aber die Anwendungsleistung leidet oft an Tod durch tausend Schnitte. Dies ist eine weniger geschnitten.
  2. Einige CSS-Mechanismen wie flexbox und die raster haben eine spezielle Eltern-Kind-Beziehung, und das hinzufügen von divs in der Mitte macht es schwieriger zu pflegen, das design, während das extrahieren von logischen Komponenten.
  3. Der DOM inspector ist weniger überladen.

Schlüssel in Fragmenten

Beim zuordnen einer Liste von Elementen, die Sie noch brauchen, um machen verwenden der Tasten der gleichen Weise wie zuvor. Zum Beispiel, sagen wir, wir möchten, übergeben Sie eine Liste der Elemente, die als Requisiten von einer übergeordneten Komponente eine untergeordnete Komponente. In der untergeordneten Komponente, wir wollen die Karte über die Liste der Artikel, die wir haben-und Ausgang jedes Element als eine separate Einheit. Das sieht dann so aus:

const preload = {
“Daten” : [
{
“name”: “Reactjs”,
“url”: “https://reactjs.org”,
“Beschreibung”: “Eine JavaScript-Bibliothek für die Erstellung von Benutzeroberflächen”,
},
{
“name”: “Vuejs”,
“url”: “https://vuejs.org”,
“Beschreibung”: “Die Fortschreitende JavaScript-Framework”,
},
{
“name”: “Emberjs”,
“url”: “https://www.emberjs.com”,
“Beschreibung”: “Ember.js ist ein open-source-JavaScript-web-framework, basierend auf dem Model–view–viewmodel-Muster”
}
]
}

const Frameworks = (Requisiten) => {
return (
<Reagieren.Fragment>
{props.Elemente.Daten.Karte(item => (
<Reagieren.Fragment key={Element.id}>
<h2>{Element.name}</h2>
<p>{Element.- url}</p>
<p>{Element.Beschreibung}</p>
</Reagieren.Fragment>
))}
</Reagieren.Fragment>
)
}

const App = () => {
return (
<Frameworks items={preload} />
)
}

Finden Sie den Stift Reagieren Fragment Stift von Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Sie können sehen, dass jetzt, in diesem Fall sind wir nicht die Nutzung von divs, die sich im Frameworks-Komponente. Das ist der entscheidende Unterschied!

Rendern Sie die Kinder Mit ein Array von Komponenten

Die zweite Sache, die kam aus Reagieren 16 wir betrachten wollen, ist die Fähigkeit zu Rendern, die mehrere Kinder mit einer Reihe von Komponenten. Dies ist eine klare Zeitersparnis, denn es ermöglicht uns zu Stopfen wie viele ins Rendern, anstatt Sie one-by-one.

Hier ist ein Beispiel:

class Frameworks erweitert Reagieren.Komponente {
render () {
return (
[
<p>JavaScript:</p>
<li>Reagieren</li>
<li>Vuejs</li>
<li>Eckig</li>
]
)
}
}

Sie können auch das gleiche tun mit eine zustandslose funktionale Komponente:

const Frontend = () => {
return [
<h3>Front-End:</h3>,
<li>Reactjs</li>
<li>Vuejs</li>
]
}

const Backend = () => {
return [
<h3>Back-End:</h3>,
<li>Express</li>
<li>Restify</li>
]
}

const App = () => {
return [
<h2>JavaScript-Tools</h2>,
<Frontend />,
<Backend />
]
}

Finden Sie den Stift Reagieren Fragment 2 Stift von Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Fazit

Wie die Kontext-API-und-Fehler-Grenze Funktion, die eingeführt wurden in Reagieren 16, Kinder rendering-Komponenten mit Fragment und ein Vielfaches von Ihnen mit Array-Komponenten sind zwei weitere tolle features können Sie Gebrauch machen von, wie Sie die Anwendung erstellen.

Haben Sie begonnen, mit diesen in einem Projekt? Lassen Sie mich wissen, wie Sie in den Kommentaren, so dass wir Notizen vergleichen. 🙂