Ciclul de viață al componentei React: Ce trebuie să știți [2022]

În React, aplicația este împărțită în cele mai mici bucăți posibile cunoscute sub numele de Componente. Componentele pot fi de prezentare sau container.

Când vorbim despre componente de prezentare, acestea nu au nicio logică. Sunt încorporate în interiorul componentelor; are doar UI.

Componentele containerului sunt cele care folosesc componente de prezentare și au logica de afaceri în componentă. Astfel de componente trebuie adesea să păstreze obiectele de stat locale pentru a realiza unul dintre numeroasele cazuri de utilizare pentru care ar putea fi responsabile. Aceste componente folosesc componente de prezentare ca componente secundare și transmit date folosind diverse elemente de recuzită.

React vă permite să aveți componente fie de clasă, fie funcționale. Un model predominant utilizat în ecosistemul de reacții este că componenta de prezentare este un tip funcțional de componentă, iar componentele containerului sunt de tip clasă.

Ciclul de viață react arată procesul exact prin care trec componentele și motivul din spatele ciclului de viață al componentei react .

Componente funcționale

Acestea sunt cele care nu au nicio stare și se fac doar manipulări folosind recuzita.

Toate metodele ciclului de viață al componentelor sau setState nu pot fi utilizate sau accesate în interiorul acestor componente.

Checkout: React Project Ideas

Componentele clasei

Aceste componente pot avea o stare locală și au acces la metodele ciclului de viață și setState .

O componentă tipică a clasei din react arată astfel:

Ciclul de viață al componentelor are trei faze: -

1. Montare
2. Actualizare
3. Demontarea

Montare

Când orice componentă este creată și inserată în DOM (Document Object Model), metodele utilizate sunt:

● constructor()

● static getDerivedStateFromProps()

● redare()

● componentDidMount()

Actualizare

Când suportul sau starea furnizată unei componente este schimbată, re-rendarea componentei este cunoscută și sub denumirea de faza de actualizare. În această fază, mai jos sunt prezentate următoarele metode de ciclu de viață care sunt apelate:

● static getDerivedStateFromProps()

● shouldComponentUpdate()

● redare()

● getSnapshotBeforeUpdate()

● componentDidUpdate()

Citiți: Vue vs React: Diferența dintre Vue și React

Demontarea

Această metodă este numită în timpul demontării oricărei componente:-

● componenta willUnmount()

Este ultima funcție care trebuie invocată înainte ca modelul obiect al documentului să fie distrus. Funcționează ca curățare pentru orice element construit în timpul componentWillMount.

În scopul gestionării erorilor în componentă, există câteva metode rezervate: -

● static getDerivedStateFromError()

● componentDidCatch()

Metodele ciclului de viață utilizate în mod obișnuit, explicate în detaliu: -

● constructor (recuzită)

Această metodă a ciclului de viață este utilizată în timpul fazei de montare a componentelor. Se poate avea un obiect de stat local declarat aici. Super(recuzitele) este apelată în interiorul constructorului înaintea oricărei alte instrucțiuni; în caz contrar, apare o eroare la accesarea this.props.

Dacă nu se urmărește declararea obiectului de stare locală sau legarea de gestionare a evenimentelor la instanță, nu este nevoie să scrieți metoda ciclului de viață a componentelor.

Starea de apelare din constructor() nu este recomandată, deoarece ar declanșa redarea înainte ca ciclul anterior să se încheie.

Constructor() este singurul loc unde se poate atribui direct starea. În caz contrar, dacă este necesar să se schimbe starea sau să se atribuie ceva în interiorul ei, ar trebui folosit this.setSate .

● redare()

În interiorul componentelor acestei metode, este scrisă partea JSX. JSX este similar cu HTML, dar este o sintaxă extinsă a javascriptului. Când folosim JSX, putem folosi și expresii Javascript în cadrul metodei de randare.

Metoda render() a oricărei componente părinte poate avea componente secundare în ea. Toate urmând modelul de compoziție, care este baza componentelor reacției.

Ori de câte ori este apelată metoda de randare a părintelui, randarea începe și pentru componentele copil, iar randarea părinte este completă numai după ce întreaga redare copil este finalizată.

Metoda de randare este o metodă obligatorie; fără aceasta, componenta nu poate fi realizată deoarece acesta este singurul loc în care poate fi scrisă partea de vizualizare a unei componente.

Metoda de randare este pură; aceasta înseamnă că nu poate modifica starea din interiorul său.

Pentru orice componentă în faza de actualizare, redarea pentru o anumită componentă se va întâmpla sau nu poate depinde de tipul sau de utilizarea metodei ciclului de viață shouldComponentUpdate() .

Nu este recomandat să aveți apeluri API și orice interacțiune cu browserul în cadrul acestei metode și va genera o eroare.

● componentDidMount()

Această metodă este invocată imediat după ce componenta este montată. Acum DOM este disponibil pentru alte manipulări. Se poate apela setState în cadrul acestei metode.

De asemenea, interacțiunea cu browser-ul sau apelurile API se poate face de aici.

Această metodă este numită o singură dată, adică în timpul creării. Metoda nu va rula în nicio parte ulterioară de redare și nici logica din interiorul acesteia nu va rula.

● componentDidUpdate()

Acesta este același cu componentDidMount.; se poate obține o eroare cu singura diferență că aceasta este numită numai atunci când are loc re-rendarea unei componente. Această metodă nu este apelată pentru randarea inițială.

SetState și efectele secundare pot fi făcute în cadrul acestei metode. Dar setState trebuie să fie împachetat într-o stare; altfel, s-ar putea ajunge în bucla infinită de randare, iar randarea nu s-ar termina niciodată.

De asemenea, componentDidUpdate nu va fi apelat dacă shouldComponentUpdate() returnează false.

● componentWillUnmount()

Această metodă este apelată atunci când faza de demontare a unei componente este în curs.

În cadrul metodei, în mod ideal, se poate realiza eliminarea gestionatorilor de evenimente și curățarea memoriei.

Funcția setState() nu ar trebui apelată în interiorul acesteia, deoarece provoacă redarea unei componente.

● shouldComponentUpdate()

În timpul dezvoltării aplicațiilor de reacție, există adesea cazuri în care trebuie să evitați redarea inutilă a componentelor. Pentru a realiza această componentă în clasă, se are metoda menționată mai sus. Dacă această metodă returnează false, atunci nu se va reda componenta și componentele sale secundare.

Elementele de recuzită anterioare pot fi verificate și comparate cu elementele de recuzită noi furnizate pentru a se asigura că nu există nicio modificare, apoi returnează false.

Apelarea metodei setState() din aceasta nu este recomandată, deoarece din nou, ar provoca re-rendarea.

De asemenea, efectele secundare nu ar trebui să fie efectuate în cadrul acestei metode.

Există și o altă alternativă la această metodă. Se poate folosi React.pureComponents în timp ce extindeți clasa. Acesta este mult mai stabil și mai fiabil decât shouldComponentUpdate().

Nu în ultimul rând, există limite de eroare de tip componente de reacție care sunt prezente pentru a prinde erorile.

Trebuie să împachetați pur și simplu componenta cu componenta limită de eroare.

În cadrul acestei componente speciale, sunt utilizate două metode de ciclu de viață: -

1. static getDerivedStateFromError()
2. componentDidCatch()

Ambele sunt apelate dacă orice componentă descendentă aruncă o eroare.

Primul este numit în timpul fazei de randare, deci nu sunt permise efecte secundare în interiorul acestuia. Al doilea este apelat în timpul fazei de comitere, astfel încât efectele secundare sunt permise în interiorul acestuia.

Citiți și: Salariu pentru dezvoltatori ReactJS în India

Învață cursuri de inginerie software online de la cele mai bune universități din lume. Câștigă programe Executive PG, programe avansate de certificat sau programe de master pentru a-ți accelera cariera.

Concluzie

Ciclul de viață al componentei react adaugă complexitate codului, dar execuția și manipularea sistematică efectuată prin metode par destul de atrăgătoare din perspectiva dezvoltatorului. Ciclul de viață React permite restructurarea sau manipularea componentelor.

Dacă sunteți interesat să aflați mai multe despre reacționare, dezvoltarea full-stack, consultați programul Executive PG de la upGrad și IIIT-B în dezvoltarea software full-stack, care este conceput pentru profesioniști care lucrează și oferă peste 500 de ore de formare riguroasă, peste 9 proiecte , și misiuni, statutul de absolvenți IIIT-B, proiecte practice practice și asistență pentru locuri de muncă cu firme de top.

Pregătiți-vă pentru o carieră a viitorului

Aplicați acum pentru Programul Executive PG în Full Stack Development