„React“ yra viena iš populiariausių „JavaScript“ sąsajų. Skirtingai nuo kitų karkasų, tokių kaip „Angular“, jis yra labai be nuomonės. Todėl jūs turite nuspręsti, kaip norite parašyti ar struktūrizuoti savo „React“ kodą.

Šiame straipsnyje nagrinėjama keletas praktikų, kurių turėtumėte laikytis, kad pagerintumėte „React“ programos našumą.

1. Funkcinių komponentų ir kabliukų naudojimas vietoj klasių

„React“ galite naudoti klasės arba funkcinius komponentus su kabliukais. Tačiau turėtumėte dažniau naudoti funkcinius komponentus ir kabliukus, nes jie suteikia glaustesnį ir įskaitomesnį kodą, palyginti su klasėmis.

Apsvarstykite toliau pateiktą klasės komponentą, kuriame rodomi NASA API duomenys.

klasė „NasaData“ išplečia „React“. Komponentas {
 konstruktorius (rekvizitas) {
 super (rekvizitas);
 this.state = {
 duomenys: [],
 };
 }
 ComponentDidMount() {
 atnešti (" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 this.setState({
 duomenys: json,
 });
 });





instagram viewer


 }
 render() {
 const {duomenys} = this.state;
 jei (!duomenų.ilgis)
 grįžti (


 Gaunami duomenys... 
{" "}



 );
 grįžti (
 <>
 Gaukite duomenis naudodami klasės komponentą 
{" "}
 {data.map((elementas) => (
{item.title}

 ))}
 );
 }
}

Tą patį komponentą galima parašyti naudojant kabliukus.

const NasaData = () => {
 const [duomenys, setdata] = useState (null);
 useEffect(() => {
 atnešti (" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 setdata (json);
 });
 }, [duomenys]);
 grįžti (
 <>
 Gaukite duomenis naudodami klasės komponentą 
{" "}
 {data.map((elementas) => (
{item.title}

 ))}
 );
};

Nors aukščiau pateiktas kodo blokas daro tą patį, ką ir klasės komponentas, jis yra mažiau sudėtingas, minimalus ir lengvai suprantamas, o tai prisideda prie geresnės kūrėjo patirties.

2. Venkite naudoti būseną (jei įmanoma)

„React“ būsena seka duomenis, kuriuos pakeitus, „React“ komponentas vėl pateikiamas. Kurdami „React“ programas kiek įmanoma nenaudokite būsenos, nes kuo daugiau būsenų naudojate, tuo daugiau duomenų turėsite sekti visoje programoje.

Vienas iš būdų sumažinti valstybės naudojimą yra deklaruoti ją tik tada, kai tai būtina. Pavyzdžiui, jei gaunate vartotojo duomenis iš API, išsaugokite viso vartotojo objekto būseną, o ne atskiras ypatybes.

Užuot tai darę:

const [naudotojo vardas, setusername] = useState('')
const [slaptažodis, nustatyti slaptažodį] = useState('')

Daryk tai:

const [naudotojas, nustatytojas] = useState ({})

Priimdamas sprendimą dėl projekto struktūros, rinkitės į komponentus orientuotą. Tai reiškia, kad visi failai, susiję su vienu komponentu, yra viename aplanke.

Jei kurtumėte a Navigacijos juosta komponentą, sukurkite aplanką pavadinimu naršymo juosta kuriame yra Navigacijos juosta patį komponentą, stiliaus lapą ir kitus komponente naudojamus JavaSript ir išteklių failus.

Viename aplanke, kuriame yra visi komponento failai, lengva pakartotinai naudoti, bendrinti ir derinti. Jei norite pamatyti, kaip veikia komponentas, turite atidaryti tik vieną aplanką.

4. Nenaudokite indeksų kaip pagrindinių rekvizitų

React naudoja raktus, kad unikaliai identifikuotų elementus masyve. Naudodama raktus, „React“ gali tiksliai nustatyti, kuris elementas buvo pakeistas, pridėtas ar pašalintas iš masyvo.

Dažniausiai atvaizduodami masyvus galite naudoti indeksą kaip raktą.

const elementai = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"];
 grįžti (
 <>
 {arr.map((element, index) => {
{elem}
;
 })}
 );
};

Nors tai kartais veikia, naudojant indeksą kaip raktą gali kilti problemų, ypač jei tikimasi, kad sąrašas pasikeis. Apsvarstykite šį sąrašą.

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

Šiuo metu pirmasis sąrašo elementas „1 elementas“ indeksas yra nulis, bet jei sąrašo pradžioje įtraukėte kitą elementą, „1 elementas“ indeksas pasikeistų į 1, o tai pakeis jūsų masyvo elgseną.

Sprendimas yra naudoti unikalią reikšmę kaip indeksą, kad būtų užtikrinta sąrašo elemento tapatybė.

5. Jei įmanoma, rinkitės fragmentus, o ne dalybas

„React“ komponentai turi grąžinti kodą, supakuotą į vieną žymą, paprastai a arba React fragmentas. Jei įmanoma, turėtumėte pasirinkti fragmentus.

Naudojant padidina DOM dydį, ypač dideliuose projektuose, nes kuo daugiau žymų ar DOM mazgų turite, tuo daugiau atminties reikia jūsų svetainei ir tuo daugiau galios naršyklė naudoja jūsų svetainei įkelti. Dėl to sumažėja puslapio greitis ir gali sumažėti vartotojo patirtis.

Vienas iš nereikalingų pašalinimo pavyzdžių žymos jų nenaudoja, kai grąžina vieną elementą.

const mygtukas = () => {
 grąžinti Ekranas;
};

6. Laikykitės pavadinimo konvencijų

Įvardydami komponentus visada turėtumėte naudoti PascalCase, kad atskirtumėte juos nuo kitų nekomponentinių JSX failų. Pavyzdžiui: Teksto laukas, NavMenu, ir Sėkmės mygtukas.

Naudokite „camelCase“ funkcijoms, nurodytoms „React“ komponentuose, pvz., rankenaInput() arba showElement().

7. Venkite pasikartojančio kodo

Jei pastebite, kad rašote pasikartojantį kodą, konvertuokite jį į komponentus, kuriuos galima naudoti pakartotinai.

Pavyzdžiui, prasmingiau sukurti naršymo meniu komponentą, o ne pakartotinai rašyti kodą kiekviename komponente, kuriam reikalingas meniu.

Tai yra komponentais pagrįstos architektūros pranašumas. Galite suskirstyti savo projektą į mažus komponentus, kuriuos galite pakartotinai naudoti visoje programoje.

8. Naudokite objektų naikinimą rekvizitais

Užuot perdavęs rekvizito objektą, naudokite objekto naikinimą, kad perduotų rekvizito pavadinimą. Tai atmeta poreikį kiekvieną kartą naudoti rekvizitus.

Pavyzdžiui, toliau pateikiamas komponentas, kuriame rekvizitai naudojami tokie, kokie yra.

const mygtukas = (rekvizitai) => {
 grąžinti {props.text};
};

Naikinant objektą, jūs tiesiogiai nurodote tekstą.

const mygtukas = ({tekstas}) => {
 grąžinti {text};
};

9. Dinamiškai atvaizduokite masyvus naudodami žemėlapį

Naudokite žemėlapis () dinamiškai atvaizduoti pasikartojančius HTML blokus. Pavyzdžiui, galite naudoti žemėlapis () Norėdami pateikti elementų sąrašą žymės.

const elementai = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"];
 grįžti (
 <>
 {arr.map((element, index) => {
{elem}
;
 })}
 );
 };

Palyginimui, štai kaip galite pateikti sąrašą be žemėlapis (). Šis metodas yra labai pasikartojantis.

const sąrašas = () => {
 grįžti (


1 elementas

2 elementas

3 elementas

4 punktas

5 punktas




 );
};

10. Parašykite kiekvieno reaguojančio komponento testus

Rašykite savo sukurtų komponentų testus, nes tai sumažina klaidų galimybę. Testavimas užtikrina, kad komponentai veikia taip, kaip tikitės. Viena iš labiausiai paplitusių „React“ testavimo sistemų yra „Jest“, kuri suteikia aplinką, kurioje galite atlikti savo testus.

Nors „React“ yra šiek tiek lankstus, atsižvelgiant į tai, kaip galite jį naudoti, vadovaudamiesi konkrečia praktika padėsite maksimaliai išnaudoti savo patirtį.

Laikydamiesi šių patarimų, turėkite omenyje savo konkretų projektą ir tikslus; kai kurie tam tikrais atvejais bus aktualesni nei kiti.

Kaip naudoti API „React“ naudojant „Fetch“ ir „Axios“.

Norite sužinoti, kaip naudoti API? Supratimas, kaip naudoti API „React“, yra pagrindinis API naudojimo elementas.

Skaitykite toliau

Apie autorių