Reagerer Kode Style Guide

0
26

Jeg har hatt tid av livet mitt med å Reagere i det siste. Men på min reise, og jeg har hatt en hard tid å finne gode etiske retningslinjer for stil for å holde blanding av JSX og JS ren og lesbar. Jeg har kommet opp med min egen stil guider som jeg liker å dele. Kanskje disse vil være nyttige for deg, og, selvfølgelig, føl deg fri til å dele tilsvarende retningslinjer i kommentar-tråden under.

Regel #1: Destructure dine rekvisitter

En av mine favoritt ES6 funksjoner er destructuring. Det gjør tilordne objekt egenskaper til variabler føles mye mindre av et ork. La oss ta en titt på et eksempel.

Si at vi har en hund som vi ønsker å vise som en div med en klasse oppkalt etter sin rase. Inne i div er en setning som viser hundens farge og forteller oss om det er en god hund eller dårlig hund.

klasse Hunden strekker seg Komponent {
render () {
retur <div className={dette.rekvisitter.rasen}>{dette.rekvisitter.farge} hund er {dette.rekvisitter.isGoodBoy ? “god” : “dårlig”}</div>;
}
}

Som teknisk sett gjør alt vi ønsker, men det virker bare som litt av en stor blokk med kode for hva som egentlig er bare tre variabler og en HTML-tag.

Vi kan bryte det ut ved å tilordne alle egenskapene av rekvisitter til lokale variabler.

la rasen = dette.rekvisitter.rasen;
la color = dette.rekvisitter.farge;
la isGoodBoy = dette.rekvisitter.isGoodBoy;

Ved hjelp av ES6, vi kan sette det i en ren utsagn som dette:

la { rase, farge, isGoodBoy } = dette.rekvisitter;

Å holde alt rent, vi legger våre trefoldig operatøren (mer om det senere) i sin egen variabel som godt, og viola.

klasse Hunden strekker seg Komponent {
render () {
la { rase, farge, isGoodBoy } = dette.rekvisitter;
la id = isGoodBoy ? “god” : “dårlig”;
retur <div className={rasen}>{farge} hund er {id}</div>;
}
}

Mye lettere å lese.

Regel #2: En tag, en linje

Nå har vi alle hadde det øyeblikket hvor vi ønsker å ta våre hel-funksjonen og gjør det til en mos av operatører og små parameter navn for å gjøre noen uglified, superrask, uleselig utility-funksjonen. Imidlertid, når du skal ta en statsløs Komponent i å Reagere, kan du ganske enkelt gjøre det samme, mens resten er ren.

klasse Hunden strekker seg Komponent {
render () {
la { rase, farge, goodOrBad } = dette.rekvisitter;
retur <div className={rasen}>{farge} hund er {goodOrBad}</div>;
}
}

vs.

la Hunden = (rase, farge, goodOrBad) => <div className={rasen}>{farge} hund er {goodOrBad}</div>;

Hvis alt du gjør er å lage en grunnleggende element og plassere egenskaper i en HTML-tag, så ikke bekymre deg for å gjøre en så stor del av alle funksjoner og wraps til å få en helt egen klasse kommer. En linje med kode vil gjøre.

Du kan til og med bli kreativ med noen ES6 spre funksjoner hvis du passerer et objekt for din egenskaper. Ved hjelp av denne.rekvisitter.innholdet vil automatisk sette streng mellom åpne og lukke tag.

la propertiesList = {
className: “min-favoritt-komponent”,
id: “myFav”,
innhold: “Hallo, verden!”
};
la SimpleDiv = rekvisitter => <div {… rekvisitter} />;

la jsxVersion = <SimpleDiv rekvisitter={propertiesList} />;

Når du skal bruke spre funksjon:

  • Ingen trefoldig operatører nødvendig
  • Bare passerer HTML-kode egenskaper og innhold
  • Kan brukes flere ganger

Når du ikke å bruke spredning funksjon:

  • Dynamiske egenskaper
  • Matrise eller objekt egenskaper er nødvendig
  • En render som ville kreve nestede koder

Regel #3: regelen om 3

Hvis du har tre eller flere egenskaper, og deretter sette dem på sin egen linje både i forekomst og i gjengi funksjon.

Dette ville være fint å ha bare én linje av egenskaper:

klasse GalleryImage strekker seg Komponent {
render () {
la { imgSrc, tittel,} = dette.rekvisitter;
retur (
<figur>
<img src={imgSrc} alt={tittel} />
<figcaption>
<p>Title: {tittel}</p>
</figcaption>
</figure>
);
}
}

Men tenk på dette:

klasse GalleryImage strekker seg Komponent {
render () {
la { imgSrc, tittel, artist, clas, miniatyr, stoppunkt } = dette.rekvisitter;
retur (
<figur className={clas}>
<bilde>
<source media={`(min-width: ${stoppunkt})`} srcset={imgSrc} />
<img src={miniatyrbilde} alt={tittel} />
</bilde>
<figcaption>
<p>Title: {tittel}</p>
<p>Artist: {artist}</p>
</figcaption>
</figure>
);
}
}

Eller gjengi:

<GalleryImage imgSrc=”./src/img/vangogh2.jpg” title=”Starry Night” artist=”Van Gogh” clas=”portrett” thumbnail=”./src/img/thumb/vangogh2.gif” stoppunkt={320} />

Den kan komme til å bli for mye av en codeblock å lese. Dråpe hver eiendom til neste linje for en ren, lesbar se:

la { imgSrc,
tittel
artist,
clas,
thumbnail,
stoppunkt } = dette.rekvisitter;

og:

<GalleryImage
imgSrc=”./src/img/vangogh2.jpg”
title=”Starry Night”
kunstneren=”Van Gogh”
clas=”landskap”
thumbnail=”./src/img/thumb/vangogh2.gif”
stoppunkt={320} />

Regel #4: det er For mange egenskaper?

Eiendomsforvaltning er vanskelig på alle nivå, men med ES6 destructuring og Reagere state-basert tilnærming, det er ganske mange måter å rydde opp utseendet på en rekke egenskaper.

La oss si at vi gjør en kartlegging program som har en liste over lagrede adresser og en GPS-koordinat for din nåværende posisjon.

Den gjeldende brukeren informasjon om posisjon og nærhet til favoritt-postadressen må være i overordnet del av App som dette:

klasse App strekker seg Komponent {
constructor (props) {
super(props);
dette.tilstand = {
userLat: 0,
userLon: 0,
isNearFavoriteAddress: false
};
}
}

Så, når vi gjør en adresse og vi vil ha det å være oppmerksom på hvor nær du er til adressen, vi passerer minst to eiendommer fra Appen.

I App render ():

<Adresse
… // Opplysninger om adresse
currentLat={dette.staten.userLat}
currentLong={dette.staten.userLon} />

I gjengi funksjon for Adresse Komponent:

render () {
la { houseNumber,
streetName,
streetDirection,
by,
stat,
zip,
lat,
lon,
currentLat,
currentLon } = dette.rekvisitter;
gå tilbake ( … );
}

Allerede, kan du se hvordan dette blir uhåndterlig. Hvis vi tar de to settene av informasjon og bryte dem ut i deres egne objekter, blir det mye mer håndterlig.

I våre App-konstruktør (er):

dette.tilstand = {
userPos: {
lat: 0,
lon: 0
},
isNearFavoriteAddress: false
};

På et tidspunkt før Appen render ():

la addressList = [];
addressList.trykk({
houseNumber: “1234”,
streetName: “Street Rd”,
streetDirection: “N”,
by: “Byen”,
tilstand: “ST”,
zip: “12345”,
lat: “019782309834”,
lon: “023845075757”
});

I App render ():

<Adresse addressInfo={addressList[0]} userPos={dette.staten.userPos} />

I gjengi funksjon for Adresse-Komponenten

render () {
la { addressInfo, userPos } = dette.rekvisitter;
la { houseNumber,
streetName,
streetDirection,
by,
stat,
zip,
lat,
lon } = addressInfo;
gå tilbake ( … );
}

Mye, mye renere. Reagerer også har noen gode måter å sikre at objektet egenskaper finnes og er av en viss type bruk PropTypes at vi normalt ikke har i JavaScript, som er bare en stor OOP ting likevel.

Regel #5: Dynamisk gjør – Kartlegge arrays

Ganske ofte i HTML, kan vi skrive de samme grunnleggende deler av koden over og over, bare med et par viktige forskjeller. Dette er hvorfor Reagerer ble opprettet i første omgang. Du gjør et objekt med egenskaper som returnerer et komplekst, dynamisk HTML-blokken, uten å måtte skrive hver del av det flere ganger.

JavaScript har allerede en stor måte å gjøre lister over informasjon som: matriser!

Reagerer bruker .kart () – funksjonen til å legge ut matriser for, ved hjelp av en parameter fra matriser som en nøkkel.

render () {
la pokemon = [ “Pikachu”, “Squirtle”, “Bulbasaur”, “Charizard” ];
retur (
<ul>
{pokemon.kart(navn => <li key={name}>{name}</li>)}
</ul>
);
}

Du kan også bruke vår handy-dandy spre funksjoner for å kaste en hel liste over parametre i en gjenstand ved hjelp av Objektet.nøkler() (husk at vi fortsatt trenger en nøkkel).

render () {
la pokemon = {
“Pikachu”: {
type: “Elektrisk”,
nivå: 10
},
“Squirtle”: {
type: “Vann”,
nivå: 10
},
“Bulbasaur”: {
type: “Gress”,
nivå: 10
},
“Charizard”: {
type: “Brann”,
nivå: 10
}
};
retur (
<ul>
{Objekt.tastene(pokemon).kart(navn => <Pokemon key={name} {… pokemon[name]} />)}
</ul>
);
}

Regel #6: Dynamisk gjør – Reagerer trefoldig operatører

I Reagere, kan du bruke operatører å gjøre en betinget gjengi akkurat som en variabel erklæring. I Regel #1 så vi på denne for å si om hunden vår var god eller dårlig. Det er ikke helt nødvendig å lage en hel linje med kode for å bestemme en ett ord forskjell i en setning, men når det kommer til å bli stort kode blokker, er det vanskelig å finne de små ?’s og :’s.

klasse SearchResult strekker seg Komponent {
render () {
la { resultater } = dette.rekvisitter;
retur (
<delen className=”søk-resultater”>
{resultater.lengde > 0 &&
resultater.kart(indeks => <Resultat tast={indeks} {… resultater[indeks] />)
}
{resultater.lengde === 0 &&
<div className=”no-resultater”>Ingen resultater</div>
}
</avsnitt>
);
}
}

Eller, i ekte trefoldig mote

klasse SearchResult strekker seg Komponent {
render () {
la { resultater } = dette.rekvisitter;
retur (
<delen className=”søk-resultater”>
{resultater.lengde > 0
? resultater.kart(indeks => <Resultat tast={indeks} {… resultater[indeks] />)
: <div className=”no-resultater”>Ingen resultater</div>
}
</avsnitt>
);
}
}

Selv med våre ryddig resultat kartlegging, kan du se hvordan parentes er allerede hekkende ganske tett. Nå, tenk om våre gjengi hadde mer enn bare en linje. Det kan ganske fort bli uleselig. Vurdere en alternativ:

klasse SearchResult strekker seg Komponent {
render () {
la { resultater } = dette.rekvisitter;
la outputJSX;
hvis (resultater.lengde > 0) {
outputJSX = (
<Del>
{resultater.kart(indeks => <Resultat tast={indeks} {… resultater[indeks] />)}
</Del>
);
} else {
outputJSX = <div className=”no-resultater”>Ingen resultater</div>;
}
retur <delen className=”søk-resultater”>{output}</seksjon>;
}
}

Til slutt, den koden er omtrent den samme, men det er en viktig forskjell: i det første eksemplet, vi er raskt bytte frem og tilbake mellom to ulike syntaxes, noe som gjør visual parsing krevende og vanskelig, mens andre er rett og slett ren JavaScript med verdi oppgaver i ett, konsekvent språk og en en-linje-funksjon tilbake i en annen.

Den tommelfingerregel i denne situasjonen er at hvis JavaScript du setter inn i din JSX objektet er mer enn to ord (f.eks. objekt.eiendom), bør det gjøres før retur samtale.

Pakk opp

Kombinasjonen av syntaks kan bli rotete, og disse er de mest åpenbare situasjoner hvor jeg så min kode går av skinnene. Her er de grunnleggende konseptene at alle disse kommer fra, og kan brukes til enhver situasjon som ikke er dekket her:

  • Bruk ES6 funksjoner. Seriøst. Det er mange fantastiske funksjoner som kan gjøre jobben enklere, raskere og mye mindre manuell.
  • Bare skriv JSX på høyre side av et = eller en retur.
  • Noen ganger må JavaScript i din JSX. Hvis JavaScript ikke er plass til på én linje (som en .kart () – funksjonen eller trefoldig operatør), så bør det gjøres på forhånd.
  • Hvis koden din begynner å se ut som (<{`${()}`} />), da har du trolig gått for langt. Ta det laveste nivået utenfor den aktuelle setningen, og gjøre det før dette.