Reagovať na životný cyklus Rôzne fázy životného cyklu reakcie s príkladmi

Úvod do životného cyklu reakcie

Pretože vieme, že komponenty sú základnými stavebnými kameňmi reakcie, je dôležité poznať rôzne štádiá, ktoré sa podieľajú na životnom cykle reakčnej zložky. V tomto článku opíšeme rôzne udalosti a metódy zahrnuté v životnom cykle komponentu. Ďalej uvedieme niekoľko príkladov, ktoré poskytnú jasný obraz o životnom cykle komponentov React.

Fázy životného cyklu reakcie

Životný cyklus komponentov je definovaný ako postupnosť metód vyvolaných v rôznych štádiách zložky. Nasledujú rôzne fázy zapojené do životného cyklu reakčnej zložky:

1. Inicializácia

Táto fáza vyžaduje, aby vývojár definoval vlastnosti a počiatočný stav komponenty. Robí sa to v konštruktore komponentu. Nasledujúci kód ukazuje fázu inicializácie reakčnej zložky:

kód:

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

2. Montáž

Montáž je fáza reakčného životného cyklu, ktorá nastane po dokončení inicializácie. K montáži dôjde, keď je komponent umiestnený na kontajneri DOM a komponent je vykreslený na webovej stránke. Montážna fáza má dve metódy, ktoré sú:

• compnentWillMount () : Táto metóda sa volá tesne pred umiestnením komponentu do DOM, ktorý sa nazýva táto funkcia tesne pred vykonaním funkcie vykreslenia prvýkrát.
• componentDidMount () : Táto metóda sa volá hneď po umiestnení komponentu do DOM, ktorý sa nazýva táto funkcia hneď po vykonaní funkcie renderovania. Prvýkrát.

Z názvu vyššie uvedených dvoch metód sme pochopili význam kľúčových slov „Will“ a „Did“. Teraz je zrejmé, že „Will“ sa používa pred konkrétnou udalosťou a „did“ sa používa v prípade po konkrétnej udalosti.

3. Aktualizácia

Aktualizácia je fáza, v ktorej sa po niektorých používateľských udalostiach zmení stav a vlastnosti, ktoré sa nachádzajú v čase inicializácie. Nasledujú rôzne funkcie vyvolané počas fázy aktualizácie:

• componentWillReceiveProps (): Táto funkcia je nezávislá od stavu komponentu. Táto metóda sa volá predtým, ako komponent, ktorý je pripojený na DOM, dostane pridelené rekvizity. Funkcia prijíma nové rekvizity, ktoré môžu byť rovnaké alebo odlišné od pôvodných rekvizít. V tomto kroku je možné vykonať najmä niektoré kontroly pred vykreslením.
• shouldComponentUpdate (): Niekedy je žiaduce nezobrazovať nové rekvizity na výstupnej stránke. Aby sa to dosiahlo, táto metóda vracia nepravdivé, čo znamená, že novo vykreslené rekvizity by sa na výstupnej stránke nemali zobrazovať.
• componentWillUpdate (): Táto funkcia sa volá predtým, ako sa komponent znovu vykreslí, čo je táto metóda, ktorá sa volá raz pred vykonaním funkcie renderovania po aktualizácii.
• componentDidUpdate (): Táto funkcia sa volá po opätovnom vykreslení komponentu, čo je táto metóda, ktorá sa volá raz po vykonaní funkcie renderovania po aktualizácii.

4. Odpojenie

Toto je posledná fáza životného cyklu komponentu av tejto fáze je komponent odpojený od kontajnera DOM . Nasledujúca metóda patrí do tejto fázy.

• componentWillUnmount (): Táto funkcia sa vyvolá predtým, ako sa komponent konečne odpojí od kontajnera DOM, ktorý sa nazýva táto metóda, keď je komponent úplne odstránený zo stránky a to ukazuje koniec jeho životného cyklu.

Príklad životného cyklu reakcie

Tu uvidíme príklady kódu ukazujúce životný cyklus reakčnej zložky.

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

Po spustení vyššie uvedeného programu sa na webovej stránke zobrazí nižšie uvedený výstup.

Po kliknutí na oblasť Kliknite sem sa text zmení na nasledujúci text:

Teraz na konzole vidíte postupnosť volaných metód, konzola zobrazí výstup uvedený nižšie:

Po kliknutí na obrazovku sa uskutoční opätovné vykreslenie a na konzole sa zobrazí tento text:

Vyššie uvedený výstup z konzoly poskytuje jasné pochopenie metód životného cyklu reakcií vyvolaných počas životného cyklu reakčnej zložky.

záver

Po pokrytí podrobností o rôznych fázach zapojených do životného cyklu reakcie je zrejmé, že existujú metódy životného cyklu, ktoré sa nazývajú automaticky. Tieto metódy životného cyklu v rôznych fázach súčasti nám dávajú slobodu vykonávať prispôsobené udalosti, keď je komponent vytvorený, aktualizovaný alebo zničený. Tieto metódy nám navyše umožňujú zvládnuť rekvizity a zmeny stavu a tiež ľahko integrovať knižnice tretích strán.

Odporúčané články

Toto je sprievodca životným cyklom React. Tu diskutujeme fázy reakčného životného cyklu, ako je inicializácia, montáž, aktualizácia a odpojenie spolu s príkladom. Ďalšie informácie nájdete aj v nasledujúcich článkoch -

1. Reagovať natívne verzus reagovať
2. Agilný životný cyklus
3. Životný cyklus ITIL
4. Java Deployment Tools
5. Sprievodca po tlačidle v Native React Native