Reaalne elutsükkel - Reaktiivse elutsükli erinevad faasid näidetega

Sissejuhatus reaalaja elutsüklisse

Kuna me teame, et komponendid on põhilised reageerimise alustalad, on oluline teada reaktsioonikomponendi elutsükli eri etappe. Selles artiklis kirjeldame erinevaid sündmusi ja meetodeid, mis on seotud komponendi elutsükliga. Samuti käsitleme mõnda näidet, mis annavad selge pildi Reacti komponendi elutsüklist.

Reaktiivse elutsükli faasid

Komponentide elutsükkel on määratletud meetodite jadana, mida rakendatakse komponendi erinevates etappides. Järgmised on reaktsioonikomponendi elutsüklis osalevad erinevad faasid:

1. Initsialiseerimine

See etapp nõuab arendajalt omaduste ja komponendi algse oleku määratlemist. Seda tehakse komponendi konstruktoris. Järgmine kood näitab reageeriva komponendi lähtestamisfaasi:

Kood:

class Test extends React.Component (
constructor(props)
(
//Calling parent class constructor
super(props);
// Set initial state
this.state = ( hello : "Test component!" );
)
)

2. Paigaldamine

Paigaldamine on reaktsiooni elutsükli etapp, mis saabub pärast initsialiseerimise lõpetamist. Paigaldamine toimub siis, kui komponent asetatakse DOM-i konteinerile ja komponent renderdatakse veebilehele. Paigaldusfaasis on kaks meetodit, mis on järgmised:

• compnentWillMount () : Seda meetodit kutsutakse vahetult enne komponendi asetamist DOM-i, st seda funktsiooni kutsutakse vahetult enne renderdusfunktsiooni esmakordset käivitamist.
• komponentDidMount () : Seda meetodit kutsutakse vahetult pärast komponendi asetamist DOM-i, st seda funktsiooni kutsutakse kohe pärast renderdusfunktsiooni käivitamist. Esimest korda.

Ülaltoodud kahe meetodi nimest oleme mõistnud märksõnade "tahe" ja "tegi" olulisust. Nüüd on selge, et sõna "tahe" kasutatakse enne konkreetset sündmust ja "tegi" kasutatakse pärast konkreetset sündmust.

3. Ülendamine

Updation on etapp, kus lähtestamise ajal asustatud olekut ja atribuute muudetakse vajaduse korral pärast mõnda kasutaja sündmust. Uuendusfaasis kutsutakse esile järgmisi erinevaid funktsioone:

• komponentWillReceptionProps (): See funktsioon ei sõltu komponendi olekust. Seda meetodit kutsutakse enne, kui DOM-ile paigaldatud komponent saab oma rekvisiidid ümber määrata. Funktsioon võtab vastu uusi rekvisiite, mis võivad olla identsed või erinevad algsest rekvisiidist. Selles etapis saab rakendada peamiselt mõnda renderdamiseelset kontrolli.
• shouldComponentUpdate (): Mõnikord on soovitatav mitte näidata uusi rekvisiite väljundlehel. Selle saavutamiseks tagastab see meetod vale, mis tähendab, et äsja renderdatud rekvisiite ei tohiks väljundlehel kuvada.
• komponentWillUpdate (): Seda funktsiooni kutsutakse enne komponendi uuesti renderdamist, st seda meetodit kutsutakse üks kord enne renderdusfunktsiooni täitmist pärast uuendamist.
• komponentDidUpdate (): Seda funktsiooni kutsutakse pärast komponendi uuesti renderdamist, st seda meetodit kutsutakse üks kord pärast renderdusfunktsiooni täitmist pärast uuendamist.

4. Lahtivõtmine

See on komponendi elutsükli viimane etapp ja selles etapis eraldatakse komponent DOM-i mahutist . Selle etapi alla kuulub järgmine meetod.

• komponentWillUnmount (): See funktsioon käivitatakse enne komponendi lõplikku eemaldamist DOM-i konteinerist, seda nimetatakse siis, kui komponent on lehelt täielikult eemaldatud ja see näitab selle elutsükli lõppu.

Näide reaalaja elutsüklist

Siin näeme mõningaid koodinäiteid, mis näitavad reageeriva komponendi elutsüklit.

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

Kui ülalnimetatud programm algselt käivitatakse, kuvatakse sellel veebilehel allpool toodud väljund.

Kui klõpsate nuppu Klõpsake siin piirkonnas, muutub tekst järgmiseks:

Nüüd näete konsoolil nimetatavate meetodite jada, konsool näitab allpool lisatud väljundit:

Pärast ekraanil klõpsamist toimub uuesti renderdamine ja see näitab konsoolis järgmist:

Ülaltoodud konsooli väljund annab selge ülevaate reageerimise elutsükli meetoditest, millele reageerimise komponendi elutsükli jooksul tuginetakse.

Järeldus

Pärast reageerimise elutsüklis osalevate eri faaside üksikasjade läbitöötamist on selge, et on olemas olelustsükli meetodeid, millele helistatakse automaatselt. Need elutsükli meetodid komponendi erinevates faasides annavad meile vabaduse komponendi loomisel, värskendamisel või hävitamisel kohandatud sündmuste tegemiseks. Veelgi enam, need meetodid võimaldavad meil käsitleda rekvisiite ja oleku muutusi ning hõlpsalt integreerida ka muude tootjate teeke.

Soovitatavad artiklid

See on Reaxi elutsükli juhend. Siin käsitleme koos näitega reaktsiooni elutsükli etappe, nagu initsialiseerimine, paigaldamine, ülendamine ja lahtivõtmine. Lisateabe saamiseks võite vaadata ka järgmisi artikleid -

1. Reaktiiv natiiv vs reageerimine
2. Agiilne elutsükkel
3. ITIL-i elutsükkel
4. Java juurutustööriistad
5. Juhend nupule reaalajas