Kaj je React? - Kako deluje - Kako uporabljati - Uporaba in prednosti

Kazalo:

Anonim

Pregled reakcije

React je ena od odprtokodnih JavaScript knjižnic. Uporablja se za gradnjo interaktivnih uporabniških vmesnikov. Je učinkovita, deklarativna in prilagodljiva knjižnica. Ukvarja se s komponento V, tj. Pogledom v Model-View-Controller (MVC). Ne gre za celoten okvir, ampak samo za sprednjo knjižnico. Omogoča ustvarjanje ali izdelavo zapletenih uporabniških vmesnikov z uporabo izoliranih in majhnih kosov kode, znanih kot komponente. Glavna prednost komponent je, da sprememba katere koli komponente ne vpliva na celotno aplikacijo.

To je razvil programski inženir, Jordan Walke, ki deluje na Facebooku. Facebook jo je napotil v svojo novico in jo uporabil za izboljšanje njihovega uporabniškega vmesnika. Objavljena je bila maja 2013.

Uporablja se posebej za aplikacije na eni strani. Njegov namen je biti prilagodljiv, preprost in hiter. To je mogoče uporabiti v kombinaciji z različnimi okviri JavaScript ali knjižnicami, kot je Angular JS.

Značilnosti React

Poglejmo bistvene in najzahtevnejše lastnosti React-a:

1. JSX

JSX pomeni JavaScript XML. Je razširitev na sintakso jezika JS. Omogoča način upodabljanja komponent z uporabo sintakse, podobne HTML-ju. React uporablja JSX za pisanje svojih komponent. Uporablja lahko tudi čisti JavaScript, vendar raje JSX. Uporablja ga Babel, predprocesor za pretvorbo besedila, podobnega HTML-ju, ki ga najdemo v datotekah JavaScript, v standardne JS predmete. Koda HTML je lahko vdelana v JavaScript, da bi bila koda HTML bolj in lahko razumljiva in izboljša delovanje JavaScripta ter naredi aplikacijo robustno.

2. Model predmeta virtualnega dokumenta

React ustvari predpomnilnik podatkov v pomnilniku, nato izračuna razliko med prejšnjim DOM in novim in nato posodobi izvedene spremembe ali mutacije. Posodablja samo spremembe, ne pa celotne aplikacije. To pomaga povečati hitrost in zmogljivost ter zmanjša izgubo spomina.

3. Testabilnost

React pogledi se uporabljajo kot funkcije države, v kateri država določa vedenje komponente. Zato lahko spremenimo stanje in ga nato posredujemo v ogled ReactJS in nato določimo izhod ter dejanja, funkcije in dogodke. To olajša testiranje in odpravljanje napak.

4. SSR

Pomeni za upodabljanje na strani strežnika. Omogoča predhodno upodabljanje začetnega stanja komponent na strani strežnika. Brskalnik lahko upodablja, ne da bi čakal, da se JavaScript izvaja ali naloži. Zaradi tega se spletne strani hitreje nalagajo. Uporabniku pomaga pri ogledovanju spletnih strani, tudi ko React še vedno prenaša JavaScript, povezuje dogodke ali ustvarja virtualni DOM ob zaledju.

5. Enosmerna vezava podatkov

Omogoča enosmerni pretok podatkov, tj enosmerno vezavo podatkov. Zaradi te funkcije je boljši nadzor nad aplikacijo. Omogoča, da je stanje aplikacije vsebovano v posebnih trgovinah, zato vse ostale komponente ostanejo ohlapno povezane. To povečuje fleksibilnost in učinkovitost aplikacije.

6. Enostavnost

Datoteke JSX naredijo aplikacijo preprosto in razumljivo. Za kodiranje lahko uporabite standardni JavaScript, vendar je uporaba JSX lažja. Več metod življenjskega cikla in njegov komponentni pristop olajšajo učenje in izvajanje.

7. Krivulja učenja

V primerjavi z drugimi okviri je krivulja učenja React nizka. Začetniki, ki imajo osnovni programski jezik, se lahko tudi enostavno naučijo reagirati.

Kako deluje?

Ko je Facebook razvijalčeva ekipa sestavljala aplikacije na strani odjemalca, je ugotovila, da je model objekta predmeta Document (DOM) počasen. Za hitrejše delovanje je navidezni DOM, ki je drevesna predstavitev DOM-a v JavaScript, izveden v React.

React deluje na Virtual DOM. Z dokumentom v brskalniku ne manipulira po spremembah, temveč naredi virtualne DOM. Ko je virtualni DOM popolnoma posodobljen, potem posodobi DOM brskalnika na najbolj učinkovit način. Navidezni DOM React v celoti prebiva v spominu. Predstavlja DOM spletnega brskalnika, tako da, ko je napisana komponenta React, naredi virtualno komponento, ki jo je poceni ustvariti, ki jo React pretvori v DOM. React je bil uporabljen za uporabo v brskalniku, vendar z Node.js, lahko ga uporabljate tudi s strežnikom.

Kako ga uporabljamo?

Uporaba React je preprosta, vključno z vključitvijo datoteke JS v HTML. Oglejmo si uporabo React s preprostim primerom:

Koda:


First React Code



ReactDOM. render( First Code, document. querySelector ('#application')
);



First React Code



ReactDOM. render( First Code, document. querySelector ('#application')
);



First React Code



ReactDOM. render( First Code, document. querySelector ('#application')
);

Zdi se nekoliko težavno, vendar ga je enostavno izvajati in učiti.

Kdo uporablja reakcijo?

React postaja priljubljen na današnjem trgu, njegove lastnosti pa pomagajo velikim podjetjem pri izboljšanju njihovih izkušenj in vmesnikov.

Internetni velikani, kot so Facebook, Instagram, Netflix, New York Times, Yahoo Mail, Khan Academy, WhatsApp, Vivaldi Browser, Codecademy in Dropbox, uporabljajo React na tak ali drugačen način. Sberbank Rusije je prav tako uporabil React o za razvoj spletnega mesta svoje banke.

Mnoga spletna mesta, kot so github.com, reddit.com, outlook.live.com, bitbucket.org, account.godaddy.com in mnoga druga, prav tako uporabljajo React.

Prednosti React-a

  • SEO prijazen
  • Ustvarjanje preskusnih primerov za uporabniški vmesnik je enostavno.
  • React komponente je mogoče enostavno uporabiti enostavno.
  • Zagotavlja hitrejše upodabljanje.
  • Odpravljanje napak je enostavno.
  • Enostavnost migracij
  • Povečuje produktivnost.
  • Pisanje komponent je enostavno.
  • Stabilna koda.
  • Ima uporaben nabor orodij za razvijalce.
  • Za razvoj aplikacij za mobilne naprave je na voljo React native
  • Enostaven za učenje.
  • Izboljša zmogljivost.

Slabosti React-a

  • Visok tempo razvoja.
  • Slaba dokumentacija.
  • Dodatne težave pri SEO.
  • Samo usmerjeno v pogled.
  • Knjižnica React velike velikosti
  • Krivulja učenja za začetnike.
  • Zahteva ročno obdelavo sprememb podatkov.
  • V nekaterih primerih potrebujete več kode.

Priporočeni članek

To je vodnik o tem, kaj je React. Tu smo razpravljali o konceptih, definiciji in razumevanju s prednostjo in slabostjo React-a. Če želite izvedeti več, lahko preberete tudi druge naše predlagane članke -

  1. Kaj je Agile programiranje?
  2. Kaj je večstransko branje v javi?
  3. Uporaba Raspberry Pi
  4. Kaj je JMS? | Opredelitev | Pojasnilo
  5. React Native vs React
  6. Ustvarjanje gumbov stilov v React Native