- Reacti arhitektuur keskendub korduvkasutatavatele komponentidele ja virtuaalsele DOM-ile, et optimeerida kasutajaliidese jõudlust.
- Andmevoo haldamine rekvisiitide ja sisemise oleku kaudu võimaldab luua dünaamilisi ja interaktiivseid veebirakendusi.
- JSX lihtsustab kasutajaliidese struktuuride loomist, ühendades JavaScripti loogika otse HTML-laadse märgistusega.
- Kaasaegsed konksud nagu useState ja useEffect asendavad keerulisi klasside elutsükleid, et käsitleda kõrvalmõjusid ja oleku värskendusi.
Kui oled kunagi mõelnud, kuidas interneti kõige viimistletumad veebisaidid nii kiired ja reageerimisvõimelised püsivad, siis on suur tõenäosus, et need töötavad Reacti abil . Meta loodud JavaScripti teek on esiotsa arendajate jaoks mängu täielikult muutnud, võimaldades meil luua keerukaid liideseid komponentidepõhise lähenemisviisi abil , mis tähendab põhimõtteliselt lehe jagamist väikesteks, hallatavateks tükkideks, mida saad kõikjal uuesti kasutada.
Reactiga jalgu märjaks saamine võib alguses tunduda pisut keeruline, eriti žargooni ja tööriistakettide tõttu, aga kui see paika loksub, tunned, nagu oleksid omandanud supervõime. Olenemata sellest, kas sul on puhas HTML/CSS-i taust või oled juba JS-i professionaal, on eesmärk loobuda tüütust DOM-manipuleerimisest ja omaks võtta deklaratiivne programmeerimisstiil, kus sa lihtsalt kirjeldad, milline peaks kasutajaliides välja nägema, ja React tegeleb brauseri värskendamise raske tööga.
Põhifilosoofia: komponendid ja JSX
Oma olemuselt on iga Reacti rakendus lihtsalt komponentide puu . Mõelge komponentidest kui LEGO klotsidest; saate ehitada pisikese nupu, otsinguriba või terve navigeerimismenüü ja seejärel need kokku klõpsida, et luua täielik rakendus. Need komponendid on sisuliselt JavaScripti funktsioonid, mis tagastavad JSX-i (JavaScript XML) . Kuigi JSX näeb välja kohutavalt sarnane HTML-iga, on see tegelikult nutikas süntaksilaiend, mis võimaldab meil kirjutada oma kasutajaliidese struktuuri otse meie loogika sisse.
Kuna brauserid ei suuda JSX-i natiivselt lugeda, kasutame selle kompileerimiseks standardseks JavaScriptiks selliseid tööriistu nagu Babel või Vite . Üks eripära, mida meeles pidada, on see, et kuna JSX on JS, on teatud HTML-i atribuudid veidi erinevad. Näiteks ei saa kasutada sõna „class”, kuna see on JavaScriptis reserveeritud sõna, seega kasutame selle asemel sõna className . See loogika ja märgistuse kombinatsioon muudab arendusprotsessi palju intuitiivsemaks ja hoiab teie koodi korrastatuna.
Andmete käitlemine: rekvisiidid vs. olek
Interaktiivseks saidi loomiseks vajavad komponendid andmeid. Selle käsitlemiseks on kaks peamist viisi: rekvisiidid (Properties) ja olek (State) . Rekvisiidid (lühend sõnast properties) on nagu funktsioonile edastatud argumendid. Need on kirjutuskaitstud ja voolavad ühes suunas: ülemüksuselt lapseüksusele. Kui teil on komponent UserProfile, võite edastada kasutajanime rekvisiidina, et komponent teaks, keda kuvada, ilma et peaks teadma, kust need andmed pärinevad.
Olek seevastu on komponendi privaatmälu . Kuigi propsid dikteerib vanem, hallatakse olekut sisemiselt. Kui kasutaja klõpsab nuppu või sisestab vormi, värskendate olekut. Siin toimub maagia: iga kord, kui olek muutub, renderdab React komponendi automaatselt uuesti, et kajastada uusi andmeid. See välistab vajaduse DOM-ist käsitsi elementi otsida ja selle teksti muuta, mis varem oli tavalises JS-is tohutu peavalu.
Virtuaalse DOM-i maagia
Üks peamisi põhjuseid, miks React nii kiire on, on virtuaalne DOM . Brauseri tegeliku DOM-i värskendamine on arvutuslikult kulukas ja aeglane. Selle asemel, et iga kord, kui midagi muutub, tegelikku DOM-i puudutada, loob React sellest mällu kerge virtuaalse koopia . Oleku värskendamisel võrdleb React uut virtuaalset versiooni vanaga – protsessi nimetatakse erinevuste arvutamiseks – ja arvutab välja kõige tõhusama viisi ainult vajalike muudatuste rakendamiseks tegelikus brauseris.
See ühilduvusprotsess tagab, et teie rakendus ei jää pidurdamata isegi tohutu hulga andmete või sagedaste värskenduste käitlemisel. See on salajane koostisosa, mis võimaldab sujuvaid üleminekuid ja suure jõudlusega kasutajakogemust, mis tundub peaaegu nagu natiivne töölauarakendus.
Kaasaegne arendus konksudega
Vanasti tuli oleku ja elutsüklite haldamiseks kasutada keerukaid ES6 klasse. Nüüd on meil konksud (Hook) , mis võimaldavad kasutada olekut ja muid Reacti funktsioone lihtsates funktsioonikomponentides. Kõige levinum on useState , mis annab sulle muutuja andmete jaoks ja funktsiooni nende värskendamiseks. See on puhtam, nõuab vähem malli ja muudab koodi testimise palju lihtsamaks.
Siis on veel useEffect , kõrvalmõjude jaoks nn Šveitsi armee nuga. Olenemata sellest, kas tood andmeid API-st , seadistad tellimuse või muudad käsitsi lehe pealkirja, on see loogika useEffect. Saate kontrollida selle käivitumist, pakkudes sõltuvusmassiivi ; kui massiiv on tühi, käivitub efekt ainult üks kord komponendi esmakordsel paigaldamisel, sarnaselt vanale componentDidMount meetodile.
Keskkonna ettevalmistamine
Ehitamise alustamiseks pead oma arvutisse installima Node.js ja npm (Node Package Manager). Kuigi tehniliselt saad Reacti lehele lisada skriptisiltide abil, ei tee keegi seda päris projektide puhul, kuna see on liiga aeglane. Kaasaegne standard on Vite , mis pakub välkkiiret ehitustööriista ja eelkonfigureeritud keskkonda, sarnaselt sellele, kuidas Linuxit programmeerivad arendajad oma töövoogu optimeerivad. Lihtsa käsu käivitamisega terminalis saad luua projekti, mis sisaldab kohalikku arendusserverit Hot Module Replacementiga , mis tähendab, et sinu muudatused kuvatakse brauseris kohe, kui vajutad salvestamisnuppu.
Kui projekt on seadistatud, näete struktuuri, mis hõlmab src-kausta , kus asuvad teie .jsx-failid, ja index.html-faili, mis toimib sisenemispunktina. React haakub tavaliselt ühe HTML-elemendiga – tavaliselt div-elemendiga, mille ID on „root” – ja süstib kogu rakenduse sellesse kohta meetodi nimega createRoot abil.
Täiustatud mustrid: oleku ja loendite tõstmine
Rakenduse kasvades avastad, et kaks komponenti peavad jagama samu andmeid. Kuna propsid liiguvad ainult allapoole, on lahenduseks oleku tõstmine . See tähendab oleku liigutamist lähima ühise vanemkomponendi juurde. Seejärel edastab vanemkomponent oleku propsidena mõlemale alamkomponendile ja pakub tagasihelistusfunktsiooni , et alamkomponendid saaksid selle oleku muudatusi taotleda.
Andmemassiividega tegeledes kasutab React map() meetodit , et teisendada andmed komponentide loendiks. Oluline detail on siin võtme prop . React vajab iga loendi elemendi jaoks unikaalset identifikaatorit, et jälgida, milline neist muutus, lisati või eemaldati. Indeksi kasutamine võtmena on üldiselt halb mõte, kui loendit saab ümber järjestada, seega on optimaalse jõudluse tagamiseks ja veidrate renderdusvigade vältimiseks alati kõige parem kasutada oma andmebaasist pärit unikaalset ID-d .
Stiil ja interaktiivsus
Reacti stiilimine on paindlik. Saate jääda standardsete CSS-failide juurde ja need importida või kasutada CSS-mooduleid , et vältida stiilide lekkimist teistesse komponentidesse. Neile, kes eelistavad integreeritumat lähenemisviisi, võimaldavad CSS-in-JS teegid , näiteks stiilitud komponendid, stiile otse JavaScripti kirjutada, muutes värvide või paigutuste muutmise komponendi rekvisiitide põhjal lihtsaks.
Interaktiivsuse tagamiseks kasutab React sünteetilisi sündmusi nagu onClick ja onChange. Need on brauseri natiivsete sündmuste ümber olevad mähised, mis tagavad teie rakenduse järjepideva toimimise erinevates brauserites. Vormide loomisel on kuldstandardiks kontrollitud komponentide muster, kus sisendväärtus on otse seotud olekumuutujaga, mis lihtsustab andmete reaalajas valideerimist enne, kui kasutaja isegi saatmisnupule vajutab.
Komponentide modulaarse olemuse, virtuaalse DOM-i tõhususe ja konksude lihtsuse kombineerimise abil saate luua kõike alates lihtsast ülesannete loendist kuni täismõõdulise ettevõtte platvormini. Ökosüsteem on tohutu, pakkudes tööriistu nagu React Router lehe navigeerimiseks ja Context API globaalseks oleku haldamiseks, tagades, et olenemata projekti mahust jääb see hooldatavaks ja skaleeritavaks.
