Uvod u reagirajući životni ciklus
Kako znamo da su komponente osnovni građevni blokovi reakcije, važno je znati o različitim fazama koje su uključene u životni ciklus reaktivne komponente. U ovom ćemo članku opisati različite događaje i metode koji su uključeni u životni ciklus komponente. Također ćemo pokriti neke primjere koji će dati jasnu sliku životnog ciklusa komponenti React.
Faze reakcijskog životnog ciklusa
Životni ciklus komponenata definiran je kao slijed metoda koje se pozivaju u različitim fazama komponente. Slijede različite faze koje su uključene u životni ciklus reaktivne komponente:
1. Inicijalizacija
Ova faza zahtijeva da programer definira svojstva i početno stanje komponente. To se vrši u konstruktoru komponente. Sljedeći kod prikazuje fazu inicijalizacije reakcijske komponente:
Kodirati:
class Test extends React.Component (
constructor(props)
(
//Calling parent class constructor
super(props);
// Set initial state
this.state = ( hello : "Test component!" );
)
)
2. Montaža
Montaža je faza reakcijskog životnog ciklusa koja dolazi nakon dovršetka inicijalizacije. Montaža se događa kada je komponenta smještena na DOM spremnik i komponenta je prikazana na web stranici. Faza ugradnje ima dvije metode koje su:
- compnentWillMount () : Ova se metoda poziva neposredno prije nego što se komponenta postavi na DOM, a ova se funkcija poziva neposredno prije izvršenja funkcije prikazivanja.
- componentsDidMount () : Ova metoda se poziva neposredno nakon što je komponenta postavljena na DOM, a ova se funkcija poziva neposredno nakon izvršenja funkcije rendera. Po prvi put.
Iz naziva ove dvije metode shvatili smo važnost ključnih riječi "Hoće" i "Jeste". Sada je jasno da se "Will" koristi za prije određenog događaja, a "did" koristi se u slučaju nakon određenog događaja.
3. Ažuriranje
Ažuriranje je faza u kojoj se stanje i svojstva popunjena u vrijeme inicijalizacije mijenjaju ako se zahtijevaju nakon nekih korisničkih događaja. Slijede različite funkcije na koje se poziva tijekom faze ažuriranja:
- komponentaWillReceiveProps (): Ova je funkcija neovisna o stanju komponente. Ova metoda se poziva prije nego što komponenta koja je montirana na DOM postane reprizirana. Funkcija prihvaća nove rekvizite koji mogu biti identični ili različiti od originalnih rekvizita. U ovom se koraku mogu primijeniti uglavnom neke provjere prije prikazivanja.
- trebaComponentUpdate (): Ponekad je poželjno da se novi rekviziti ne prikazuju na izlaznoj stranici. Da bi se to postiglo, ova metoda vraća lažnu, što znači da novootvoreni rekviziti ne bi trebali biti prikazani na izlaznoj stranici.
- komponentaWillUpdate (): Ova se funkcija poziva prije ponovnog prikazivanja komponente, odnosno ova metoda se poziva jednom prije izvršavanja funkcije prikazivanja nakon ažuriranja.
- komponentaDidUpdate (): Ova se funkcija poziva nakon ponovnog prikazivanja komponente, odnosno ova metoda se poziva jednom nakon izvršene funkcije prikazivanja nakon ažuriranja.
4. Demontiranje
Ovo je posljednja faza u životnom ciklusu komponenti, a u ovoj je fazi komponenta odvojena od DOM spremnika . Sljedeća metoda spada u ovu fazu.
- komponentaWillUnmount (): Ova se funkcija aktivira prije nego što se komponenta konačno odvoji od DOM spremnika. Ova metoda se poziva kada je komponenta potpuno uklonjena sa stranice, a to pokazuje kraj njenog životnog ciklusa.
Primjer reakcijskog životnog ciklusa
Ovdje ćemo vidjeti nekoliko primjera koda koji prikazuju životni ciklus reaktivne komponente.
class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));
class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));
class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));
class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));
class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));
Kada se gornji program pokrene u početku, prikazat će se donji ishod na web stranici.
Kada kliknete područje Kliknite ovdje, tekst će se promijeniti u sljedeće:
Sada na konzoli možete vidjeti redoslijed pozvanih metoda, a na konzoli će se prikazati ispod priključeni izlaz:
Nakon klika na ekranu izvršit će se renderiranje i na konzoli će biti prikazano sljedeće:
Gornji izlaz konzole daje jasno razumijevanje metoda reakcijskog životnog ciklusa pozvanih tijekom životnog ciklusa reaktivne komponente.
Zaključak
Nakon pokrivanja detalja o različitim fazama uključenim u životni ciklus reakcije, jasno je da postoje metode životnog ciklusa koje se automatski zove. Ove metode životnog ciklusa u različitim fazama komponente daju nam slobodu izvođenja prilagođenih događaja kada se komponenta stvori, ažurira ili uništi. Štoviše, ove metode omogućuju nam jednostavno rukovanje rekvizitima i promjenama stanja, kao i jednostavno integriranje biblioteka trećih strana.
Preporučeni članci
Ovo je vodič za React životni ciklus. Ovdje raspravljamo o fazama reakcijskog životnog ciklusa kao što su inicijalizacija, montaža, ažuriranje i demontaža zajedno s primjerom. Možete pogledati i sljedeće članke da biste saznali više -
- React Native vs React
- Agilni životni ciklus
- Životni ciklus ITIL-a
- Alati za implementaciju Java
- Vodič za gumb u React Native