Kinder in React mit Fragmenten oder Array-Komponenten rendern

Was fällt Ihnen ein, wenn React 16 aufkommt? Context? Error Boundary? Das ist richtig. React 16 kam mit diesen Goodies und vielem mehr, aber in diesem Beitrag werden wir die Rendering-Fähigkeiten untersuchen, die es ebenfalls eingeführt hat – nämlich die Möglichkeit, Kinder mithilfe von Fragmenten und Array-Komponenten zu rendern.

Dies sind neue und wirklich aufregende Konzepte, die aus der React 16-Veröffentlichung hervorgegangen sind, also schauen wir sie uns genauer an und lernen sie kennen.

Fragmente

Früher konnten React-Komponenten nur ein einziges Element zurückgeben. Wenn Sie jemals versucht haben, mehr als ein Element zurückzugeben, wissen Sie, dass Sie mit dieser Fehlermeldung begrüßt werden: Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag. Der Ausweg besteht darin, ein umgebendes div- oder span-Element zu verwenden, das als umschließendes Tag fungiert.

Anstatt also dies zu tun

class Countries extends React.Component {
  render() {
    return (
      <li>Canada</li>
      <li>Australia</li>
      <li>Norway</li>
      <li>Mexico</li>
    )
  }
}

…müssen Sie entweder ein ol- oder ul-Tag als Wrapper für diese Listenelemente hinzufügen

class Countries extends React.Component {
  render() {
    return (
      <ul>
        <li>Canada</li>
        <li>Australia</li>
        <li>Norway</li>
        <li>Mexico</li>
      </ul>
    )
  }
}

Meistens ist dies möglicherweise nicht das ursprüngliche Design, das Sie für die Anwendung hatten, aber Sie haben keine andere Wahl, als auf diesem Gebiet Kompromisse einzugehen.

React 16 löst dies mit **Fragmenten**. Diese neue Funktion ermöglicht es Ihnen, eine Liste von Kindern zu umschließen, ohne einen zusätzlichen Knoten hinzuzufügen. Anstatt also, wie im letzten Beispiel, ein zusätzliches Element als Wrapper hinzuzufügen, können wir <React.Fragment> hineinwerfen, um die Aufgabe zu erledigen.

class Countries extends React.Component {
  render() {
    return (
      <React.Fragment>
        <li>Canada</li>
        <li>Australia</li>
        <li>Norway</li>
        <li>Mexico</li>
      </React.Fragment>
    )
  }
}

Sie denken vielleicht, dass das keinen großen Unterschied macht. Aber stellen Sie sich eine Situation vor, in der Sie eine Komponente haben, die verschiedene Elemente wie Obst und andere Dinge auflistet. Diese Elemente sind alle Komponenten, und wenn Sie ältere React-Versionen verwenden, müssen die Elemente in diesen einzelnen Komponenten in einem umschließenden Tag verpackt werden. Jetzt können Sie jedoch Fragmente verwenden und diesen unnötigen Markup entfernen.

Hier ist ein Beispiel dafür, was ich meine

class Items extends React.Component {
  render() {
    return (
      <React.Fragment>
        <Fruit />
        <Beverages />
        <Drinks />
      </React.Fragment>
    )
  }
}

Wir haben drei Kindkomponenten innerhalb des Fragments und können nun eine Komponente für den Container erstellen, der es umschließt. Dies ist viel eher im Einklang mit der Fähigkeit, aus allem Komponenten zu erstellen und Code mit weniger Ballast zu kompilieren.

Fragment-Kurzform

Bei der Arbeit mit Fragmenten gibt es eine Kurzform, die Sie verwenden können. Getreu seiner Fragmentnatur ähnelt die Syntax selbst einem Fragment und hinterlässt nur leere Klammern.

Gehen wir zurück zu unserem letzten Beispiel

class Fruit extends React.Component {
  render() {
    return (
      <>
        <li>Apple</li>
        <li>Orange</li>
        <li>Blueberry</li>
        <li>Cherry</li>
      </>
    )
  }
}

Frage: Ist ein Fragment besser als ein Container-Div?

Sie suchen vielleicht nach einem guten Grund, Fragmente anstelle des Container-Divs zu verwenden, das Sie immer benutzt haben. Dan Abramov hat die Frage auf StackOverflow beantwortet. Zusammenfassend lässt sich sagen:

1. Es ist ein winziges bisschen schneller und hat weniger Speicherverbrauch (keine Notwendigkeit, einen zusätzlichen DOM-Knoten zu erstellen). Dies hat nur einen echten Vorteil bei sehr großen und/oder tiefen Bäumen, aber die Anwendungsleistung leidet oft unter dem Tod durch tausend Schnitte. Dies ist ein Schnitt weniger.
2. Einige CSS-Mechanismen wie Flexbox und Grid haben eine spezielle Eltern-Kind-Beziehung, und das Hinzufügen von Divs dazwischen erschwert die Wartung des Designs bei der Extraktion logischer Komponenten.
3. Der DOM-Inspektor ist übersichtlicher.

Schlüssel in Fragmenten

Beim Abbilden einer Liste von Elementen müssen Sie weiterhin Schlüssel verwenden, wie zuvor. Nehmen wir zum Beispiel an, wir möchten eine Liste von Elementen als Props von einer Elternkomponente an eine Kindkomponente übergeben. In der Kindkomponente möchten wir die Liste der Elemente durchgehen, die wir haben, und jedes Element als separate Entität ausgeben. So sieht das aus

const preload = {
  "data" : [
    {
      "name": "Reactjs",
      "url": "https://reactjs.org",
      "description": "A JavaScript library for building user interfaces",
    },
    {
      "name": "Vuejs",
      "url": "https://vuejs.org",
      "description": "The Progressive JavaScript Framework",
    },
    {
      "name": "Emberjs",
      "url": "https://www.emberjs.com",
      "description": "Ember.js is an open-source JavaScript web framework, based on the Model–view–viewmodel pattern"
    }
  ]
}

const Frameworks = (props) => {
  return (
    <React.Fragment>
      {props.items.data.map(item => (
        <React.Fragment key={item.id}>
          <h2>{item.name}</h2>
          <p>{item.url}</p>
          <p>{item.description}</p>
        </React.Fragment>
      ))}
    </React.Fragment>
  )
}

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

Siehe den Stift React Fragment Pen von Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Sie können sehen, dass wir hier im `Frameworks`-Komponenten keine Divs verwenden. Das ist der entscheidende Unterschied!

Kinder mit einem Array von Komponenten rendern

Das zweite spezifische Ding, das aus React 16 hervorgegangen ist und das wir uns ansehen wollen, ist die Fähigkeit, mehrere Kinder mithilfe eines Arrays von Komponenten zu rendern. Dies ist eine klare Zeitersparnis, da es uns ermöglicht, so viele wie möglich in ein Render zu packen, anstatt sie einzeln tun zu müssen.

Hier ist ein Beispiel

class Frameworks extends React.Component {
  render () {
    return (
      [
        <p>JavaScript:</p>
        <li>React</li>,
        <li>Vuejs</li>,
        <li>Angular</li>
      ]
    )
  }
}

Sie können das Gleiche auch mit einer zustandslosen Funktionskomponente tun

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 />
  ]
}

Siehe den Stift React Fragment 2 Pen von Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Fazit

Wie die im React 16 eingeführte Context API und die Error Boundary sind das Rendern von Kindkomponenten mit Fragmenten und mehreren davon mit Array-Komponenten zwei weitere großartige Funktionen, die Sie beim Erstellen Ihrer Anwendung nutzen können.

Haben Sie begonnen, diese in einem Projekt zu verwenden? Lassen Sie mich in den Kommentaren wissen, wie, damit wir uns austauschen können. 🙂