React je eden najbolj priljubljenih front-end okvirjev za JavaScript. Za razliko od drugih ogrodij, kot je Angular, je zelo neopazen. Zato je odvisno od vas, da se odločite, kako želite napisati ali strukturirati svojo kodo React.

Ta članek raziskuje nekaj praks, ki jih morate upoštevati, da izboljšate učinkovitost vaše aplikacije React.

1. Uporaba funkcionalnih komponent in kavljev namesto razredov

V Reactu lahko uporabite razred ali funkcionalne komponente s kavlji. Vendar pa bi morali pogosteje uporabljati funkcionalne komponente in kljuke, saj imajo za posledico bolj jedrnato in berljivo kodo v primerjavi z razredi.

Razmislite o naslednji komponenti razreda, ki prikazuje podatke iz NASA API-ja.

razred NasaData razširi React. komponenta {
 konstruktor (rekviziti) {
 super (rekviziti);
 this.state = {
 podatki: [],
 };
 }
 componentDidMount() {
 prinesi (" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 this.setState({
 podatki: json,
 });
 });
 }
 render() {





instagram viewer


 const {podatki} = this.state;
 če (!data.length)
 vrnitev (


 Pridobivanje podatkov... 
{" "}



 );
 vrnitev (
 <>
 Pridobite podatke s komponento razreda 
{" "}
 {data.map((item) => (
{item.title}

 ))}
 );
 }
}

Enako komponento lahko zapišemo s kavlji.

const NasaData = () => {
 const [data, setdata] = useState (null);
 useEffect(() => {
 prinesi (" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 setdata (json);
 });
 }, [podatki]);
 vrnitev (
 <>
 Pridobite podatke s komponento razreda 
{" "}
 {data.map((item) => (
{item.title}

 ))}
 );
};

Čeprav zgornji blok kode opravlja isto stvar kot komponenta razreda, je manj zapleten, minimalen in enostaven za razumevanje, kar prispeva k boljši izkušnji razvijalca.

2. Izogibajte se uporabi stanja (če je mogoče)

React stanje spremlja podatke, ki ob spremembi sprožijo ponovno upodabljanje komponente React. Ko gradite aplikacije React, se čim bolj izogibajte uporabi stanja, saj več stanja uporabite, več podatkov morate spremljati v svoji aplikaciji.

Eden od načinov za zmanjšanje uporabe stanja je, da ga razglasite le, kadar je to potrebno. Če na primer pridobivate uporabniške podatke iz API-ja, shranite celoten uporabniški objekt v stanje, namesto da shranite posamezne lastnosti.

Namesto tega:

const [uporabniško ime, setusername] = useState('')
const [geslo, setpassword] = useState('')

To storite:

const [uporabnik, setuser] = useState({})

Ko se odločate za strukturo projekta, izberite komponento osredotočenega. To pomeni, da imate vse datoteke v zvezi z eno komponento v eni mapi.

Če bi ustvarjali a Navbar komponento, ustvarite mapo z imenom navigacijsko vrstico ki vsebuje Navbar komponento, slogovno tabelo in druge datoteke JavaSript in sredstev, ki se uporabljajo v komponenti.

Ena sama mapa, ki vsebuje vse datoteke komponente, omogoča preprosto ponovno uporabo, skupno rabo in odpravljanje napak. Če želite videti, kako deluje komponenta, morate odpreti samo eno mapo.

4. Izogibajte se uporabi indeksov kot ključnih rekvizitov

React uporablja ključe za edinstveno prepoznavanje elementov v nizu. S tipkami lahko React natančno določi, kateri element je bil spremenjen, dodan ali odstranjen iz matrike.

Večino časa pri upodabljanju matrik lahko uporabite indeks kot ključ.

const Elementi = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"];
 vrnitev (
 <>
 {arr.map((elem, indeks) => {
{elem}
;
 })}
 );
};

Čeprav to včasih deluje, lahko uporaba indeksa kot ključa povzroči težave, zlasti če se pričakuje, da se bo seznam spremenil. Razmislite o tem seznamu.

const arr = ["item1", "item2", "item3", "item4", "item5"];

Trenutno je prvi element seznama "Element 1” je na indeksu nič, če pa ste dodali še en element na začetek seznama, bo “Element 1” bi se indeks spremenil v 1, kar spremeni obnašanje vašega niza.

Rešitev je uporaba edinstvene vrednosti kot indeksa, da se zagotovi ohranitev identitete postavke seznama.

5. Kjer je mogoče, se odločite za fragmente namesto divjev

Komponente React morajo vrniti kodo, zavito v eno oznako, običajno a ali fragment React. Po možnosti se odločite za fragmente.

Uporaba poveča velikost DOM, zlasti pri velikih projektih, saj več oznak ali vozlišč DOM imate, več pomnilnika potrebuje vaše spletno mesto in več moči brskalnik uporablja za nalaganje vašega spletnega mesta. To vodi do nižje hitrosti strani in potencialno slabe uporabniške izkušnje.

En primer odpravljanja nepotrebnega oznake jih ne uporablja, ko vrne en sam element.

const gumb = () => {
 vrnitev Zaslon;
};

6. Sledite konvencijam o poimenovanju

Pri poimenovanju komponent vedno uporabite PascalCase, da jih ločite od drugih nekomponentnih datotek JSX. Na primer: Besedilno polje, NavMenu, in Gumb za uspeh.

Uporabite camelCase za funkcije, deklarirane znotraj komponent React, kot je handleInput() oz showElement().

7. Izogibajte se ponavljajoči se kodi

Če opazite, da pišete podvojeno kodo, jo pretvorite v komponente, ki jih je mogoče ponovno uporabiti.

Na primer, bolj smiselno je ustvariti komponento za vaš navigacijski meni, namesto da bi večkrat pisali kodo v vsako komponento, ki potrebuje meni.

To je prednost arhitekture, ki temelji na komponentah. Projekt lahko razdelite na majhne komponente, ki jih lahko ponovno uporabite v svoji aplikaciji.

8. Uporabite destrukturiranje objektov za rekvizite

Namesto posredovanja predmeta props uporabite destrukturiranje objekta za posredovanje imena props. To zavrže potrebo po sklicevanju na predmet props vsakič, ko ga morate uporabiti.

Na primer, naslednja je komponenta, ki uporablja rekvizite takšne, kot so.

const Gumb = (rekviziti) => {
 vrnitev {props.text};
};

Z destrukturiranjem predmeta se neposredno sklicujete na besedilo.

const Gumb = ({text}) => {
 vrnitev {text};
};

9. Dinamično upodabljanje nizov z uporabo zemljevida

Uporaba zemljevid() za dinamično upodabljanje ponavljajočih se blokov HTML. Na primer, lahko uporabite zemljevid() za prikaz seznama elementov v oznake.

const Elementi = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"];
 vrnitev (
 <>
 {arr.map((elem, indeks) => {
{elem}
;
 })}
 );
 };

Za primerjavo je tukaj opisano, kako lahko upodobite seznam brez zemljevid(). Ta pristop se zelo ponavlja.

const Seznam = () => {
 vrnitev (


Element 1

Predmet 2

Element3

Predmet 4

Predmet 5




 );
};

10. Napišite teste za vsako komponento React

Napišite teste za komponente, ki jih ustvarite, saj zmanjšate možnosti napak. Testiranje zagotavlja, da se komponente obnašajo, kot bi pričakovali. Eden najpogostejših ogrodij za testiranje za React je Jest in zagotavlja okolje, v katerem lahko izvajate svoje teste.

Čeprav je React nekoliko prilagodljiv glede tega, kako ga lahko uporabite, vam bo upoštevanje posebnih praks pomagalo kar najbolje izkoristiti svojo izkušnjo.

Ko sledite tem nasvetom, imejte v mislih svoj poseben projekt in cilje; nekateri bodo v določenih primerih bolj relevantni kot drugi.

Kako porabiti API-je v Reactu z uporabo Fetch in Axios

Želite vedeti, kako uporabljati API-je? Razumevanje uporabe API-jev v Reactu je ključni element uporabe API-ja.

Preberite Naprej

O avtorju