Reageren Code Style Guide

0
50

Ik heb de tijd van mijn leven met Reageren de laatste tijd. Maar op mijn reis, ik heb een harde tijd vinden van goede code-stijl richtlijnen te houden van de mix van JSX en JS schoon en leesbaar zijn. Ik ben gekomen met mijn eigen stijl gidsen die wil ik graag delen. Misschien zijn deze nuttig zal zijn voor u en, natuurlijk, voel je vrij om te delen soortgelijke richtlijnen in de comment thread hieronder.

Regel #1: Destructure uw rekwisieten

Een van mijn favoriete ES6 heeft is destructuring. Het maakt het toewijzen-object-eigenschappen variabelen gevoel veel minder van een karwei. Laten we eens kijken naar een voorbeeld.

Stel, we hebben een hond die we willen weergeven als een div met een class met de naam na zijn ras. Binnen de div is een zin die opmerkingen van de hond de kleur en vertelt ons dat als het een goede hond of slechte hond.

klasse Hond breidt Onderdeel {
render () {
terug <div className={dit.props.ras}>Mijn {dit.props.kleur} hond is {dit.props.isGoodBoy ? “goede” : “slecht”}</div>;
}
}

Dat technisch alles wat we willen, maar het lijkt net als een heel groot blok van de code voor wat echt is slechts drie variabelen en een HTML-tag.

We breken het toewijzen van de eigenschappen van steunen op lokale variabelen.

laat ras = dit.props.het ras;
laat color = dit.props.kleur;
laat isGoodBoy = dit.props.isGoodBoy;

Met behulp van ES6, we kunnen hem in een schone verklaring als dit:

laat { ras, kleur, isGoodBoy } = dit.rekwisieten;

Om alles schoon, we zetten onze ternaire operator (later meer daarover) in zijn eigen variabele, en viola.

klasse Hond breidt Onderdeel {
render () {
laat { ras, kleur, isGoodBoy } = dit.rekwisieten;
laat id = isGoodBoy ? “goede” : “slecht”;
terug <div className={ras}>Mijn {color} hond is {id}</div>;
}
}

Veel makkelijker te lezen.

Regel #2: Een tag, een lijn

Nu, we hebben het allemaal gehad dat moment waar willen wij het hele functioneren en maak er een puree van operators en kleine parameter namen om wat uglified, superfast, onleesbaar utility functie. Echter, wanneer je het maken van een staatloze Component in Reageren, kunt u vrij eenvoudig hetzelfde doen, terwijl de resterende schoon.

klasse Hond breidt Onderdeel {
render () {
laat { ras, kleur, goodOrBad } = dit.rekwisieten;
terug <div className={ras}>Mijn {color} hond is {goodOrBad}</div>;
}
}

vs.

laat de Hond = (ras, kleur, goodOrBad) => <div className={ras}>Mijn {color} hond is {goodOrBad}</div>;

Als alles wat je doet is het maken van een basis-element en het plaatsen van eigenschappen in een HTML-tag, maak je dan geen zorgen over het maken van zo ‘ n big deal van alle functies en wrappers om een geheel andere klasse te gaan. Een regel van de code zal doen.

U kunt zelfs creatief met sommige ES6 verspreid functies als u een object doorgeven voor uw eigendommen. Met behulp van deze.props.content zal automatisch de string tussen de open-en sluit-tag.

laat propertiesList = {
className: ‘mijn-favoriete-component”,
id: “myFav”,
inhoud: “Hallo wereld!”
};
laat SimpleDiv = props => <div {… props} />;

laat jsxVersion = <SimpleDiv props={propertiesList} />;

Wanneer gebruik te maken van de verspreiding van de functie:

  • Geen ternaire operatoren verplicht
  • Alleen het passeren HTML tags en attributen inhoud
  • Kan meerdere malen worden gebruikt

Bij het niet gebruiken van de verspreiding van de functie:

  • Dynamische eigenschappen
  • Array-object-eigenschappen zijn vereist
  • Een render die zou vereisen geneste tags

Regel #3: De regel van 3

Als u drie of meer eigenschappen, leg ze vervolgens op hun eigen lijn, zowel in de aanleg als in het render functie.

Dit zou fijn zijn om gewoon een regel van eigenschappen:

klasse GalleryImage breidt Onderdeel {
render () {
laat { imgSrc, titel } = dit.rekwisieten;
return (
<afbeelding>
<img src={imgSrc} alt={titel} />
<figcaption>
<p>Title: {titel}</p>
</figcaption>
</figure>
);
}
}

Maar bedenk dit:

klasse GalleryImage breidt Onderdeel {
render () {
laat { imgSrc, de titel, de artiest, cao ‘ s, miniatuur, breekpunt } = dit.rekwisieten;
return (
<figuur className={clas}>
<foto>
<source media={`(min-width: ${breekpunt})`} srcset={imgSrc} />
<img src={miniatuur} alt={titel} />
</picture (beeld)>
<figcaption>
<p>Title: {titel}</p>
<p>Kunstenaar: {artiest}</p>
</figcaption>
</figure>
);
}
}

Of de render:

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

Het kan ook te veel van een codeblock te lezen. Neerzetten van elke eigendom en op de volgende regel voor een schone, goed leesbare kijken:

laat { imgSrc,
titel
artiest
cao ‘ s,
miniatuur,
breekpunt } = dit.rekwisieten;

en:

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

Regel #4: er zijn Te veel eigenschappen?

Property management is lastig op elk niveau, maar met de ES6 destructuring en Reageren staat-gebaseerde benadering, er zijn heel wat manieren om te reinigen en er een heleboel eigenschappen.

Laten we zeggen dat we het maken van een mapping applicatie heeft een lijst van de opgeslagen adressen en GPS-coördinaten van uw huidige locatie.

De huidige informatie van de gebruiker van de positie en de nabijheid van een favoriet adres moet worden in het bovenliggende Onderdeel van de App zoals deze:

klasse App breidt Onderdeel {
constructor (rekwisieten) {
super(rekwisieten);
deze.staat = {
userLat: 0,
userLon: 0,
isNearFavoriteAddress: false
};
}
}

Dus, als we een adres en we willen dat het merk op hoe dicht u bij het adres, we passeren ten minste twee eigenschappen van de App.

In de App render ():

<Adres
… // Informatie over het adres
currentLat={dit.staat.userLat}
currentLong={dit.staat.userLon} />

In de render functie voor het Adres van het Onderdeel:

render () {
laat { huisnummer,
straatnaam,
streetDirection,
stad,
staat
zip,
lat,
lon,
currentLat,
currentLon } = dit.rekwisieten;
retourneren ( … );
}

Al kunt u zien hoe dit wordt steeds onhandig. Als we de twee sets van informatie en breken ze uit in hun eigen objecten, wordt het veel beter beheersbaar.

In onze App constructor ():

deze.staat = {
userPos: {
lat: 0,
lon: 0
},
isNearFavoriteAddress: false
};

Op een bepaald moment vóór de App render ():

laat addressList = [];
addressList.push({
huisnummer: “1234”,
straatnaam: “Street Rd”,
streetDirection: “N”,
stad: “de Stad”,
staat: “ST”,
zip: “12345”,
lat: “019782309834”,
lon: “023845075757”
});

In de App render ():

<Adres addressInfo={addressList[0]} userPos={dit.staat.userPos} />

In de render functie voor het Adres Component

render () {
laat { addressInfo, userPos } = dit.rekwisieten;
laat { huisnummer,
straatnaam,
streetDirection,
stad,
staat
zip,
lat,
lon } = addressInfo;
retourneren ( … );
}

Veel, veel schoner. Reageren heeft ook een aantal grote manieren om ervoor te zorgen dat de eigenschappen van het object zijn bestaan en zijn van een bepaald type gebruik van PropTypes dat we normaal gesproken niet in JavaScript, dat is gewoon een groot OOP ding toch.

Regel #5: Dynamische maakt – in kaart brengen van arrays

Heel vaak in HTML, we schrijven nu de basis dezelfde stukjes code over en over, gewoon met een paar belangrijke verschillen. Dit is de reden waarom Reageren is gemaakt in de eerste plaats. U maakt een object met eigenschappen die van een complexe, dynamische HTML-blok, zonder te hoeven schrijven elk deel van het herhaaldelijk.

JavaScript is nu al een goede manier te doen lijsten zoals informatie: arrays!

Reageren gebruikt .kaart () – functie om uit te leggen arrays in om, met behulp van een parameter van de matrices als een sleutel.

render () {
laat pokemon = [ “Pikachu”, “Squirtle”, “Bulbasaur”, “Charizard” ];
return (
<ul>
{pokemon.kaart(naam => <li key={naam}>{name}</li>)}
</ul>
);
}

U kunt ook gebruik maken van onze handige dandy verspreid functies te gooien van een hele lijst van parameters van een object met het Object.sleutels() (in gedachten houden dat we moeten nog steeds een sleutel).

render () {
laat pokemon = {
“Pikachu”: {
type: “Electric”,
niveau: 10
},
“Squirtle”: {
type: “Water”,
niveau: 10
},
“Bulbasaur”: {
type: “Gras”,
niveau: 10
},
“Charizard”: {
type: “Vuur”,
niveau: 10
}
};
return (
<ul>
{Object.toetsen(pokemon).kaart(naam => <Pokemon key={naam} {… pokemon[naam]} />)}
</ul>
);
}

Regel #6: Dynamische renders – Reageren ternaire operatoren

In Reageren, kunt u gebruik maken van de operatoren om een voorwaardelijke renderen, net als een declaratie van een variabele. In Regel #1, we gingen voor de vermelding of onze hond goed of slecht is. Het is niet helemaal nodig is om een volledige lijn van code om te beslissen een woord verschil in een zin, maar als het te groot-code blokkeert, het is moeilijk om die kleine ?’s en :’s.

klasse SearchResult breidt Onderdeel {
render () {
laat { resultaten } = dit.rekwisieten;
return (
de sectie <sectie className=”zoekresultaten”>
{resultaten.lengte > 0 &&
de resultaten.kaart(index => <Resultaat key={index} {… resultaten[index] />)
}
{resultaten.lengte === 0 &&
<div className=”geen resultaten”>Geen resultaten</div>
}
</section>
);
}
}

Of, in een ware fashion ternaire

klasse SearchResult breidt Onderdeel {
render () {
laat { resultaten } = dit.rekwisieten;
return (
de sectie <sectie className=”zoekresultaten”>
{resultaten.lengte > 0
? de resultaten.kaart(index => <Resultaat key={index} {… resultaten[index] />)
: <div className=”geen resultaten”>Geen resultaten</div>
}
</section>
);
}
}

Zelfs met onze netjes resultaat mapping, kunt u zien hoe de haakjes zijn al nesten vrij dicht op elkaar. Nu, stel je voor als onze render had meer dan een lijn. Het kan vrij snel onleesbaar. Overweeg een alternatief:

klasse SearchResult breidt Onderdeel {
render () {
laat { resultaten } = dit.rekwisieten;
laat outputJSX;
als (resultaten.lengte > 0) {
outputJSX = (
<Fragment>
{resultaten.kaart(index => <Resultaat key={index} {… resultaten[index] />)}
</Fragment>
);
} else {
outputJSX = <div className=”geen resultaten”>Geen resultaten</div>;
}
terug <sectie className=”zoekresultaten”>{output}</section>;
}
}

Uiteindelijk is de lengte van de code is ongeveer hetzelfde, maar er is een belangrijk onderscheid: met het eerste voorbeeld, we zijn snel switchen tussen twee verschillende syntaxis, het visueel maken van het parseren belastend en moeilijk, terwijl het tweede is gewoon plain JavaScript-met een waarde van opdrachten in één uniforme taal en een één-lijn-functie terug in de andere.

De vuistregel in deze situatie is dat als de JavaScript-u zet in uw JSX object is meer dan twee woorden (bijvoorbeeld object.eigenschap), dient te worden gedaan voordat het terug bellen.

Wrap up

De combinatie van de syntaxis kan krijgen rommelig, en deze zijn de meest voor de hand liggende situaties waar zag ik mijn code gaat uit de rails. Hier worden de fundamentele concepten die deze komen allemaal uit en kan worden toegepast op een situatie die niet hier behandeld:

  • Gebruik ES6 heeft. Serieus. Er zijn veel fantastische functies die kunnen maken dat uw werk makkelijker, sneller en veel minder handleiding.
  • Alleen schrijven JSX aan de rechterkant van een = of een return.
  • Soms moet je JavaScript in uw JSX. Als de JavaScript-past niet op één lijn (zoals een .kaart() functie of ternaire operator), dan moet het van tevoren gedaan worden.
  • Als u uw code begint te kijken als (<{`${()}`} />), dan heb je waarschijnlijk te ver gegaan. Neem het laagste niveau buiten de huidige instructie en doen dit.