Gebäude-Skelett-Komponenten mit Reagieren

0
21

Einer der Vorteile der Aufbau einer Single Page Application (SPA) ist die Art und Weise der Navigation zwischen den Seiten ist sehr schnell. Leider, die Daten unserer Komponenten ist manchmal nur verfügbar, nach dem wir navigiert zu einem bestimmten Teil unserer Anwendung. Wir können aufsteigen, die vom Benutzer wahrgenommene Leistung durch das brechen der Komponente in zwei Teile: der container (die zeigt ein Skelett, Ansicht -, wenn es leer ist) und die Inhalte. Wenn wir verzögern die Darstellung der content-Komponente, bis wir tatsächlich erhalten haben die erforderlichen Inhalte, die wir dann nutzen können, der Skelett-Ansicht des Containers so dass die wahrgenommene Ladezeit!

Fangen wir bei der Erstellung unserer Komponenten.

Was wir machen

Wir nutzen die Skelett-Komponente, die erstellt wurde in dem Artikel “Building Skeleton-Bildschirme mit CSS Custom Properties.”

Dies ist ein großer Artikel, der aufzeigt, wie Sie erstellen können ein Skelett-Komponente und die Nutzung der :leeren selector ermöglicht es uns, clever nutzen {dies.Requisiten.Kinder}, die im inneren unserer Komponenten, so dass das Skelett-Karte gerendert wird, wenn der Inhalt nicht verfügbar ist.

Finden Sie den Stift Reagieren 16 — Skelett-Karte – Finale von Mathias Rechtzigel (@MathiasaurusRex) auf CodePen.

Die Erstellung unserer Komponenten

Wir erstellen ein paar Komponenten, um Hilfe zu Holen uns begonnen.

  1. Die außen container (CardContainer)
  2. Der innere Inhalt (CardContent)

Zuerst erstellen wir unser CardContainer. Diese container-Komponente wird die Nutzung der :leer pseudo-Selektor so machen wird es das Skelett Sicht, wenn diese Komponente nicht ein Kind empfangen.

Klasse CardContainer erstreckt Reagieren.Komponente {
render() {
return (
<div className=”Karte”>
{dies.Requisiten.Kinder}
</div>
);
}
}

Als Nächstes erstellen wir unser CardContent Komponente, die geschachtelte innerhalb unserer CardContainer Komponente.

Klasse CardContent erstreckt Reagieren.Komponente {
render() {
return (
<div className=”Karte–content”>
<div className=”card-content-top”>
<div className=”card-avatar”>
<img
className=”card-avatar-Bild”
src={das.Requisiten.avatarImage}
alt=”” />
<span>{dies.Requisiten.avatarName}</span>
</div>
</div>
<div className=”card-Inhalt–bottom”>
<div className=”Karte-kopieren”>
<h1 className=”card-Kopie–title”>{dies.Requisiten.cardTitle}</h1>
<p className=”card-Kopie–description”>{dies.Requisiten.cardDescription}</p>
</div>
<div className=”Karte–info”>
<span className=”card-icon”>
<span className=”sr-only”> > Total views: </span>
{dies.Requisiten.countViews}
</span>
<span className=”card-icon”>
<span className=”sr-only”> > Total Kommentare: </span>
{dies.Requisiten.countComments}
</span>
</div>
</div>
</div>
);
}
}

Wie Sie sehen können, gibt es ein paar Räume für die Eigenschaften, die akzeptiert werden können, wie ein avatar-Bild und den Namen und den Inhalt der card sichtbar ist.

Setzen Sie die Komponenten zusammen ermöglicht es uns, erstellen Sie ein vollständige Karte-Komponente.

<CardContainer>
<CardContent
avatarImage=’path/to/avatar.jpg’
avatarName=’Vorname Nachname’
cardTitle=’Titel der Karte’
cardDescription=’Beschreibung der Karte”
countComments=’XX’
countViews=’XX’
/>
</CardContainer>

Finden Sie den Stift Reagieren 16 — Skelett-Karte – Karte-Inhalte Kein Staat von Mathias Rechtzigel (@MathiasaurusRex) auf CodePen.

Mit ternär zu offenbaren Inhalt, wenn der Zustand geladen wurde

Jetzt haben wir beide ein CardContainer und CardContent Komponente, die wir geteilt haben unsere Karte in den notwendigen teilen für ein Skelett-Komponente. Aber wie wollen wir tauschen zwischen den beiden, wenn der Inhalt geladen wurde?

Dies ist, wo ein kluger Einsatz von staatlicher und ternäre Operatoren kommt zur Rettung!

Wir tun sind drei Dinge in diesem Abschnitt:

  1. Erstellen Sie ein state-Objekt, das zuerst auf false gesetzt
  2. Update-unsere Komponente für die Verwendung eines ternären operator, so dass die cardContent Komponente nicht gerendert werden, wenn der Staat falsch
  3. Der Zustand der Inhalt von unserem Objekt, sobald wir erhalten, Informationen

Wir wollen, um den Standard-Zustand unserer Inhalte auf false zu setzen. Diese blendet die Karten-Inhalte und ermöglicht es, die CSS :empty-Selektor zu tun, es ist Magie.

diese.state = {
cardContent: false
};

Jetzt sind wir lernten aktualisieren unsere CardContainer Kinder um einen ternären operator. In unserem Fall sieht es so aus.Zustand.cardContent, um zu sehen, ob oder nicht es wird zu true oder false. Wenn es stimmt, tut es alles, was auf der linken Seite der Doppelpunkt (:). Umgekehrt, wenn es falsch ist, tut es alles, was auf der rechten Seite des Dickdarms. Das ist ziemlich nützlich, da Objekte in “true” aufgelöst und wenn wir die anfängliche Zustand auf false gesetzt, dann wird unsere Komponente hat alle Voraussetzungen, die es braucht, um zu implementieren ein Skelett Komponente!

Wir kombinieren alles zusammen in unserer Hauptanwendung. Wir werden keine sorgen über den Zustand im inneren CardContent ganz. Wir werden binden, um eine Schaltfläche zu imitieren, den Prozess zum abrufen von Inhalt aus einer API.

<CardContainer>
{dies.Zustand.cardContent
?
<CardContent
avatarImage={das.Zustand.cardContent.- Karte.avatarImage}
avatarName={das.Zustand.cardContent.- Karte.avatarName}
cardTitle={das.Zustand.cardContent.- Karte.cardTitle}
cardDescription={das.Zustand.cardContent.- Karte.cardDescription}
countComments={das.Zustand.cardContent.- Karte.countComments}
countViews={das.Zustand.cardContent.- Karte.countViews}/>
:
null
}
</CardContainer>

Boom! Wie Sie sehen können, ist die Karte Rendern als das Skelett Komponente, da der Staat von cardContent auf false gesetzt ist. Nächste, wir erstellen eine Funktion, die setzt den Zustand cardContent, um ein mock-Card-Daten-Objekt (dummyCardData):

populateCardContent = (event) => {
const dummyCardData = {
Karte: {
avatarImage: “https://gravatar.com/avatar/f382340e55fa164f1e3aef2739919078?s=80&d=https://codepen.io/assets/avatars/user-avatar-80×80-bdcd44a3bfb9a5fd01eb8b86f9e033fa1a9897c3a15b33adfc2649a002dab1b6.png”,
avatarName: “Mathias Rechtzigel”,
cardTitle: “Minneapolis”,
cardDescription:”der Winter kommt, und es wird nie verlassen”,
countComments:”52″,
countViews:”32″
}
}
const cardContent = dummyCardData
diese.setState({
cardContent
})
}

In diesem Beispiel setzen wir den Zustand innerhalb einer Funktion. Wir könnten auch nutzen Reagieren die lifecycle-Methoden zum Auffüllen der Komponente Zustand. Wir haben, um einen Blick auf die entsprechende Methode zu verwenden, je nach Anforderungen. Zum Beispiel, wenn ich bin laden einer einzelnen Komponente und möchte die Inhalte von der API, dann verwenden wir den ComponentDidMount lifecycle-Methode. Wie die Dokumentation besagt, wir müssen vorsichtig sein bei der Verwendung dieser Lebenszyklus-Methode in dieser Weise, wie es könnte zu einem zusätzlichen render — aber die Einstellung der anfängliche Zustand auf false, sollte das verhindern.

Finden Sie den Stift Reagieren 16 — Skelett-Karte – Finale von Mathias Rechtzigel (@MathiasaurusRex) auf CodePen.

Die zweite Karte in der Liste ist angeschlossen an das click-Ereignis, setzt die cardContent Zustand. Einmal ist der Status der content-Objekt -, die Skelett-version von der Karte verschwindet und der Inhalt angezeigt ist, wird sichergestellt, dass der Benutzer nicht sehen, eine flash-UI – (GRIPPE-Saison steht vor der Tür, so dass wir nicht möchten, dass die Benutzer die F. L. U.!).

Lassen Sie uns prüfen,

Wir fallen ein bisschen, also lasst uns rekapitulieren, was wir getan haben.

  1. Wir erstellten eine CardContainer. Die container-Komponente ist die Nutzung der :leer pseudo-Selektor, so dass es macht die Skelett-Ansicht der Komponente, wenn es leer ist.
  2. Wir haben die CardContent Komponente geschachtelt ist CardContainer, wir geben unser Staat.
  3. Wir setzen den default-Zustand der cardContent auf false
  4. Wir verwenden ein ternärer operator zum Rendern der innere content-Komponente nur dann, wenn wir den Inhalt empfangen und es in unsere cardContent state-Objekt.

Und da haben wir es! Eine gefühlte Leistungssteigerung durch erstellen eines interstitiellen Zustand zwischen der UI gerendert wird und es für den Empfang der Daten zu füllen content.