În acest articol, vom explora metodele ciclului de viață al ReactJS. Dar, înainte de a trece la diferitele metode ale ciclului de viață React, ar trebui să înțelegem ce este.

După cum știm, totul în această lume urmează un ciclu (să zicem oameni sau copaci). Ne naștem, creștem și apoi murim. Aproape totul urmează acest ciclu în viața sa, iar componentele React sunt la fel de bune. Componentele sunt create (montate pe DOM), cresc prin actualizare și apoi mor (demontează pe DOM). Aceasta este denumită un ciclu de viață component.

Există diferite metode ale ciclului de viață pe care React le oferă în diferite faze ale vieții unei componente. React apelează automat metoda responsabilă în funcție de faza în care se află componenta. Aceste metode ne oferă un control mai bun asupra componentei noastre și le putem manipula folosind aceste metode.

În prezent, știm ce sunt metodele ciclului de viață și de ce sunt importante. Deci, care sunt aceste metode diferite? Să aruncăm o privire asupra lor.

Metode ale ciclului de viață

Ciclul de viață al unei componente este în general clasificat în patru părți:

  • initializare
  • montare
  • actualizarea și
  • demontare.

Să discutăm diferitele metode ale ciclului de viață care sunt disponibile în aceste faze diferite (de exemplu, inițializare, montare, actualizare și demontare).

Inițializare

Aceasta este faza în care componenta își va începe călătoria prin configurarea stării (a se vedea mai jos) și a elementelor de recuzită. Acest lucru se face de obicei în interiorul metodei constructorului (a se vedea mai jos pentru a înțelege mai bine faza de inițializare).

class Initialize extends React.Component {
    constructor(props)
    {
    // Calling the constructor of
    // Parent Class React.Component
    super(props);
    // initialization process
    this.state = {
       date : new Date(),
       clickedStatus: false
     };
}

Montare

Numele se explică de la sine. Montarea este faza în care componenta noastră React se montează pe DOM (adică este creată și inserată în DOM).

Această fază intră pe scenă după finalizarea fazei de inițializare. În această fază, componenta noastră redă prima dată. Metodele disponibile în această fază sunt:

1. componentWillMount ()

Această metodă este numită chiar înainte ca o componentă să se monteze pe DOM sau să se apeleze metoda de redare. După această metodă, componenta se montează.

Notă: Nu trebuie să efectuați apeluri API sau modificări de date folosind this.setstate în această metodă, deoarece este apelat înainte de metoda de redare. Deci, nimic nu se poate face cu DOM (adică actualizarea datelor cu răspuns API) deoarece nu a fost montat. Prin urmare, nu putem actualiza starea cu răspunsul API.

2. componentDidMount ()

Această metodă este apelată după ce componenta este montată pe DOM. La fel ca componentWillMount, se numește o dată într-un ciclu de viață. Înainte de executarea acestei metode, se numește metoda de redare (adică putem accesa DOM). Putem efectua apeluri API și actualiza starea cu răspunsul API.

Aruncați o privire pentru a înțelege aceste metode de montare:

class LifeCycle extends React.Component {
  componentWillMount() {
      console.log('Component will mount!')
   }
  componentDidMount() {
      console.log('Component did mount!')
      this.getList();
   }
  getList=()=>{
   /*** method to make api call***
  }
  render() {
      return (
         <div>
            <h3>Hello mounting methods!</h3>
         </div>
      );
   }
}

Se actualizează

Aceasta este a treia fază prin care trece componenta noastră. După faza de montare în care a fost creată componenta, faza de actualizare intră în scenă. Aici se schimbă starea componentei și, prin urmare, are loc redarea.

În această fază, datele componentei (state & props) se actualizează ca răspuns la evenimentele utilizatorului, cum ar fi clic, tastare și așa mai departe. Acest lucru are ca rezultat redarea componentei. Metodele disponibile în această fază sunt:

  1. shouldComponentUpdate ()

Această metodă determină dacă componenta trebuie actualizată sau nu. În mod implicit, revine adevărat. Dar la un moment dat, dacă doriți să redați componenta în anumite condiții, atunci metoda ComponentUpdate ar trebui să fie locul potrivit.

Să presupunem, de exemplu, că doriți să redați din nou componenta numai atunci când există o schimbare în prop – apoi utilizați puterea acestei metode. Primește argumente precum nextProps și nextState care ne ajută să decidem dacă să redăm din nou făcând o comparație cu valoarea actuală a prop.

2. componentWillUpdate ()

La fel ca alte metode, și numele său se explică de la sine. Se apelează înainte de a avea loc redefinirea componentei. Se numește o dată dupăshouldComponentUpdate‘metoda. Dacă doriți să efectuați unele calcule înainte de redarea componentei și după actualizarea stării și a prop, atunci acesta este cel mai bun loc pentru ao face. La fel ca metoda „shouldComponentUpdate”, primește și argumente precum nextProps și nextState.

3. ComponentDidUpdate ()

Această metodă este numită imediat după redarea componentei. După ce noua componentă (actualizată) este actualizată pe DOM, „componentDidUpdate‘metoda este executată. Această metodă primește argumente precum prevProps și prevState.

Aruncați o privire pentru a înțelege mai bine metodele de actualizare:

class LifeCycle extends React.Component {
      constructor(props)
      {
        super(props);
         this.state = {
           date : new Date(),
           clickedStatus: false,
           list:[]
         };
      }
      componentWillMount() {
          console.log('Component will mount!')
       }
      componentDidMount() {
          console.log('Component did mount!')
          this.getList();
       }
      getList=()=>{
       /*** method to make api call***
       fetch('https://api.mydomain.com')
          .then(response => response.json())
          .then(data => this.setState({ list:data }));
      }
       shouldComponentUpdate(nextProps, nextState){
         return this.state.list!==nextState.list
        }
       componentWillUpdate(nextProps, nextState) {
          console.log('Component will update!');
       }
       componentDidUpdate(prevProps, prevState) {
          console.log('Component did update!')
       }
      render() {
          return (
             <div>
                <h3>Hello Mounting Lifecycle Methods!</h3>
             </div>
          );
       }
}

Demontarea

Aceasta este ultima fază din ciclul de viață al componentei. După cum sugerează în mod clar numele, componenta devine demontată de la DOM în această fază. Metoda disponibilă în această fază este:

1. componentWillUnmount ()

Această metodă este apelată înainte de a avea loc demontarea componentei. Înainte de a scoate componenta din DOM, ‘componentWillUnMount ‘ execută. Această metodă denotă sfârșitul ciclului de viață al componentei.

Iată o reprezentare în diagramă a metodelor ciclului de viață:

Cum sa intelegeti metodele ciclului de viata ale unei componente

Acesta este totul despre această parte importantă a lumii React – metodele ciclului de viață. Sper că ți-a plăcut să o citești.

Mulțumiri!