Prehľad reakcie
React je jednou z otvorených knižníc JavaScript. Používa sa na vytváranie interaktívnych používateľských rozhraní. Je to efektívna, deklaratívna a flexibilná knižnica. Zaoberá sa komponentom V, tj View, Model-View-Controller (MVC). Nie je to celý rámec, ale iba knižnica frontendov. Umožňuje vytvárať alebo vytvárať zložité používateľské rozhrania pomocou izolovaných a malých častí kódu známych ako komponenty. Hlavnou výhodou komponentov je to, že zmena ktoréhokoľvek komponentu nemá vplyv na celú aplikáciu.
Vyvinul ho softvérový inžinier Jordan Walke, ktorý pracuje na Facebooku. Facebook ju nasadil do svojho spravodajstva a použil ho na zlepšenie svojho používateľského rozhrania. Zverejnil sa v máji 2013.
Používa sa osobitne pre jednostránkové aplikácie. Jeho účelom je byť škálovateľný, jednoduchý a rýchly. To možno použiť v kombinácii s rôznymi rámcami JavaScriptu alebo knižnicami, ako je napríklad Angular JS.
Funkcie React
Pozrime sa na základné a najnáročnejšie vlastnosti React:
1. JSX
JSX znamená JavaScript XML. Je to rozšírenie syntaxe jazyka JS. Poskytuje spôsob vykresľovania komponentov pomocou syntaxe podobnej HTML. React používa na písanie svojich komponentov JSX. Môže používať čistý JavaScript, ale uprednostňuje JSX. Používa ho Babel, predprocesor na prevod textu podobného HTML, ktorý sa nachádza v súboroch JavaScript, na štandardné objekty JS. HTML kód môže byť vložený do JavaScriptu, aby bol HTML kód ľahko a zrozumiteľnejší a zvyšuje výkon JavaScriptu a robí aplikáciu robustnou.
2. Objektový model virtuálneho dokumentu
React urobí vyrovnávaciu pamäť dátovej pamäte v pamäti, potom vypočíta rozdiel medzi predchádzajúcou DOM a novou a potom aktualizuje vykonané zmeny alebo mutácie. Aktualizuje iba zmeny, nie celú aplikáciu. Pomáha to zvyšovať rýchlosť a výkon a znižuje plytvanie pamäťou.
3. Testovateľnosť
Názvy reakcií sa používajú ako funkcie stavu, v ktorom stav určuje správanie komponentu. Preto môžeme vykonať zmeny stavu a potom ich preniesť do pohľadu na ReactJS a potom určiť výstup a akcie, funkcie a udalosti. To uľahčuje testovanie a ladenie.
4. SSR
Znamená to serverové bočné vykresľovanie. Umožňuje vopred vykresliť počiatočný stav komponentov na strane servera. Prehliadač sa môže vykresliť bez čakania na spustenie alebo načítanie všetkého JavaScriptu. Tým sa webové stránky načítajú rýchlejšie. Pomáha užívateľovi prezerať si webové stránky, aj keď React stále sťahuje JavaScript, spája udalosti alebo vytvára virtuálnu DOM na pozadí.
5. Jednosmerná väzba údajov
Umožňuje jednosmerný tok údajov, tj jednosmerné viazanie údajov. Vďaka tejto funkcii je lepšia kontrola nad aplikáciou. Stav aplikácie je obsiahnutý v konkrétnych obchodoch, a preto všetky ostatné komponenty zostávajú voľne spojené. To zvyšuje flexibilitu a efektívnosť aplikácie.
6. Jednoduchosť
Súbory JSX robia aplikáciu jednoduchou a zrozumiteľnou. Na kódovanie sa dá použiť štandardný JavaScript, ale používanie JSX to uľahčuje. Niekoľko metód životného cyklu a prístup založený na jednotlivých zložkách uľahčujú učenie a vykonávanie.
7. Krivka učenia
V porovnaní s inými rámcami je krivka učenia Reactu nízka. Začiatočníci so základným programovacím jazykom sa tiež môžu ľahko naučiť reagovať.
Ako to funguje?
Keď vývojársky tím Facebooku tvoril aplikácie na strane klienta, zistil, že model DOM (Object Object Model) je pomalý. Aby sa to urýchlilo, v Reacte sa implementuje virtuálna DOM, ktorá predstavuje stromovú reprezentáciu DOM v JavaScripte.
React funguje na virtuálnom DOM. Po vykonaní zmien nemanipuluje s dokumentom v prehliadači, vykonáva zmeny vo virtuálnom DOM. Keď je virtuálna DOM úplne aktualizovaná, aktualizuje DOM prehliadača čo najefektívnejším možným spôsobom. Virtuálny DOM React je úplne v pamäti. Predstavuje webový prehliadač DOM, takže keď je napísaná súčasť React, vytvorí sa virtuálna zložka, ktorá je lacná na vytváranie, ktorá sa pomocou nástroja React zmení na DOM. Reakcia bola vytvorená na použitie v prehliadači, ale s Node.js ju možno použiť aj so serverom.
Ako ju používame?
Použitie React je jednoduché, ako zahrnúť súbor JS do HTML. Uvidíme použitie Reactu jednoduchým príkladom:
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')
);
First React Code
ReactDOM. render( First Code, document. querySelector ('#application')
);
Vyzerá to trochu ťažké, ale je ľahké ho implementovať a naučiť sa.
Kto používa reakciu?
Na dnešnom trhu sa spoločnosť React stáva populárnou a jej vlastnosti pomáhajú veľkým spoločnostiam zlepšovať ich skúsenosti a rozhrania.
Internetoví giganti ako Facebook, Instagram, Netflix, New York Times, Yahoo Mail, Khan Academy, WhatsApp, Vivaldi Browser, Codecademy a Dropbox používajú React jedným alebo druhým spôsobom. Ruská banka Sberbank tiež použila React o na vývoj webových stránok svojej banky.
Mnoho webových stránok ako github.com, reddit.com, outlook.live.com, bitbucket.org, account.godaddy.com a mnoho ďalších tiež používa React.
Výhody React
- Priateľské k SEO
- Je jednoduché vytvoriť testovacie prípady pre používateľské rozhranie.
- Komponenty React môžu byť ľahko znovu použité.
- Zabezpečuje rýchlejšie vykreslenie.
- Ladenie je ľahké.
- Jednoduchá migrácia.
- Zvyšuje produktivitu.
- Písanie komponentov je jednoduché.
- Stabilný kód.
- Má užitočnú súpravu vývojárov.
- Reagovať natívne je k dispozícii pre vývoj mobilných aplikácií
- Ľahko sa učí.
- Zvyšuje výkon.
Nevýhody React
- Vysoké tempo rozvoja.
- Zlá dokumentácia.
- Ďalšie problémy s SEO.
- Iba na zobrazenie.
- Knižnica React.
- Krivka učenia pre začiatočníkov.
- Vyžaduje manuálne spracovanie zmien údajov.
- V niektorých prípadoch potrebujete viac kódu.
Odporúčaný článok
Toto bol sprievodca Čo je React. Tu sme diskutovali o pojmoch, definícii a porozumení s výhodou a nevýhodou React. Viac informácií nájdete aj v ďalších navrhovaných článkoch -
- Čo je agilné programovanie?
- Čo je multithreading v jave?
- Použitie Raspberry Pi
- Čo je JMS? | Definícia vysvetlenie
- Reagovať natívne verzus reagovať
- Vytváranie tlačidiel štýlu v Native React