React Components - Rekvizity a stavy v ReactJS s príkladmi



Tento blog o React Components hovorí o základoch komponentov, o tom, ako sú vytvárané, spolu s celým životným cyklom reagujúcich komponentov.

„V React je všetko súčasťou“

Ak poznáte React, potom ste túto frázu určite už počuli alebo prečítali mnohokrát. Ale viete, čo to presne znamená a ako sa používa? Ak nie, prečítajte si tento blog a dozviete sa všetko o komponentoch React a rôznych fázach životného cyklu. Som si istý, že kým skončíte čítaním tohto blogu získate úplné pochopenie komponentov React a koncepcií, ktoré ho obklopujú. Ale predtým, ako budete pokračovať, rýchlo sa pozrite na témy, o ktorých budem diskutovať:

Čo sú komponenty React?

Predtým museli vývojári napísať 1000 riadkov kódu pre vývoj jednoduchej jednostránkovej aplikácie. Väčšina z týchto aplikácií dodržiavala tradičnú štruktúru modelu DOM a ich zmeny boli pre vývojárov veľmi náročné a zdĺhavé.Ručne museli hľadať prvok, ktorý zmenu potreboval, a podľa toho ho aktualizovať. Aj malá chyba by viedla k zlyhaniu aplikácie. Aktualizácia modelu DOM bola navyše veľmi nákladná. Tak bol zavedený prístup založený na komponentoch. V tomto prístupe je celá aplikácia rozdelená na logické bloky, ktoré sa nazývajú Komponenty. React bol jedným z rámcov, ktorý sa rozhodol pre tento prístup.Ak plánujete svoju kariéru v oblasti vývoja webových aplikácií, skorý štart by vám otvoril veľa príležitostí.





Poďme si teraz predstaviť, čo sú tieto komponenty.

Komponenty React sa považujú za stavebné prvky používateľského rozhrania. Každá z týchto zložiek existuje v rovnakom priestore, ale vykonáva sa nezávisle od seba. Komponenty React majú vlastnú štruktúru, metódy a tiež API. Sú opakovane použiteľné a dajú sa podľa potreby vstreknúť do rozhraní. Pre lepšie pochopenie považujte celé používateľské rozhranie za strom.Tu sa počiatočná zložka stáva koreňom a každá z nezávislých častí sa stáva vetvami, ktoré sa ďalej delia na čiastkové vetvy.



Strom používateľského rozhrania - Reagovať komponenty - EdurekaToto udržuje naše UI organizované a umožňuje logickým tokom údajov a zmien stavu z koreňa do pobočiek a potom do podvetví. Komponenty uskutočňujú hovory na server priamo z klientskej strany, čo umožňuje modelu DOM dynamicky sa aktualizovať bez obnovenia stránky. Je to tak preto, lebo komponenty reagovania sú postavené na koncepcii požiadaviek AJAX. Každý komponent má svoje vlastné rozhranie, ktoré umožňuje volať na server a aktualizovať ich. Pretože sú tieto komponenty navzájom nezávislé, môže sa každý z nich obnovovať bez toho, aby to ovplyvnilo ostatných alebo používateľské rozhranie ako celok.

Používame React.createClass () metóda na vytvorenie komponentu. Tejto metóde musí byť odovzdaný argument objektu, ktorý definuje komponent React. Každý komponent musí obsahovať presne jeden render () metóda. Je to najdôležitejšia vlastnosť komponentu, ktorý je zodpovedný za syntaktickú analýzu HTML v JavaScripte, JSX. Toto render () vráti HTML reprezentáciu komponentu ako uzol DOM. Preto musia byť všetky značky HTML uzavreté v uzatvárajúcej značke vo vnútri súboru render () .

Nasleduje ukážka kódu na vytvorenie komponentu.



čo je java ide
import Reagovať z 'React' import ReactDOM z 'Reagovať-Dom' triedy MyComponent rozširuje React.Component {render () {return (

Vaše identifikačné číslo je {this.state.id}

)}} ReactDOM.render (, document.getElementById ('obsah'))

Štáty vs Rekvizity

Reagujte na životný cyklus komponentov

React poskytuje rôzne metódy, ktoré upozorňujú, keď dôjde k určitej etape životného cyklu komponentu. Tieto metódy sa nazývajú metódy životného cyklu. Tieto metódy životného cyklu nie sú príliš komplikované. Tieto metódy si môžete predstaviť ako špecializované obslužné rutiny udalostí, ktoré sa volajú v rôznych bodoch počas životnosti komponentov. K týmto metódam môžete dokonca pridať svoj vlastný kód na vykonávanie rôznych úloh. Keď hovoríme o životnom cykle komponentu, je životný cyklus rozdelený do 4 fáz. Oni sú:

  1. Počiatočná fáza
  2. Aktualizácia fázy
  3. Rekvizity menia fázu
  4. Fáza odpojenia

Každá z týchto fáz obsahuje niektoré metódy životného cyklu, ktoré sú špecifické iba pre ne. Poďme si teda zistiť, čo sa stane počas každej z týchto fáz.

a. Počiatočná fáza - Prvá fáza životného cyklu komponentu React je počiatočná fáza alebo počiatočná fáza vykresľovania. V tejto fázekomponent sa chystá začať svoju cestu a vydať sa na cestu k DOM. Táto fáza pozostáva z nasledujúcich metód, ktoré sa vyvolávajú v preddefinovanom poradí.

  1. getDefaultProps (): Táto metóda sa používa na určenie predvolenej hodnoty this.props . Zavolá sa ešte predtým, ako sa vytvorí váš komponent, alebo sa do neho odovzdajú rekvizity od rodiča.
  2. getInitialState (): Táto metóda je zvyknutá naupresniť predvolená hodnota toto.stav pred vytvorením komponentu.
  3. componentWillMount (): Toto je posledná metóda, ktorú môžete zavolať predtým, ako sa váš komponent zobrazí v DOM. Ale ak zavoláš setState () vo vnútri tejto metódy sa váš komponent znova nevykreslí.
  4. render (): Th Metóda is je zodpovedná za vrátenie jedného koreňového uzla HTML a musí byť definovaná v každej komponente. Môžete sa vrátiť nulový alebo nepravdivé v prípade, že nechcete nič vykresľovať.
  5. componentDidMount (): Po vykreslení a umiestnení komponentu na DOM metóda sa volá. Tu môžete vykonať akékoľvek operácie dotazovania DOM.

b. Aktualizácia fázy - Po pridaní komponentu do modelu DOM sa môžu aktualizovať a znova vykresliť, iba keď dôjde k zmene stavu. Zakaždým, keď sa stav zmení, komponent zavolá jeho render () ešte raz. Akýkoľvek komponent, ktorý sa spolieha na výstup tohto komponentu, bude tiež volať jeho render () ešte raz. Toto sa deje, aby sa zabezpečilo, že náš komponent zobrazuje najnovšiu verziu. Preto pre úspešnú aktualizáciu stavu komponentov sú vyvolané nasledujúce metódy v danom poradí:

  1. shouldComponentUpdate (): Pomocou tejto metódy môžete ovládať správanie svojej súčasti pri samotnej aktualizácii. Ak z tejto metódy vrátite hodnotu true,komponent sa aktualizuje. Inak, ak táto metóda vráti anepravdivé, komponent preskočí aktualizáciu.
  2. componentWillUpdate (): Tjeho metóda sa volá just pred aktualizáciou vášho komponentu. V tejto metóde nemôžete zmeniť stav svojej súčasti volaním this.setState .
  3. render (): Ak vraciate falošné prostredníctvom shouldComponentUpdate () , kód vo vnútri render () sa znova vyvolá, aby sa zabezpečilo, že sa váš komponent zobrazuje správne.
  4. componentDidUpdate (): Po aktualizácii a vykreslení komponentu sa táto metóda vyvolá. Do tejto metódy môžete vložiť ľubovoľný kód, ktorý chcete vykonať po aktualizácii komponentu.

c. Fáza zmeny rekvizít - Po komponent sa vykreslil do modelu DOM, aktualizácia komponentu sa uskutoční iba inokedy, okrem zmeny stavu dôjde k zmene jeho hodnoty prop. Prakticky táto fáza funguje podobne ako predchádzajúca, ale namiesto štátu sa zaoberá rekvizitami. Táto fáza má teda iba jednu ďalšiu metódu z fázy aktualizácie.

  1. componentWillReceiveProps (): Táto metóda vracia jeden argument, ktorý obsahuje novú hodnotu prop, ktorá sa má priradiť komponentu.
    Metódy zvyšku životného cyklu sa správajú rovnako ako metódy, ktoré sme videli v predchádzajúcej fáze.
  2. shouldComponentUpdate ()
  3. componentWillUpdate ()
  4. render ()
  5. componentDidUpdate ()

d.Fáza demontáže -Toto je posledná fáza životného cyklu komponentov, v ktorej je komponent zničený a úplne odstránený z DOM. Obsahuje iba jednu metódu:

  1. componentWillUnmount (): Po vyvolaní tejto metódy bude váš komponent natrvalo odstránený z DOM.Pri tejto metóde Y.Môžete vykonávať akékoľvek úlohy spojené s čistením, ako napríklad odstraňovanie poslucháčov udalostí, zastavenie časovačov atď.

Nasleduje celý diagram životného cyklu:

Týmto sa dostávame na koniec blogu o React Components. Dúfam, že som v tomto blogu dokázal jasne vysvetliť, čo sú React Components, ako sa používajú. Môžete sa obrátiť na môj blog na , pre prípad, že by ste sa chceli dozvedieť viac o ReactJS.

Ak sa chcete vyškoliť v oblasti React a chcete si sami vyvinúť zaujímavé používateľské rozhrania, pozrite si stránku autor: Edureka, dôveryhodná online vzdelávacia spoločnosť so sieťou viac ako 250 000 spokojných študentov rozmiestnených po celom svete.

Máte na nás otázku? Uveďte to prosím v sekcii komentárov a my sa vám ozveme.