React Lifecycle - Različne faze reaktivnega življenjskega cikla s primeri

Uvod v reakcijski življenjski cikel

Ker vemo, da so sestavni deli osnovni gradniki reakcije, je pomembno vedeti o različnih fazah, ki so vključene v življenjski cikel reakcijske komponente. V tem članku bomo opisali različne dogodke in metode, ki so vključeni v življenjski cikel komponente. Zajeli bomo tudi nekaj primerov, ki bodo dali jasno sliko življenjskega cikla komponent React.

Faze reaktivnega življenjskega cikla

Življenjski cikel komponent je opredeljen kot zaporedje metod, ki jih prikličejo v različnih fazah komponente. Sledijo različne faze, ki so vključene v življenjski cikel reaktivne komponente:

1. Pobuda

Ta faza zahteva, da razvijalec določi lastnosti in začetno stanje komponente. To se naredi v konstruktorju komponente. Naslednja koda prikazuje fazo inicializacije reakcijske komponente:

Koda:

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 reakcijskega življenjskega cikla, ki nastopi po zaključku inicializacije. Namestitev se zgodi, ko je komponenta postavljena na vsebnik DOM in komponenta je upodobljena na spletni strani. Faza montaže ima dve metodi, ki sta:

• compnentWillMount () : Ta metoda se prikliče tik preden se komponenta postavi na DOM, to funkcijo pokliče tik preden se funkcija upodablja prvič izvede.
• komponentaDidMount () : Ta metoda se prikliče takoj, ko je komponenta nameščena v DOM, to funkcijo pa prikliče takoj po izvedbi funkcije upodabljanja. Prvič.

Iz imena zgornjih dveh metod smo razumeli pomen ključnih besed "bo" in "je". Zdaj je jasno, da je "Will" uporabljen pred določenim dogodkom, "did" pa v primeru po določenem dogodku.

3. Posodobitev

Posodobitev je faza, v kateri se stanje in lastnosti, napolnjene v času inicializacije, po nekaterih uporabniških dogodkih spremenijo. Spodaj so različne funkcije, ki jih prikličete med fazo posodabljanja:

• komponentaWillReceiveProps (): Ta funkcija ni odvisna od stanja komponente. Ta metoda je uporabljena, preden komponenta, ki je nameščena na DOM, preusmeri svoj rekvizit. Funkcija sprejme nove rekvizite, ki so lahko enaki ali drugačni od originalnih rekvizitov. V tem koraku je mogoče uporabiti predvsem nekaj pregledov pred upodabljanjem.
• trebaComponentUpdate (): Včasih je zaželeno, da se novi rekviziti ne prikažejo na izhodni strani. Če želite to doseči, ta metoda vrne napačno, kar pomeni, da na novo izstavljeni rekviziti ne bi smeli biti prikazani na izhodni strani.
• komponentaWillUpdate (): Ta funkcija se pokliče, preden se komponenta ponovno upodobi, to pomeni, da je ta metoda poklicana enkrat pred izvedbo funkcije upodabljanja po posodobitvi.
• komponentaDidUpdate (): Ta funkcija se prikliče po ponovnem upodabljanju komponente, ki jo ta postopek pokliče enkrat po izvedbi funkcije upodabljanja po posodobitvi.

4. Odklapljanje

To je zadnja faza življenjskega cikla komponent in v tej fazi je komponenta ločena od vsebnika DOM . Naslednja metoda spada v to fazo.

• komponentaWillUnmount (): Ta funkcija se prikliče, preden se komponenta končno odklopi od vsebnika DOM, pri čemer se ta metoda pokliče, ko je komponenta v celoti odstranjena s strani in to pokaže konec njenega življenjskega cikla.

Primer življenjskega cikla reakcije

Tu bomo videli nekaj kodnih primerov, ki prikazujejo življenjski cikel 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'));

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'));

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'));

Ko se zgornji program najprej izvede, bo na spletni strani prikazan spodnji izhod.

Če kliknete območje Kliknite tukaj, se bo besedilo spremenilo v naslednje:

Zdaj na konzoli vidite zaporedje imenovanih metod, na konzoli bo prikazan spodnji priloženi izhod:

Po kliku na zaslonu se bo izvedlo upodabljanje in v konzoli se prikaže naslednje:

Zgornji izhod konzole daje jasno razumevanje metod reakcijskega življenjskega cikla, ki so bile uporabljene med življenjskim ciklom reaktivne komponente.

Zaključek

Potem ko smo zajeli podrobnosti o različnih fazah, ki so vključene v reakcijski življenjski cikel, je jasno, da obstajajo metode življenjskega cikla, ki se pokličejo samodejno. Te metode življenjskega cikla v različnih fazah komponente nam omogočajo izvajanje prilagojenih dogodkov, ko komponento ustvarimo, posodobimo ali uničimo. Poleg tega nam te metode omogočajo enostavno ravnanje z rekviziti in spremembami države ter enostavno integracijo knjižnic drugih proizvajalcev.

Priporočeni članki

To je vodnik po reakcijskem življenjskem ciklu. Tukaj obravnavamo faze reakcijskega življenjskega cikla, kot so inicializacija, namestitev, posodobitev in demontaža skupaj s primerom. Če želite izvedeti več, si oglejte tudi naslednje članke -

1. React Native vs React
2. Agile življenjski cikel
3. Življenjski cikel ITIL
4. Java Tools Deployment Tools
5. Vodnik po gumbu v React Native