Å bygge Skjelettet Komponenter med Reagerer

0
18

En av fordelene med å bygge en Enkelt Side-Programmet (SPA) er veien å navigere mellom sidene er ekstremt rask. Dessverre, data fra våre komponenter er noen ganger bare tilgjengelig etter at vi har navigert til en bestemt del av vår søknad. Vi kan nivå opp brukerens oppfattet ytelse ved å bryte komponent i to deler: container (som viser et skjelett vise når den er tom) og innhold. Hvis vi utsette gjengivelse av innholdet komponent før vi har faktisk fått innholdet som kreves, så vi kan utnytte skjelettet utsikt over beholder dermed øke oppfattet legg i gang!

La oss komme i gang i å skape våre komponenter.

Hva vi gjør

Vi vil være å utnytte skjelettet komponent som ble bygget i artikkelen, “å Bygge Skjelettet Skjermer med CSS Egendefinerte Egenskaper.”

Dette er en flott artikkel som beskriver hvordan du kan lage et skjelett komponent, og bruk av :tom velgeren gir oss muligheten til å bruke cleverly {dette.rekvisitter.barn} innsiden av våre komponenter, slik at skjelettet kortet er gjengitt når innholdet er ikke tilgjengelig.

Se Penn Reagere 16 — Skjelett-Kort – Finalen ved Mathias Rechtzigel (@MathiasaurusRex) på CodePen.

Å skape vår komponenter

Vi kommer til å lage et par av komponenter til å hjelpe oss i gang.

  1. Den utvendige beholderen (CardContainer)
  2. Innsiden innhold (CardContent)

Først, la oss lage vår CardContainer. Denne beholderen komponenten vil utnytte :tom pseudo-velgeren slik at det vil føre til at skjelettet vise når denne komponenten ikke mottar et barn.

klasse CardContainer strekker seg til å Reagere.Komponent {
render() {
retur (
<div className=”kort”>
{dette.rekvisitter.barn}
</div>
);
}
}

Neste, la oss lage vår CardContent komponent, som vil bli plassert inne i våre CardContainer komponent.

klasse CardContent strekker seg til å Reagere.Komponent {
render() {
retur (
<div className=”kortet–content”>
<div className=”card-innhold-top”>
<div className=”card-avatar”>
<img
className=”card-avatar–image”
src={dette.rekvisitter.avatarImage}
alt=”” />
<span>{dette.rekvisitter.avatarName}</span>
</div>
</div>
<div className=”card-innhold-bottom”>
<div className=”card-kopi”>
<h1 className=”card-kopi–tittelen”>{dette.rekvisitter.cardTitle}</h1>
<p className=”card-kopi–description”>{dette.rekvisitter.cardDescription}</p>
</div>
<div className=”kortet–info”>
<span className=”kort-ikon”>
<span className=”sr-bare”>Totalt visninger: </span>
{dette.rekvisitter.countViews}
</span>
<span className=”kort-ikon”>
<span className=”sr-bare”>Total kommentarer: </span>
{dette.rekvisitter.countComments}
</span>
</div>
</div>
</div>
);
}
}

Som du kan se, er det et par områder for egenskaper som kan bli akseptert, for eksempel et avatar bilde og navn og innhold av kortet som er synlig.

Å sette komponentene sammen gir oss muligheten til å lage en full-kortet komponent.

<CardContainer>
<CardContent
avatarImage=’path/to/avatar.jpg’
avatarName=’FirstName LastName’
cardTitle=’Tittel på kort’
cardDescription=’Beskrivelse av kort’
countComments=’XX’
countViews=’XX’
/>
</CardContainer>

Se Penn Reagere 16 — Skjelett-Kort – Kortet Innhold Ingen Stat av Mathias Rechtzigel (@MathiasaurusRex) på CodePen.

Ved hjelp av en trefoldig operatør for å avsløre innholdet når staten har blitt lagt

Nå som vi har begge en CardContainer og CardContent komponent, har vi delt våre kortet inn nødvendige brikkene til å lage et skjelett komponent. Men hvordan gjør vi bytt mellom de to når innholdet er lagt inn?

Dette er hvor en smart bruk av statlige og trefoldig operatører kommer til unnsetning!

Vi kommer til å gjøre tre ting i denne delen:

  1. Skape en tilstand objekt som er i utgangspunktet satt til false
  2. Oppdatere våre komponent for å bruke en trefoldig operatøren slik at cardContent komponenten vil ikke bli gjengitt når staten er usann
  3. Sett at staten skal være innholdet av objektet vår når vi mottar denne informasjonen

Vi ønsker å angi standard tilstand av vårt innhold til å bli satt til false. Dette skjuler kortet innhold og lar CSS :tom-velgeren for å gjøre det magi.

dette.tilstand = {
cardContent: false
};

Nå er vi kom til å oppdatere våre CardContainer barn til å omfatte en trefoldig operatør. I vårt tilfelle, det ser ut på dette.staten.cardContent for å se om det løser til true eller false. Hvis det er sant, det gjør alt på venstre side av kolon (:). Derimot, hvis den er falsk, det gjør alt på høyre side av tykktarmen. Dette er ganske nyttig, fordi objektene vil løse sann, og hvis vi setter den første staten til å forfalskning, så vår komponenten har alle forutsetninger det er behov for å gjennomføre et skjelett komponent!

La oss kombinere alt sammen inne av våre viktigste programmet. Vi vil ikke bekymre deg om tilstanden i CardContent helt ennå. Vi vil knytte den til en knapp for å etterligne prosessen med å hente innhold fra en API.

<CardContainer>
{dette.staten.cardContent
?
<CardContent
avatarImage={dette.staten.cardContent.kort.avatarImage}
avatarName={dette.staten.cardContent.kort.avatarName}
cardTitle={dette.staten.cardContent.kort.cardTitle}
cardDescription={dette.staten.cardContent.kort.cardDescription}
countComments={dette.staten.cardContent.kort.countComments}
countViews={dette.staten.cardContent.kort.countViews}/>
:
null
}
</CardContainer>

Boom! Som du kan se, kortet er gjengivelse som skjelettet komponent siden staten cardContent er satt til false. Neste, vi kommer til å lage en funksjon som angir statusen for cardContent til en mock-Kortet Data Objekt (dummyCardData):

populateCardContent = (event) => {
const dummyCardData = {
kort: {
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:”Vinteren kommer, og det vil aldri forlate deg”,
countComments:”52″,
countViews:”32″
}
}
const cardContent = dummyCardData
dette.setState({
cardContent
})
}

I dette eksemplet, vi er innstillingen staten innsiden av en funksjon. Vi kan også utnytte Reagere er lifecycle metoder for å fylle komponent staten. Vi ville ha for å ta en titt på den metoden som er best egnet til bruk, avhengig av kravene våre. For eksempel, hvis jeg legger en individuell komponent, og ønsker å få innhold fra API, så ville vi bruke ComponentDidMount lifecycle metode. Som dokumentasjon stater, er vi nødt til å være forsiktig med å bruke dette lifecycle metode på denne måten da det kan føre til en ekstra gjengi — men å sette den første staten til å forfalskning skal hindre at det skjer.

Se Penn Reagere 16 — Skjelett-Kort – Finalen ved Mathias Rechtzigel (@MathiasaurusRex) på CodePen.

Det andre kortet i listen er koblet opp til den klikker på event som setter cardContent staten. Når staten er satt til innholdet objekt, skjelettet versjon av kortet forsvinner, og innholdet vises, for å sikre at brukeren ikke se et glimt av UI (INFLUENSA sesongen som kommer, så ønsker vi ikke å gi brukerne F. L. U.!).

La oss se på

Vi dekket ganske mye, så la oss gå gjennom hva vi gjorde.

  1. Vi har opprettet en CardContainer. Beholderen komponent er å utnytte den :tom pseudo-velgeren slik at det gjør skjelettet visning av komponent ikke når den er tom.
  2. Vi skapte CardContent komponent som er nestet i CardContainer at vi passerer våre stat.
  3. Vi setter standard state of the cardContent false
  4. Vi bruker en trefoldig operatør til å gjengi den indre innhold komponenten bare når vi mottar innholdet og sette det i vår cardContent tilstand objektet.

Og der har vi det! En opplevd økning i ytelse ved å opprette en mellomliggende tilstand mellom UI gjengitt og den som mottar data for å fylle ut innholdet.