Ce sunt metodele ciclului de viață al componentelor în React JS ??

La fel ca noi toți, componentele React iau naștere, cresc și mor!

(Habilelabs) (7 dec. 2020)

De Payal Mittal

metodele ciclului de viață al componentelor în reactjs
Metodele ciclului de viață al componentelor în React.js

Fiecare componentă a clasei React trece printr-o serie de„ metode ale ciclului de viață ”. Practic, totul din React constă fie din componente, fie dintr-o parte din componente.

Aceste componente sunt supuse urmării unui anumit ciclu de viață, aproape ca cel al oricărei creaturi vii de pe pământ. Ei iau naștere, cresc și apoi mor în sfârșit. Faza în care se nasc se numește montare, când cresc se numește actualizare, iar ultima fază a morții este cunoscută sub numele de demontare.

Întregul proces se numește „Component Lifecycle”. Pentru fiecare dintre aceste faze, React.js redă anumite metode încorporate denumite metode ale ciclului de viață care controlează comportamentul componentelor dintr-o aplicație.

În acest blog, vom parcurge acest ciclu de viață și vom obține să știți despre aceste metode ale ciclului de viață –

Ce sunt metodele ciclului de viață al componentelor?

Metodele ciclului de viață ale componentelor sunt împărțite în trei faze diferite, ca-

  • Montare
  • Actualizare
  • Demontare

Întregul ciclu de viață al componentei poate fi înțeles prin această ilustrare vizuală simplă –

Diagrama ciclului de viață al componentelor

Acum, vom discuta în detaliu fiecare dintre faze și metodele lor. Să mergem atunci –

✔ Montarea metodelor ciclului de viață

După finalizarea componentei inițializare, montarea componentei începe în care componenta este creată și inserată în DOM.

Aici vom discuta despre cele mai frecvent utilizate metode ale ciclului de viață-

1. constructor ()

constructor() este apelat mai întâi înainte de începerea montajului și este folosit în principiu pentru a deservi aceste două purpose-

În loc să utilizați setState(), puteți atribui direct starea inițială this.state() în metoda constructor. Iată cum ne putem defini starea-

constructor(props) {
super(props);this.state = { count: 0 };
this.handleClick = this.handleClick.bind(this);
console.log("Constructor!");
}

2. render ()

Următorul rând este metoda render()! Montează componenta pe DOM și le redă în interfața de utilizare. Această metodă este invocată pentru a examina atributele this.state și this.props ori de câte ori există o variație a componentelor state sau props.

render este cea mai frecvent utilizată metodă dintre toate în React. Dacă doriți să redați elemente în DOM, atunci render() este metoda de așteptat cu nerăbdare, deoarece le puteți scrie aici.

Ori de câte ori este apelat, acesta poate reveni multe tipuri, adică șiruri, numere, tablouri, fragmente, valori booleene sau null valoare, portal sau elemente React. Unele exemple sunt date aici –

class MyComponent extends React.Component {
render() {//return string
return "Hello!!"//return null value in case you don"t want to render anything
return null//return fragments
return
Hello

Friends

//return arrays
return [
Hello
,
World

]; }
}

Notă : Dacă metoda componentShouldMount returnează boolean false, atunci metoda de redare nu va fi evocată.

3. componentDidMount ()

Această metodă este apelată imediat după ce componenta este introdusă în DOM prin metoda render . Se numește o singură dată într-un ciclu de viață.

  • Dacă doriți să configurați abonamente, atunci acesta este un loc la fel de bun ca oricare altul pentru a face acest lucru. Dar va trebui să vă dezabonați în componetWillUnmount().
  • De asemenea, este un loc bun pentru a crea o solicitare de rețea dacă trebuie să încărcați date de la o telecomandă. punct final.
  • Puteți apela chiar setState() aici. Deși va declanșa din nou o redare, nu veți vedea cel puțin starea intermediară. Cu toate acestea, trebuie să fiți precaut în timp ce utilizați acest lucru, deoarece cauzează probleme de performanță. De fapt, ar trebui să atribuiți starea inițială în metoda constructor(), după cum este recomandabil. Dar această abordare este utilă atunci când trebuie să măsurați un nod DOM înainte de a reda ceva care depinde de dimensiunea sa.

✔ Actualizarea metodelor ciclului de viață

Spre deosebire de Montare „faza care apare o singură dată în timpul montării componentei, faza„ Actualizare ”poate apărea de mai multe ori.

Ori de câte ori există vreo modificare în elementele de recuzită / starea componentei care trebuie actualizată, un temporizator apelează pentru ca render și componentDidupdate să recunoască, să actualizeze și să redea modificarea, faza de actualizare intră în joc.

1. static getDerivedStateFromProps ()

Aceasta este prima metodă care este apelată în faza de actualizare a ciclului de viață. Poate fi apelat de mai multe ori, deoarece este invocat ori de câte ori se inițiază metoda render . Deci, este evident că este apelat atât în ​​fazele de montare, cât și în fazele de actualizare.

Această metodă nu este foarte frecventă și este utilizată rar în cazuri specifice, de exemplu, atunci când starea componentei variază în funcție de schimbările de recuzită în timp. După cum sugerează și numele, derivă starea din recuzită.

2. shouldComponentUpdate ()

Această metodă este apelată atunci când componenta este pe cale să fie redată din nou. Determină dacă modificările actuale din states / props afectează ieșirea componentei. Acesta este utilizat doar ca mijloc de optimizare a performanței și anunțați-ne „dacă componenta se actualizează sau nu”, care este exprimată prin boolean true sau false valori. În mod implicit, returnează true.

Dacă

shouldComponentUpdate() returnează false valoare, înseamnă că îi spui React să omită această actualizare și, prin urmare, nu vor fi apelate metodele render și componentDidUpdate.

Funcționarea metodei shouldComponentUpdate

Cu toate acestea, puteți preveni redarea inutilă, utilizând încorporat

React.PureComponent care vă permite să comparați state / props nou și vechi și face puțin probabil să omiteți orice actualizare necesară.

3. render ()

Urmează render. Dacă va fi apelat sau nu depinde de valoarea returnată de shouldComponentUpdate. Se va declanșa numai în cazul în care true este returnat.

4. getSnapshotBeforeUpdate ()

După ce se numește render ,

getSnapshotBeforeUpdate vine următorul. Nu este utilizat în mod obișnuit, dar este foarte util în anumite cazuri specifice, cum ar fi atunci când aveți nevoie de acces la unele informații din DOM și le modificați imediat după ce a fost actualizată.

Această metodă permite componentei să captează unele informații (înălțimea de derulare) din DOM, astfel încât să poată fi ajustate ulterior (după actualizare). Totuși, trebuie să înțelegeți că înălțimea de derulare capturată aici indică înălțimea înainte a fost actualizată la DOM.

Putem trece prevState și prevProps ca argumente, așa cum sunt date aici –

getSnapshotBeforeUpdate(prevProps, prevState) {return null;}

5. componentDidUpdate ()

Această metodă este invocată imediat după ce componenta este actualizată și redată. Primește prevState și prevProps ca parametri și poate accesa, de asemenea, starea nou modificată sau elementele de recuzită.

Cu toate acestea, se recomandă insistent să nu setați niciodată direct starea în cadrul acestei funcții, în caz contrar, va declanșa în continuare render și componentDidUpdate.

Prin această metodă, vom calcula diferența scrollHeight dintre ceea ce a fost înainte după actualizare.

Acesta este un singur caz de utilizare, acolo sunt alte câteva ca –

👉 Pentru a prelua date de pe server

👉 Pentru a accesa nodurile DOM ale componentei React

Pentru a obține detalii despre cazurile sale de utilizare , consultați documentația oficială –

React.Component – React

Această pagină conține o referință API detaliată pentru clasa de componente React definiție. Presupune că „sunteți familiarizați cu …

reactjs.org

✔ Demontarea metodelor ciclului de viață

Aceasta este ultima fază în care trece o componentă de reacție unde este demontată de la DOM și distrusă. Există o singură metodă a ciclului de viață în această fază.

1. componentWillUnmount ()

componentWillUnmount metoda este numită mai întâi în faza de demontare, chiar înainte ca componenta să fie distrusă.Acesta este locul în care puteți efectua orice metodă de curățare, anularea cererilor de rețea, invalidarea cronometrelor sau curățarea abonamentelor nedorite care au fost create în metoda componentDidMount .

Rezumat:

Există și alte metode care sunt invocate în cazul în care o eroare este aruncată de un component descendent, aceste metode se numesc metode de gestionare a erorilor ciclului de viață. Le veți găsi aici .

Asta a fost tot codificatorii !! Sper că veți înțelege mai bine metodele ciclului de viață ale componentei React prin intermediul acestui blog. Reveniți la dvs. în curând cu un alt blog perspicace.

apoi, lectură fericită !! 🙃

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *