Mi a React? - Hogyan működik - Hogyan kell használni Használat és előnyei

Tartalomjegyzék:

Anonim

A React áttekintése

A React az egyik nyílt forráskódú JavaScript könyvtár. Interaktív felhasználói felületek felépítésére szolgál. Ez egy hatékony, deklaratív és rugalmas könyvtár. A Model-View- Controller (MVC) V, azaz View elemével foglalkozik. Ez nem egy teljes keret, hanem csak egy előlapi könyvtár. Lehetővé teszi összetett felhasználói felületek létrehozását vagy elkészítését, összetevőkként ismert, elkülönített és apró kóddarabok felhasználásával. Az alkotóelemek fő előnye, hogy az egyik alkotóelemre történő változtatás nem érinti a teljes alkalmazást.

Ezt a szoftvermérnök, Jordan Walke fejlesztette ki a Facebook-on. A Facebook telepítette a hírcsatornájukra, és javította a felhasználói felületet. 2013 májusában tették közzé.

Kifejezetten egyoldalas alkalmazásokhoz használják. Célja, hogy méretezhető, egyszerű és gyors. Ezt különféle JavaScript-keretekkel vagy olyan könyvtárakkal kombinálva lehet használni, mint például az Angular JS.

A React jellemzői

Nézzük meg a React alapvető és legigényesebb tulajdonságait:

1. JSX

A JSX JavaScript XML-t jelent. Ez a JS nyelv szintaxisának kiterjesztése. Ez lehetővé teszi az összetevők megjelenítését a HTML-hez hasonló szintaxissal. A React a JSX használatával írja összetevőit. Használhat tiszta JavaScriptet is, de inkább a JSX-t részesíti előnyben. A Babel egy előfeldolgozó használja a JavaScript fájlokban található HTML-hez hasonló szöveg konvertálására JS-objektumokká. A HTML-kód beágyazható a JavaScript-be, hogy a HTML-kód könnyebben és könnyebben érthető legyen, javítja a JavaScript teljesítményét, és az alkalmazás robusztusvá teszi.

2. Virtuális dokumentumobjektum-modell

Reagáljon, és hozzon létre egy memóriában lévő adatszerkezet-gyorsítótárat, majd kiszámítja a különbséget az előző és az új DOM között, majd frissíti a végrehajtott módosításokat vagy mutációkat. Csak a változásokat frissíti, az egész alkalmazást nem. Ez elősegíti a sebesség és a teljesítmény növelését, és csökkenti a memória pazarlását.

3. Tesztelhetőség

A reaktív nézeteket annak az állapotnak a függvényeként használjuk, ahol az állapot meghatározza az összetevő viselkedését. Ezért megváltoztathatjuk az állapotot, majd átadhatjuk azt a ReactJS nézetéhez, majd meghatározhatjuk a kimenetet és a műveleteket, funkciókat és eseményeket. Ez megkönnyíti a tesztelést és a hibakeresést.

4. SSR

Ez a szerveroldali renderelés. Ez lehetővé teszi az összetevők kezdeti állapotának előzetes megjelenítését a szerver oldalon. A böngésző úgy generálható, hogy nem várja meg az összes JavaScript végrehajtását vagy betöltését. Ez lehetővé teszi a weboldalak gyorsabb betöltését. Segít a felhasználónak a weboldalak megtekintésében, még akkor is, ha a React még mindig tölti le a JavaScriptet, összekapcsolja az eseményeket, vagy virtuális DOM-ot hoz létre a háttérrendszeren.

5. Egyirányú adatkötés

Ez lehetővé teszi az egyirányú adatáramlást, azaz az egyirányú adatkötést. Ennek a szolgáltatásnak köszönhetően jobb az ellenőrzés az alkalmazás felett. Lehetővé teszi, hogy az alkalmazás állapotát meghatározott áruházakban tárolja, és ezért az összes többi alkatrész lazán kapcsolódik egymáshoz. Ez növeli az alkalmazás rugalmasságát és hatékonyságát.

6. Egyszerűség

A JSX fájlok az alkalmazást egyszerűvé és érthetővé teszik. A szabványos JavaScript használható a kódoláshoz, de a JSX használata megkönnyíti. Számos életciklus-módszer és annak komponens-alapú megközelítése megkönnyíti a tanulást és végrehajtást.

7. Tanulási görbe

Más keretekhez képest a React tanulási görbéje alacsony. Az alapszintű programozási nyelvvel rendelkező kezdők is megtanulják, hogyan kell könnyen reagálni.

Hogyan működik?

Amikor a Facebook fejlesztői csapata ügyféloldali alkalmazásokat készített, úgy találta, hogy a Document Object Model (DOM) lassú. A gyorsabbá tétel érdekében egy virtuális DOM, amely a DOM fa reprezentációja JavaScript-ben, kerül bevezetésre a Reaktumban.

A React a virtuális DOM-on működik. A módosítások végrehajtása után nem manipulálja a dokumentumot a böngészőben, hanem módosítja a virtuális DOM-ot. Amikor a virtuális DOM teljesen frissül, akkor a böngésző DOM-ját a lehető leghatékonyabban frissíti. A React virtuális DOM-ja teljes mértékben a memóriában található. Ez képviseli a böngésző DOM-ját, tehát amikor a React összetevő meg van írva, elkészül egy olcsó virtuális összetevő, amelyet a React DOM-ra vált. A React-ot a böngészőben való használatra készítették, de a Node.js-vel a szerverrel is használható.

Hogyan használjuk?

A React használata egyszerű, mivel tartalmaz egy JS fájlt HTML-ben. Nézzük meg a React használatát egy egyszerű példa segítségével:

Kód:


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')
);

Kicsit nehéznek tűnik, de könnyű végrehajtani és megtanulni.

Ki használja a reagálást?

A React egyre népszerűbbé válik a mai piacon, és jellemzői segítenek a nagyvállalatoknak tapasztalataik és interfészeik fejlesztésében.

Az olyan internetes óriások, mint a Facebook, az Instagram, a Netflix, a New York Times, a Yahoo Mail, a Khan Akadémia, a WhatsApp, a Vivaldi Browser, a Codecademy és a Dropbox, a Reaktust használják. Az orosz Sberbank a React o-t is felhasználta bankja honlapjának fejlesztésére.

Számos olyan webhely, mint a github.com, reddit.com, outlook.live.com, bitbucket.org, account.godaddy.com és még sok más, szintén használja a React alkalmazást.

A React előnyei

  • SEO-barát
  • Könnyen létrehozható teszt esetek az UI számára.
  • A React alkatrészek egyszerűen újra felhasználhatók.
  • Biztosítja a gyorsabb megjelenítést.
  • A hibakeresés egyszerű.
  • Könnyű migráció.
  • Fokozza a termelékenységet.
  • Az összetevők írása egyszerű.
  • Stabil kód.
  • Hasznos fejlesztői eszközkészlettel rendelkezik.
  • A Reative natív elérhető a mobilalkalmazások fejlesztéséhez
  • Könnyű megtanulni.
  • Fokozza a teljesítményt.

A React hátrányai

  • Magas fejlődési ütem.
  • Rossz dokumentáció.
  • További SEO probléma.
  • Csak nézet-orientált.
  • Nagy méretű React könyvtár.
  • Tanulási görbe kezdőknek.
  • Az adatváltozások kézi feldolgozását igényli.
  • Bizonyos esetekben további kódra van szükség.

Ajánlott cikk

Ez egy útmutató a Mi reagálunk oldalra. Itt megvitattuk a fogalmakat, a meghatározást és a megértést a React előnyeivel és hátrányaival együtt. A további javasolt cikkeken keresztül további információkat is megtudhat -

  1. Mi az agilis programozás?
  2. Mi a sokrétű java?
  3. A Málna Pi felhasználásai
  4. Mi a JMS? | Meghatározás | Magyarázat
  5. Reagál natív vs reagál
  6. Stílusgombok létrehozása a natív reagálásban