- React arhitektūra koncentrējas uz atkārtoti izmantojamiem komponentiem un virtuālu DOM, lai optimizētu lietotāja saskarnes veiktspēju.
- Datu plūsmas pārvaldība, izmantojot rekvizītus un iekšējo stāvokli, ļauj izveidot dinamiskas un interaktīvas tīmekļa lietojumprogrammas.
- JSX vienkāršo lietotāja saskarnes struktūru izveidi, tieši apvienojot JavaScript loģiku ar HTML līdzīgu iezīmēšanu.
- Mūsdienu āķi, piemēram, useState un useEffect, aizstāj sarežģītus klases dzīves ciklus, lai apstrādātu blakusparādības un stāvokļa atjauninājumus.
Ja kādreiz esat domājuši, kā vismodernākās tīmekļa vietnes internetā saglabā tik ātru darbību un atsaucību, pastāv liela iespēja, ka tās nodrošina React . Šo JavaScript bibliotēku, ko izveidojuši Meta darbinieki, ir pilnībā mainījuši front-end izstrādātāju spēles noteikumus, ļaujot mums veidot sarežģītas saskarnes, izmantojot uz komponentiem balstītu pieeju , kas būtībā nozīmē lapas sadalīšanu mazos, pārvaldāmos fragmentos, kurus varat atkārtoti izmantot jebkur.
Sākumā React lietošanas apgūšana var šķist kā neliels pārbaudījums, it īpaši žargona un rīku komplekta dēļ, taču, kad viss būs kārtībā, jūs jutīsieties kā ieguvis superspēju. Neatkarīgi no tā, vai jums ir tīra HTML/CSS pieredze vai arī jūs jau esat JS profesionālis, mērķis ir atteikties no garlaicīgas DOM manipulācijas un pieņemt deklaratīvu programmēšanas stilu, kurā jūs vienkārši aprakstāt, kā vēlaties, lai izskatītos lietotāja interfeiss, un React paveiks smago darbu, atjauninot pārlūkprogrammu.
Galvenā filozofija: komponenti un JSX
Pēc būtības katra React lietotne ir tikai komponentu koks . Iedomājieties komponentus kā LEGO klucīšus; jūs varat izveidot nelielu pogu, meklēšanas joslu vai visu navigācijas izvēlni un pēc tam savienot tos kopā, lai izveidotu pilnvērtīgu lietojumprogrammu. Šie komponenti būtībā ir JavaScript funkcijas, kas atgriež JSX (JavaScript XML) . Lai gan JSX izskatās ļoti līdzīgs HTML, tas patiesībā ir gudrs sintakses paplašinājums, kas ļauj mums rakstīt lietotāja interfeisa struktūru tieši mūsu loģikā.
Tā kā pārlūkprogrammas nevar nolasīt JSX kodu automātiski, mēs izmantojam tādus rīkus kā Babel vai Vite, lai to kompilētu standarta JavaScript formātā. Viena īpatnība, kas jāpatur prātā, ir tā, ka, tā kā JSX ir JS, daži HTML atribūti nedaudz atšķiras. Piemēram, nevar izmantot vārdu “class”, jo tas ir rezervēts vārds JavaScript valodā, tāpēc tā vietā izmantojam vārdu className . Šī loģikas un iezīmēšanas kombinācija padara izstrādes procesu daudz intuitīvāku un uztur jūsu kodu sakārtotu.
Datu apstrāde: Rekvizīti pret State
Lai vietne būtu interaktīva, tās komponentiem ir nepieciešami dati. To var apstrādāt divos galvenajos veidos: rekvizīti (Properties) un stāvoklis (State) . Rekvizīti (saīsinājums no rekvizītiem) ir kā argumenti, kas tiek nodoti funkcijai. Tie ir tikai lasāmi un plūst vienā virzienā: no vecāka uz bērnu. Ja jums ir komponents UserProfile, varat nodot lietotājvārdu kā rekvizītu, lai komponents zinātu, ko parādīt, nezinot, no kurienes šie dati nāk.
Savukārt stāvoklis (State) ir komponentes privātā atmiņa . Lai gan rekvizītus (properties) nosaka vecākelements, stāvoklis tiek pārvaldīts iekšēji. Kad lietotājs noklikšķina uz pogas vai ieraksta formā, jūs atjaunināt stāvokli. Šeit notiek maģija: ikreiz, kad mainās stāvoklis, React automātiski atkārtoti atveido komponentu, lai atspoguļotu jaunos datus. Tas novērš nepieciešamību manuāli atrast elementu DOM un mainīt tā tekstu, kas agrāk sagādāja lielas galvassāpes vanilla JS.
Virtuālā DOM maģija
Viens no galvenajiem iemesliem, kāpēc React ir tik ātrs, ir virtuālais DOM . Faktiskā pārlūkprogrammas DOM atjaunināšana ir skaitļošanas ziņā dārga un lēna. Tā vietā, lai katru reizi, kad kaut kas mainās, pieskartos reālajam DOM, React izveido tā vieglu virtuālo kopiju atmiņā. Kad stāvoklis tiek atjaunināts, React salīdzina jauno virtuālo versiju ar veco — procesu, ko sauc par diffingu — un aprēķina visefektīvāko veidu, kā reālajai pārlūkprogrammai piemērot tikai nepieciešamās izmaiņas.
Šis saskaņošanas process nodrošina, ka jūsu lietotne neaiztur pat tad, ja tiek apstrādāts milzīgs datu apjoms vai bieži tiek atjaunināta. Tā ir slepenā sastāvdaļa, kas nodrošina nemanāmas pārejas un augstas veiktspējas lietotāja pieredzi, kas gandrīz līdzinās vietējai darbvirsmas lietojumprogrammai.
Moderna attīstība ar āķiem
Vecajos laikos stāvokļu un dzīves ciklu pārvaldībai bija jāizmanto sarežģītas ES6 klases. Tagad mums ir āķi (Hook) , kas ļauj izmantot stāvokli un citas React funkcijas vienkāršos funkciju komponentos. Visizplatītākā ir useState , kas sniedz mainīgo datiem un funkciju to atjaunināšanai. Tas ir tīrāks, prasa mazāk standarta koda un ievērojami atvieglo koda testēšanu.
Tad vēl ir useEffect — Šveices armijas nazis blakusefektiem. Neatkarīgi no tā, vai iegūstat datus no API , iestatāt abonementu vai manuāli maināt lapas nosaukumu, useEffect ir šī loģika. Jūs varat kontrolēt, kad tā tiek palaista, norādot atkarību masīvu ; ja masīvs ir tukšs, efekts tiek palaists tikai vienu reizi, kad komponents tiek pirmo reizi pievienots, līdzīgi kā vecā componentDidMount metode.
Jūsu vides sagatavošana
Lai sāktu veidot, jūsu ierīcē būs jāinstalē Node.js un npm (Node Package Manager). Lai gan tehniski jūs varat pievienot React lapai, izmantojot skriptu tagus, neviens to īsti nedara reālos projektos, jo tas ir pārāk lēni. Mūsdienu standarts ir Vite izmantošana , kas nodrošina zibenīgi ātru veidošanas rīku un iepriekš konfigurētu vidi, līdzīgi kā izstrādātāji, kas programmēšanai izmanto Linux, optimizē savu darbplūsmu. Izpildot vienkāršu komandu savā terminālī, jūs varat izveidot projektu, kas ietver lokālu izstrādes serveri ar Hot Module Replacement , kas nozīmē, ka jūsu izmaiņas tiek parādītas pārlūkprogrammā, tiklīdz jūs nospiežat pogu Saglabāt.
Kad projekts ir iestatīts, redzēsiet struktūru, kas ietver src mapi , kurā atrodas jūsu .jsx faili, un index.html failu, kas kalpo kā ieejas punkts. React parasti piesaistās vienam HTML elementam — parasti div elementam ar ID “root” — un ievieto visu lietojumprogrammu šajā vietā, izmantojot metodi ar nosaukumu createRoot.
Paplašināti modeļi: celšanas stāvoklis un saraksti
Lietotnei augot, jūs atklāsiet, ka diviem komponentiem ir jākoplieto vieni un tie paši dati. Tā kā rekvizīti plūst tikai uz leju, risinājums ir stāvokļa pārvietošana uz augšu . Tas nozīmē stāvokļa pārvietošanu uz tuvāko kopīgo vecāka komponentu. Pēc tam vecākkomponents nodod stāvokli uz leju kā rekvizītus abiem bērniem un nodrošina atzvanīšanas funkciju, lai bērni varētu pieprasīt izmaiņas šajā stāvoklī.
Strādājot ar datu masīviem, React izmanto map() metodi , lai pārveidotu datus komponentu sarakstā. Šeit svarīga detaļa ir atslēgas prop . React ir nepieciešams unikāls identifikators katram saraksta elementam, lai izsekotu, kurš no tiem ir mainīts, pievienots vai noņemts. Indeksa izmantošana kā atslēga parasti nav ieteicama, ja sarakstu var mainīt, tāpēc vienmēr vislabāk ir izmantot unikālu ID no jūsu datubāzes , lai nodrošinātu optimālu veiktspēju un izvairītos no dīvainām renderēšanas kļūdām.
Stils un interaktivitāte
Stila veidošana programmā React ir elastīga. Varat pieturēties pie standarta CSS failiem un tos importēt vai izmantot CSS moduļus , lai novērstu stilu noplūdi citās komponentēs. Tiem, kas dod priekšroku integrētākai pieejai, CSS-in-JS bibliotēkas, piemēram, styled-components, ļauj rakstīt stilus tieši JavaScript valodā, atvieglojot krāsu vai izkārtojumu maiņu, pamatojoties uz komponentes rekvizītiem.
Interaktivitātes nodrošināšanai React izmanto sintētiskus notikumus, piemēram, onClick un onChange. Tie ir apvalki ap pārlūkprogrammas vietējiem notikumiem, kas nodrošina, ka jūsu lietotne darbojas vienādi dažādās pārlūkprogrammās. Veidojot veidlapas, zelta standarts ir kontrolēto komponentu modelis, kur ievades vērtība ir tieši saistīta ar stāvokļa mainīgo, tādējādi atvieglojot datu validāciju reāllaikā, pirms lietotājs pat nospiež iesniegšanas pogu.
Apvienojot komponentu modulāro raksturu, virtuālā DOM efektivitāti un āķu vienkāršību, jūs varat izveidot visu, sākot no vienkārša uzdevumu saraksta līdz pilna mēroga uzņēmuma platformai. Ekosistēma ir milzīga, piedāvājot tādus rīkus kā React Router lapu navigācijai un Context API globālai stāvokļu pārvaldībai, nodrošinot, ka neatkarīgi no projekta apjoma tas paliek uzturējams un mērogojams.
