Gebouw Skelet Componenten met Reageren

0
20

Een van de voordelen van het bouwen van een Enkele Pagina Toepassing (SPA) is de manier van navigeren tussen de pagina ‘ s is zeer snel. Helaas, de gegevens van onze onderdelen is het soms alleen beschikbaar nadat we navigeren naar een specifiek onderdeel van onze applicatie. We kunnen het niveau van de gebruiker waargenomen prestaties door het breken van de component in twee stukken: de container (die geeft een skelet bekijken als het leeg is) en de inhoud. Als we de vertraging van de weergave van de inhoud component totdat we daadwerkelijk hebben ontvangen, van de inhoud nodig is, dan kunnen we gebruikmaken van het skelet weergave van de container waardoor het stimuleren van de ervaren belasting van de tijd!

We gaan aan de slag in het creëren van onze onderdelen.

Wat we maken

We zullen gebruik te maken van de skelet-onderdeel dat is gebouwd in het artikel, “de opbouw van het Skelet Schermen met CSS Aangepaste Eigenschappen.”

Dit is een prachtig artikel dat beschrijft hoe kunt u een skelet-component en het gebruik van de :leeg selector stelt ons in staat om slim gebruik {dit.props.kinderen} binnenkant van onze onderdelen, zodat het skelet kaart wordt weergegeven wanneer de inhoud is niet beschikbaar.

Zie de Pen Reageren 16 — Skelet Kaart – Finale door Mathias Rechtzigel (@MathiasaurusRex) op CodePen.

Het creëren van onze componenten

We maken een paar componenten helpen ons begonnen.

  1. De buitenkant container (CardContainer)
  2. De inhoud (CardContent)

Eerst maken we onze CardContainer. Deze container onderdeel zal gebruik te maken van de :leeg pseudo selector dus het zal maken van de skelet-weergave wanneer dit onderdeel niet ontvangen van een kind.

klasse CardContainer breidt Reageren.Onderdeel {
render() {
return (
<div className=”kaart”>
{dit.props.kinderen}
</div>
);
}
}

Vervolgens maken we onze CardContent component, die zal worden genest binnen onze CardContainer component.

klasse CardContent breidt Reageren.Onderdeel {
render() {
return (
<div className=”kaart–content”>
<div className=”kaart-content–top”>
<div className=”kaart-avatar”>
<img
className=”kaart-avatar afbeelding–”
src={dit.props.avatarImage}
alt=”” />
<span>{dit.props.avatarName}</span>
</div>
</div>
<div className=”kaart-content–bottom”>
<div className=”kaart-kopie”>
<h1 className=”kaart-kopiëren-title”>{dit.props.cardTitle}</h1>
<p className=”kaart-kopiëren-description”>{dit.props.cardDescription}</p>
</div>
<div className=”kaart–info”>
<span className=”kaart-icon”>
<span className=”sr”>Totaal aantal views: </span>
{dit.props.countViews}
</span>
<span className=”kaart-icon”>
<span className=”sr”>Totaal opmerkingen: </span>
{dit.props.countComments}
</span>
</div>
</div>
</div>
);
}
}

Zoals u kunt zien, is er een aantal ruimtes voor eigenschappen die kunnen worden aanvaard, zoals een avatar afbeelding en de naam en de inhoud van de kaart die zichtbaar is.

Zet de onderdelen in elkaar stelt ons in staat om een volle kaart component.

<CardContainer>
<CardContent
avatarImage=’path/to/avatar.jpg’
avatarName=’Voornaam Achternaam’
cardTitle=’Titel van de kaart’
cardDescription=’Beschrijving van de kaart’
countComments=’XX’
countViews=’XX’
/>
</CardContainer>

Zie de Pen Reageren 16 — Skelet Kaart – Kaart Inhoud Geen Staat van Mathias Rechtzigel (@MathiasaurusRex) op CodePen.

Met behulp van een ternaire operator te onthullen inhoud als de staat is geladen

Nu hebben we beide een CardContainer en CardContent onderdeel delen we onze kaart in de benodigde stukken voor het maken van een skelet component. Maar hoe doen we wisselen tussen de twee wanneer de inhoud is geladen?

Dit is waar een slim gebruik te maken van de staat en ternaire operatoren komt tot de redding!

We gaan drie dingen doen in deze sectie:

  1. Het maken van een state-object dat is in eerste instantie ingesteld op false
  2. Update van onze component gebruik van een ternaire operator zodat de cardContent onderdeel zal niet worden weergegeven als de toestand onwaar is
  3. Het instellen van de staat om de inhoud van onze object zodra wij het ontvangen van die informatie

Willen wij de standaard staat onze content te zijn ingesteld op onwaar. Dit verbergt de kaart inhoud en kan de CSS :lege kiezen om het doen van de magie.

deze.staat = {
cardContent: false
};

We kregen voor het bijwerken van onze CardContainer kinderen met een ternaire operator. In ons geval, het lijkt op deze.staat.cardContent om te zien of het wel of niet omgezet in true of false. Als het waar is, doet er alles aan de linkerkant van de dubbele punt (:). Omgekeerd, als het vals is, doet er alles aan de rechterhand van de dikke darm. Dit is heel handig omdat de objecten te lossen door true en als we de eerste staat op false, dan is onze-onderdeel heeft aan alle voorwaarden die het nodig heeft voor de uitvoering van een skelet onderdeel van te zijn!

Laten we combineren alles samen in onze belangrijkste toepassing. We wont zorgen over de toestand in CardContent nog. We zullen binden, dat is een toets om na te bootsen het proces van het ophalen van inhoud van een API.

<CardContainer>
{dit.staat.cardContent
?
<CardContent
avatarImage={dit.staat.cardContent.kaart.avatarImage}
avatarName={dit.staat.cardContent.kaart.avatarName}
cardTitle={dit.staat.cardContent.kaart.cardTitle}
cardDescription={dit.staat.cardContent.kaart.cardDescription}
countComments={dit.staat.cardContent.kaart.countComments}
countViews={dit.staat.cardContent.kaart.countViews}/>
:
null
}
</CardContainer>

Boom! Zoals u kunt zien, de kaart is een weergave als het skelet component omdat de toestand van cardContent is ingesteld op false. Vervolgens gaan we een functie maken die bepaalt de staat van cardContent om een mock-Kaart Data Object (dummyCardData):

populateCardContent = (gebeurtenis) => {
const dummyCardData = {
kaart: {
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:”de Winter is op komst, en het zal je nooit verlaten”,
countComments:”52″,
countViews:”32″
}
}
const cardContent = dummyCardData
deze.setState({
cardContent
})
}

In dit voorbeeld, we zijn het instellen van de staat in functie van een functie. We konden ook gebruik van Reageren levenscyclus van methoden voor het vullen van de component staat. We zouden hebben om een kijkje te nemen op de juiste methode te gebruiken, afhankelijk van onze eisen. Bijvoorbeeld, als ik het laden van een afzonderlijke component en wil je de inhoud van de API, dan gebruiken we de ComponentDidMount levenscyclus van de methode. Als de documentatie staat, moeten we voorzichtig zijn van het gebruik van deze levenscyclus methode op deze manier als het zou kunnen leiden tot een extra render — maar de eerste staat op false moet voorkomen dat dit gebeurt.

Zie de Pen Reageren 16 — Skelet Kaart – Finale door Mathias Rechtzigel (@MathiasaurusRex) op CodePen.

De tweede kaart in de lijst is gekoppeld aan het click-event dat stelt de cardContent staat. Zodra de status is ingesteld op de inhoud van het object, het skelet versie van de kaart verdwijnt en de inhoud wordt weergegeven, is het zorgen dat de gebruiker niet een flits van UI (GRIEP seizoen komt eraan, dus we willen niet op te geven de gebruikers de F. L. U.!).

Laten we eens bekijken

We vallen wel een beetje, dus laten we samenvatten wat we deden.

  1. We hebben een CardContainer. De container onderdeel is gebruik te maken van de :leeg pseudo selector dus dat maakt het skelet weergave van de component als het leeg is.
  2. We hebben het CardContent component die is genest binnen CardContainer dat we langs onze stand.
  3. We zetten de standaard status van de cardContent false
  4. We maken gebruik van een ternaire operator te geven van de innerlijke inhoud component alleen wanneer krijgen we de inhoud op en stak het in onze cardContent staat van object.

En daar hebben we het! Een waargenomen boost in de prestaties door het maken van een interstitiële staat tussen de GEBRUIKERSINTERFACE wordt weergegeven en het ontvangen van de gegevens voor het vullen van content.