Bygga Skelett Komponenter med att Reagera

0
19

En av fördelarna med att bygga en Enda Sida Ansökan (SPA) är sättet att navigera mellan sidorna är extremt snabb. Tyvärr, uppgifter om våra komponenter är ibland endast tillgängliga efter att vi har gått till en specifik del i vår ansökan. Vi kan nivå upp användarens upplevda prestanda genom att bryta komponent i två delar: behållare (som visar ett skelett visa när den är tom) och innehåll. Om vi dröjer med att tillhandahållande av innehåll komponent tills vi har faktiskt fått det innehåll som krävs, då kan vi utnyttja skelett utsikt över behållaren och därmed öka den upplevda laddningstiden!

Låt oss komma igång i att skapa våra komponenter.

Vad vi gör

Vi kommer att utnyttja skelett komponent som byggdes i artikeln, “att Bygga Skelett Skärmar med CSS Anpassade Egenskaper.”

Detta är en bra artikel som beskriver hur du kan skapa ett skelett-komponent och användning av :tom väljare tillåter oss att skickligt använda {detta.rekvisita.barnen} insidan av våra komponenter så att skelettet kortet är gjort när innehållet är inte tillgänglig.

Se Pennan Reagera 16 — Skelett Kort – Final med Mathias Rechtzigel (@MathiasaurusRex) på CodePen.

Att skapa våra komponenter

Vi kommer att skapa ett par komponenter för att hjälpa oss att få igång.

  1. Den yttre behållare (CardContainer)
  2. Insidan innehåll (CardContent)

Första, låt oss skapa vår CardContainer. Denna behållare del kommer att utnyttja det :tom pseudo-väljare så att det kommer att göra skelettet se när denna komponent inte få ta emot ett barn.

klass CardContainer sträcker sig Reagera.Komponent {
render() {
avkastning (
<div className=”card”>
{detta.rekvisita.barnen}
</div>
);
}
}

Nästa, låt oss skapa vår CardContent komponent, som kommer att vara inkapslad i en av våra CardContainer komponent.

klass CardContent sträcker sig Reagera.Komponent {
render() {
avkastning (
<div className=”kortet-content”>
<div className=”card-content–top”>
<div className=”card-avatar”>
<img
className=”card-avatar-bild”
src={detta.rekvisita.avatarImage}
alt=”” />
<span>{detta.rekvisita.avatarnamn}</span>
</div>
</div>
<div className=”card-innehåll-bottom”>
<div className=”kort-kopiera”>
<h1 className=”kort-kopiera–title”>{detta.rekvisita.cardTitle}</h1>
<p className=”kort-kopiera–description”>{detta.rekvisita.cardDescription}</p>
</div>
<div className=”kortet-info”>
<span className=”card-ikon”>
<span className=”sr”>det Totala antalet visningar: </span>
{detta.rekvisita.countViews}
</span>
<span className=”card-ikon”>
<span className=”sr-only” – >Totalt antal kommentarer: </span>
{detta.rekvisita.countComments}
</span>
</div>
</div>
</div>
);
}
}

Som ni kan se, det finns ett par platser för egenskaper som kan accepteras, till exempel en avatar bild, och namn och innehåll av de kort som är synliga.

Att sätta ihop komponenter med varandra gör det möjligt för oss att skapa en full-kort komponent.

<CardContainer>
<CardContent
avatarImage=’path/to/avatar.jpg’
avatarnamn=’Förnamn Efternamn’
cardTitle=’Titel på kortet”
cardDescription=’Beskrivning av kort”
countComments= “XX”
countViews= “XX”
/>
</CardContainer>

Se Pennan Reagera 16 — Skelett Kort – Kort Innehåll Utan Tillstånd av Mathias Rechtzigel (@MathiasaurusRex) på CodePen.

Med hjälp av en ternär operator för att avslöja innehållet när staten har lästs in

Nu har vi både en CardContainer och CardContent komponent, vi har delat våra kort till nödvändiga delar för att skapa ett skelett-komponent. Men hur gör vi för att byta mellan de två när innehållet har lästs in?

Detta var en smart användning av staten och ternära aktörer kommer till undsättning!

Vi kommer att göra tre saker i detta avsnitt:

  1. Skapa en stat objekt som är initialt satt till false
  2. Uppdatering av våra komponenter för att använda en ternär operator så att cardContent komponent visas inte när status är falsk
  3. Som staten vara innehållet av våra objekt när vi får denna information

Vi vill ställa in standardläget för vårt innehåll för att vara falskt. Detta döljer kort innehåll och ger CSS :tom väljare att göra det är magi.

detta.state = {
cardContent: falskt
};

Nu har vi fått uppdatera vår CardContainer barn till att omfatta en ternär operator. I vårt fall ser det ut på detta.stat.cardContent för att se om det löser till sant eller falskt. Om det är sant, det gör allt på vänster sida av kolon (:). Omvänt, om det är falskt, det gör allt på den högra sidan av tjocktarmen. Detta är ganska användbart för att föremål kommer att lösa stämmer, och om vi sätter det ursprungliga tillståndet till false, då vår komponent har alla förutsättningar den behöver för att genomföra ett skelett komponent!

Låt oss kombinera ihop allt på insidan av våra största program. Vi brukar oroa staten inuti CardContent riktigt ännu. Vi kommer att binda till en knapp för att efterlikna processen för att hämta innehåll från ett API.

<CardContainer>
{detta.stat.cardContent
?
<CardContent
avatarImage={detta.stat.cardContent.kortet.avatarImage}
avatarnamn={detta.stat.cardContent.kortet.avatarnamn}
cardTitle={detta.stat.cardContent.kortet.cardTitle}
cardDescription={detta.stat.cardContent.kortet.cardDescription}
countComments={detta.stat.cardContent.kortet.countComments}
countViews={detta.stat.cardContent.kortet.countViews}/>
:
null
}
</CardContainer>

Boom! Som du kan se, kortet är att göra som skelett komponent eftersom staten cardContent är satt till false. Nästa, vi kommer att skapa en funktion som ställer staten cardContent att en mock-Kort Data Object (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”,
avatarnamn: “Mathias Rechtzigel”,
cardTitle: “Minneapolis”,
cardDescription:”Vintern är på väg, och det kommer aldrig att lämna”,
countComments:”52″,
countViews:”32″
}
}
const cardContent = dummyCardData
detta.setState({
cardContent
})
}

I detta exempel lägger vi den statliga inne i en funktion. Vi kan också utnyttja Reagera livscykel metoder för att fylla komponentens tillstånd. Vi skulle behöva ta en titt på den lämpliga metoden att använda, beroende på våra krav. Till exempel, om jag laddar en enskild komponent och vill få innehållet från API, då vi skulle använda ComponentDidMount lifecycle metod. Som dokumentation stater, att vi måste vara noga med att använda denna livscykel metod på detta sätt eftersom det kan orsaka en ytterligare göra — men att det ursprungliga tillståndet till false bör förhindra att det händer.

Se Pennan Reagera 16 — Skelett Kort – Final med Mathias Rechtzigel (@MathiasaurusRex) på CodePen.

Det andra kortet i listan är ansluten till click-händelse som sätter cardContent staten. När staten är satt till innehållet objekt, skelettet version av kortet försvinner och innehållet framgår, att säkerställa att användaren inte ser en blixt av UI (INFLUENSA säsongen är på väg så att vi inte vill ge användarna F. L. U.!).

Låt oss granska

Vi täckte en hel del, så låt oss sammanfatta vad vi gjorde.

  1. Vi skapade en CardContainer. Behållaren komponent är att utnyttja :tom pseudo-väljare så att det gör skelettet tanke på den komponent när den är tom.
  2. Vi skapade CardContent komponent som är kapslade i CardContainer att vi klarar våra staten.
  3. Vi ställa in standardläget för cardContent till false
  4. Vi använder en ternär operator för att göra den inre innehåll komponent endast då kan vi ta emot innehåll och lägga det i vår cardContent staten objekt.

Och där har vi det! Uppfattas som ett lyft i prestanda genom att skapa en interstitiell tillstånd mellan UI renderas och mottagning av data för att fylla innehåll.