React ir viens no populārākajiem JavaScript priekšgala ietvariem. Atšķirībā no citiem ietvariem, piemēram, Angular, tas ir ļoti bez viedokļu. Tāpēc jums ir jāizlemj, kā rakstīt vai strukturēt savu React kodu.

Šajā rakstā ir aplūkotas dažas metodes, kas jāievēro, lai uzlabotu React lietojumprogrammas veiktspēju.

1. Funkcionālo komponentu un āķu izmantošana klašu vietā

Programmā React jūs varat izmantojiet klases vai funkcionālās sastāvdaļas ar āķiem. Tomēr funkcionālos komponentus un āķus vajadzētu izmantot biežāk, jo tie rada kodolīgāku un lasāmāku kodu, salīdzinot ar klasēm.

Apsveriet šādu klases komponentu, kas parāda datus no NASA API.

klase NasaData paplašina React. Komponents {
 konstruktors (rekvizīti) {
 super (rekvizīti);
 this.state = {
 dati: [],
 };
 }
 komponentsDidMount() {
 atnest(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 this.setState({
 dati: json,
 });
 });
 }
 render() {
 const {dati} = this.state;
 if (!data.length)
 atgriezties (





instagram viewer




 Notiek datu iegūšana... 
{" "}



 );
 atgriezties (
 <>
 Iegūstiet datus, izmantojot klases komponentu 
{" "}
 {data.map((vienums) => (
{item.title}

 ))}
 );
 }
}

To pašu komponentu var uzrakstīt, izmantojot āķus.

const NasaData = () => {
 const [dati, setdata] = useState (null);
 useEffect(() => {
 atnest(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 setdata (json);
 });
 }, [dati]);
 atgriezties (
 <>
 Iegūstiet datus, izmantojot klases komponentu 
{" "}
 {data.map((vienums) => (
{item.title}

 ))}
 );
};

Lai gan iepriekš minētais koda bloks veic to pašu, ko klases komponents, tas ir mazāk sarežģīts, minimāls un viegli saprotams, kas veicina labāku izstrādātāja pieredzi.

2. Izvairieties no statusa izmantošanas (ja iespējams)

Reakcijas stāvoklis izseko datus, kuru maiņas gadījumā komponents React tiek aktivizēts atkārtoti. Veidojot React lietojumprogrammas, pēc iespējas vairāk izvairieties no statusa izmantošanas, jo jo vairāk statusu izmantojat, jo vairāk datu jums ir jāseko līdzi visā lietotnē.

Viens no veidiem, kā samazināt valsts izmantošanu, ir to deklarēt tikai nepieciešamības gadījumā. Piemēram, ja ienesat lietotāja datus no API, saglabājiet visu lietotāja objektu stāvoklī, nevis atsevišķus rekvizītus.

Tā vietā, lai to izdarītu:

const [lietotājvārds, iestatītāja vārds] = useState('')
const [parole, iestatīt paroli] = useState('')

Dari šo:

const [lietotājs, iestatītājs] = useState({})

Pieņemot lēmumu par projekta struktūru, dodieties uz komponentiem orientētu. Tas nozīmē, ka visi faili, kas attiecas uz vienu komponentu, ir vienā mapē.

Ja jūs veidojat a Navigbar komponentu, izveidojiet mapi ar nosaukumu navigācijas josla kas satur Navigbar pašu komponentu, stila lapu un citus komponentā izmantotos JavaSript un līdzekļu failus.

Viena mape, kurā ir visi komponenta faili, atvieglo atkārtotu izmantošanu, kopīgošanu un atkļūdošanu. Ja vēlaties redzēt, kā darbojas komponents, jums ir jāatver tikai viena mape.

4. Neizmantojiet indeksus kā galvenos rekvizītus

React izmanto atslēgas, lai unikāli identificētu vienumus masīvā. Izmantojot taustiņus, React var precīzi noteikt, kurš vienums ir mainīts, pievienots vai noņemts no masīva.

Lielāko daļu laika, renderējot masīvus, kā atslēgu varat izmantot indeksu.

const vienumi = () => {
 const arr = ["prece1", "item2", "item3", "item4", "item5"];
 atgriezties (
 <>
 {arr.map((element, index) => {
{elem}
;
 })}
 );
};

Lai gan dažreiz tas darbojas, indeksa kā atslēgas izmantošana var radīt problēmas, īpaši, ja sarakstā ir gaidāmas izmaiņas. Apsveriet šo sarakstu.

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

Pašlaik pirmais saraksta vienums "1. vienums" ir nulles rādītājā, bet, ja saraksta sākumā pievienojāt citu vienumu,1. vienums” indekss mainītos uz 1, kas maina jūsu masīva darbību.

Risinājums ir izmantot unikālu vērtību kā indeksu, lai nodrošinātu saraksta vienuma identitātes saglabāšanu.

5. Ja iespējams, izvēlieties fragmentus, nevis dalījumus

React komponentiem ir jāatgriež kods, kas ietīts vienā tagā, parasti a vai React fragments. Ja iespējams, jums vajadzētu izvēlēties fragmentus.

Izmantojot palielina DOM lielumu, īpaši lielos projektos, jo jo vairāk tagu vai DOM mezglu jums ir, jo vairāk atmiņas ir nepieciešams jūsu vietnei un jo vairāk enerģijas pārlūkprogramma izmanto jūsu vietnes ielādei. Tas samazina lapas ātrumu un, iespējams, sliktu lietotāja pieredzi.

Viens piemērs, kā novērst nevajadzīgo tags tos neizmanto, atgriežot vienu elementu.

const poga = () => {
 atgriezties Displejs;
};

6. Ievērojiet nosaukumu piešķiršanas konvencijas

Nosaucot komponentus, vienmēr izmantojiet PascalCase, lai tos atšķirtu no citiem JSX failiem, kas nav komponenti. Piemēram: Teksta lauks, NavMenu, un Veiksmes poga.

Izmantojiet camelCase funkcijām, kas deklarētas React komponentos, piemēram, handInput() vai parādītElement().

7. Izvairieties no atkārtota koda

Ja pamanāt, ka rakstāt dublētu kodu, pārveidojiet to komponentos, kurus var izmantot atkārtoti.

Piemēram, ir lietderīgāk izveidot komponentu savai navigācijas izvēlnei, nevis atkārtoti rakstīt kodu katrā komponentā, kam nepieciešama izvēlne.

Tā ir uz komponentiem balstītas arhitektūras priekšrocība. Varat sadalīt savu projektu mazos komponentos, kurus varat atkārtoti izmantot savā lietojumprogrammā.

8. Izmantojiet objektu iznīcināšanu rekvizīti

Tā vietā, lai nodotu rekvizītu objektu, izmantojiet objekta iznīcināšanu, lai nodotu rekvizītu nosaukumu. Tas novērš nepieciešamību atsaukties uz rekvizītu objektu katru reizi, kad tas ir jāizmanto.

Piemēram, šis ir komponents, kas izmanto rekvizītus tādus, kādi tie ir.

const Button = (rekvizīti) => {
 atgriezties {props.text};
};

Izmantojot objektu iznīcināšanu, jūs tieši atsaucaties uz tekstu.

const Button = ({teksts}) => {
 atgriezties {text};
};

9. Dinamiski renderējiet masīvus, izmantojot karti

Izmantot karte () lai dinamiski renderētu atkārtotus HTML blokus. Piemēram, jūs varat izmantot karte () lai atveidotu vienumu sarakstu tagus.

const vienumi = () => {
 const arr = ["prece1", "item2", "item3", "item4", "item5"];
 atgriezties (
 <>
 {arr.map((element, index) => {
{elem}
;
 })}
 );
 };

Salīdzināšanas nolūkos šeit ir norādīts, kā jūs varat renderēt sarakstu bez karte (). Šī pieeja ļoti atkārtojas.

const saraksts = () => {
 atgriezties (


1. vienums

2. vienums

3. vienums

4. vienums

5. vienums




 );
};

10. Uzrakstiet testus katrai reaģējošai sastāvdaļai

Uzrakstiet izveidoto komponentu testus, jo tas samazina kļūdu iespējamību. Testēšana nodrošina, ka komponenti darbojas tā, kā jūs gaidāt. Viens no visizplatītākajiem React testēšanas ietvariem ir Jest, un tas nodrošina vidi, kurā varat izpildīt savus testus.

Lai gan React ir zināmā mērā elastīgs attiecībā uz to, kā jūs varat to izmantot, konkrētas prakses ievērošana palīdzēs jums maksimāli izmantot savu pieredzi.

Sekojot šiem padomiem, paturiet prātā savu konkrēto projektu un mērķus; daži no tiem būs atbilstošāki noteiktos gadījumos nekā citi.

Kā lietot API programmā React, izmantojot funkciju Fetch un Axios

Vai vēlaties uzzināt, kā lietot API? Izpratne par API izmantošanu programmā React ir galvenais API lietošanas elements.

Lasiet Tālāk

Par autoru