Componente React - Recuzită și stări în ReactJS cu exemple

„În React, totul este o componentă”

Dacă sunteți familiarizat cu React, atunci trebuie să fi auzit sau citit această frază de multe ori. Dar știți ce înseamnă exact și cum este folosit? Dacă nu, citiți acest blog pentru a afla totul despre componentele React și diferitele faze ale ciclului de viață. Sunt sigur că până termini citind acest blog veți avea o înțelegere completă a componentelor React și a conceptelor care îl înconjoară. Dar, înainte de a continua, aruncați o privire rapidă asupra subiectelor pe care le voi discuta:

• Ce sunt componentele React?
• Avantajele componentelor React
• Recuzită
• State
• State vs Recuzită
• Reacționează ciclul de viață al componentelor

Ce sunt componentele React?

Anterior dezvoltatorii trebuiau să scrie 1000 de linii de cod pentru a dezvolta o aplicație simplă cu o singură pagină. Majoritatea acestor aplicații au urmat structura tradițională DOM, iar modificarea acestora a fost foarte provocatoare și o sarcină plictisitoare pentru dezvoltatori.Au trebuit să caute manual elementul care avea nevoie de schimbare și să o actualizeze în consecință. Chiar și o mică greșeală ar duce la eșecul aplicației. Mai mult, actualizarea DOM a fost foarte costisitoare. Astfel, a fost introdusă abordarea bazată pe componente. În această abordare, întreaga aplicație este împărțită în bucăți logice numite Componente. React a fost unul dintre cadrele care au optat pentru această abordare.Dacă intenționați să vă construiți cariera în dezvoltarea web, începutul timpuriu vă va oferi o mulțime de oportunități.

Să înțelegem acum care sunt aceste componente.

Componentele React sunt considerate elementele de bază ale interfeței cu utilizatorul. Fiecare dintre aceste componente există în același spațiu, dar se execută independent una de cealaltă. Componentele React au propria lor structură, metode, precum și API-uri. Sunt reutilizabile și pot fi injectate în interfețe după necesități. Pentru a înțelege mai bine, luați în considerare întreaga interfață de utilizare ca pe un copac.Aici componenta de pornire devine rădăcina și fiecare dintre piesele independente devin ramuri, care sunt împărțite în continuare în subramuri.

Acest lucru ne menține interfața de utilizare organizată și permite modificărilor de date și stări să curgă logic de la rădăcină la ramuri și apoi la subramuri. Componentele efectuează apeluri către server direct din partea clientului, ceea ce permite DOM-ului să se actualizeze dinamic, fără a actualiza pagina. Acest lucru se datorează faptului că componentele react sunt construite pe conceptul de cereri AJAX. Fiecare componentă are propria interfață care poate efectua apeluri către server și le poate actualiza. Deoarece aceste componente sunt independente unele de altele, fiecare se poate reîmprospăta fără a-i afecta pe alții sau pe interfața de utilizare în ansamblu.

Folosim React.createClass () metoda de creare a unei componente. Această metodă trebuie transmisă unui argument obiect care va defini componenta React. Fiecare componentă trebuie să conțină exact una face() metodă. Este cea mai importantă proprietate a unei componente care este responsabilă de analiza codului HTML în JavaScript, JSX. Acest face() va returna reprezentarea HTML a componentei ca nod DOM. Prin urmare, toate etichetele HTML trebuie să fie închise într-o etichetă de închidere din interiorul face() .

Următorul este un exemplu de cod pentru crearea unei componente.

import React din 'react' import ReactDOM din clasa 'react-dom' MyComponent extinde React.Component {render () {return (
Id-ul dvs. este {this.state.id}
)}} ReactDOM.render (, document.getElementById ('conținut'))

State vs Recuzită

Reacționează ciclul de viață al componentelor

React oferă diverse metode care notifică când apare o anumită etapă a ciclului de viață al unei componente. Aceste metode se numesc metode ale ciclului de viață. Aceste metode ale ciclului de viață nu sunt foarte complicate. Vă puteți gândi la aceste metode ca la manipulatori de evenimente specializați, care sunt chemați în diferite puncte în timpul vieții componentelor. Puteți chiar să adăugați propriul cod la aceste metode pentru a efectua diverse sarcini. Vorbind despre ciclul de viață al componentei, ciclul de viață este împărțit în 4 faze. Sunt:

1. Faza initiala
2. Faza de actualizare
3. Recuzita schimbă faza
4. Faza de demontare

Fiecare dintre aceste faze conține câteva metode ale ciclului de viață, care sunt specifice numai lor. Așadar, să aflăm acum ce se întâmplă în fiecare dintre aceste faze.

A. Faza initiala - Prima fază a ciclului de viață al unei componente React este faza inițială sau faza inițială de redare. În această fază,componenta este pe cale să-și înceapă călătoria și să se îndrepte spre DOM. Această fază constă din următoarele metode care sunt invocate într-o ordine predefinită.

1. getDefaultProps (): Această metodă este utilizată pentru a specifica valoarea implicită a aceasta.accesorii . Este apelat înainte ca componenta dvs. să fie creată sau orice elemente de recuzită de la părinte să fie transmise în ea.
2. getInitialState (): Această metodă este folosită pentruspecifica valoarea implicită a acesta.stat înainte de crearea componentei.
3. componentWillMount (): Aceasta este ultima metodă pe care o puteți apela înainte ca componenta dvs. să fie redată în DOM. Dar dacă suni setState () în interiorul acestei metode componenta dvs. nu va fi redată din nou.
4. face(): Th Această metodă este responsabilă pentru returnarea unui singur nod HTML rădăcină și trebuie definită în fiecare componentă. Vă puteți întoarce nul sau fals în cazul în care nu doriți să redați nimic.
5. componentDidMount (): Odată ce componenta este redată și plasată pe DOM, aceasta metoda se numește. Aici puteți efectua orice operații de interogare DOM.

b. Faza de actualizare - Odată ce componenta este adăugată la DOM, acestea se pot actualiza și reda din nou numai atunci când are loc o modificare de stare. De fiecare dată când starea se schimbă, componenta o numește face() din nou. Orice componentă care se bazează pe ieșirea acestei componente o va numi și ea face() din nou. Acest lucru este făcut, pentru a ne asigura că componenta noastră afișează cea mai recentă versiune a sa. Astfel, pentru a actualiza cu succes starea componentelor, sunt invocate următoarele metode în ordinea dată:

1. shouldComponentUpdate (): Folosind această metodă puteți controla comportamentul componentei dvs. de actualizare. Dacă întoarceți un adevărat din această metodă,componenta se va actualiza. Altfel dacă această metodă returnează unfals, componenta va sări peste actualizare.
2. componentWillUpdate (): Tse numește metoda sa jînainte ca componenta dvs. să fie actualizată. În această metodă, nu vă puteți schimba starea componentei apelând this.setState .
3. face(): Dacă întoarceți fals prin shouldComponentUpdate () , codul din interior face() va fi invocat din nou pentru a vă asigura că componenta dvs. se afișează corect.
4. componentDidUpdate (): Odată ce componenta este actualizată și redată, atunci se invocă această metodă. Puteți introduce orice cod în această metodă, pe care doriți să îl executați odată ce componenta este actualizată.

c. Faza de schimbare a accesoriilor - După componenta a fost redată în DOM, singura altă dată când componenta se va actualiza, în afară de modificarea stării, atunci când se modifică valoarea sa prop. Practic, această fază funcționează similar cu faza anterioară, dar în loc de stat, se ocupă de recuzită. Astfel, această fază are o singură metodă suplimentară din faza de actualizare.

funcția de membru static c ++

1. componentWillReceiveProps (): Această metodă returnează un argument care conține noua valoare prop care urmează să fie atribuită componentei.
   Restul metodelor ciclului de viață se comportă identic cu metodele pe care le-am văzut în faza anterioară.
   
2. shouldComponentUpdate ()
3. componentWillUpdate ()
4. face()
5. componentDidUpdate ()

d.Faza de demontare -Aceasta este ultima fază a ciclului de viață al componentelor în care componenta este distrusă și eliminată complet din DOM. Conține o singură metodă:

1. componentWillUnmount (): Odată ce această metodă este invocată, componenta dvs. este eliminată definitiv din DOM.În această metodă, Daputeți efectua orice sarcini legate de curățare, cum ar fi eliminarea ascultătorilor de evenimente, oprirea cronometrelor etc.

În continuare este prezentată întreaga diagramă a ciclului de viață:

Acest lucru ne aduce la sfârșitul blogului pe React Components. Sper că pe acest blog am putut să explic clar ce sunt componentele React, cum sunt utilizate. Puteți consulta blogul meu pe , în cazul în care doriți să aflați mai multe despre ReactJS.

Dacă doriți să vă instruiți în React și doriți să dezvoltați IU-uri interesante pe cont propriu, atunci consultați de Edureka, o companie de învățare online de încredere, cu o rețea de peste 250.000 de elevi mulțumiți răspândiți pe tot globul.

Ai o întrebare pentru noi? Vă rugăm să o menționați în secțiunea de comentarii și vă vom răspunde.