Reakció életciklusa A reagálás életciklusának különböző fázisai példákkal

Bevezetés a reagálás életciklusához

Mivel tudjuk, hogy az alkotóelemek a reakció alapvető alkotóelemei, fontos tudni a reagált komponensek életciklusának különböző szakaszairól. Ebben a cikkben leírjuk az alkatrészek életciklusának különböző eseményeit és módszereit. Ezenkívül bemutatunk néhány példát, amelyek világos képet adnak a React komponens életciklusáról.

A reagálás életciklusának fázisai

Az összetevők életciklusát úgy definiálják, hogy az összetevő különböző szakaszaiban alkalmazott módszerek sorozata. A következők a reagált komponens életciklusának különböző szakaszai:

1. Inicializálás

Ebben a szakaszban a fejlesztőnek meg kell határoznia a tulajdonságok és az összetevő kezdeti állapotát. Ezt az összetevő konstruktorában hajtják végre. A következő kód egy reaktív komponens inicializálási szakaszát mutatja:

Kód:

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

2. Szerelés

A szerelés az inicializálás befejezését követő react életciklus fázisa. A szerelés akkor történik, amikor az összetevőt a DOM tárolóra helyezik, és az összetevőt egy weboldalon jelenítik meg. A szerelési szakasznak két módja van, amelyek a következők:

• compnentWillMount () : Ezt a módszert közvetlenül azelőtt kell meghívni, mielőtt az összetevőt a DOM-ra helyezik, vagyis ezt a funkciót közvetlenül a render funkció első végrehajtása előtt hívják meg.
• komponentDidMount () : Ezt a módszert azonnal meghívják, miután az összetevőt a DOM-ra helyezték, vagyis ezt a funkciót közvetlenül a render funkció végrehajtása után hívják. Először.

A fenti két módszer nevéből megértettük a „Will” és a „Did” kulcsszavak jelentőségét. Most egyértelmű, hogy a „akaratot” egy adott esemény előtt, a „nagy” -t pedig egy adott esemény után használják.

3. Updation

A frissítés egy olyan szakasz, amelyben az inicializáláskor feltöltött állapot és tulajdonságok szükség esetén megváltoznak bizonyos felhasználói események után. Az alábbiakban felsoroltak különféle funkciókat, amelyeket az updation szakaszban hívnak fel:

• komponentWillReceptionProps (): Ez a funkció független az összetevő állapotától. Ezt a módszert akkor hívják meg, mielőtt egy DOM-ra szerelt összetevő megkapja a kellékeit. A funkció új kellékeket fogad el, amelyek azonosak vagy eltérhetnek az eredeti kellékektől. Ebben a lépésben főként néhány renderelés előtti ellenőrzés alkalmazható.
• shouldComponentUpdate (): Néha kívánatos, hogy az új kellékeket ne jelenítsék meg a kimeneti oldalon. Ennek elérése érdekében ez a módszer hamisat ad vissza, ami azt jelenti, hogy az újonnan megjelenített kellékeket nem szabad megjeleníteni a kimeneti oldalon.
• komponentWillUpdate (): Ezt a funkciót az összetevő újramegjelenítése előtt hívják meg, azaz ezt a módszert egyszer hívják, mielőtt a renderelési funkció végrehajtódik az updation után.
• komponentDidUpdate (): Ezt a függvényt egy komponens újraterjesztése után hívják, vagyis ezt a módszert egyszer hívják meg azután, hogy a megjelenítési funkció az updation után végrehajtásra kerül.

4. Leszerelés

Ez az alkatrész életciklusának utolsó fázisa, és ebben a szakaszban az alkatrész leválasztódik a DOM tartálytól . A következő módszer tartozik ebbe a szakaszba.

• komponentWillUnmount (): Ezt a funkciót akkor hívják meg, mielőtt az összetevőt véglegesen leválasztják a DOM-tárolóból, ezt a módszert hívják, amikor egy összetevőt teljesen eltávolítanak az oldalról, és ez mutatja életciklusának végét.

Példa a reagálás életciklusára

Itt látunk néhány, a reagált komponens életciklusát mutató kódpéldát.

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

A fenti program kezdeti végrehajtásakor az alábbiak szerint jelenik meg a weboldalon.

A Kattintson ide gombra kattintva a szöveg a következőre változik:

Most a konzolon láthatja az úgynevezett módszerek sorozatát, a konzol megjeleníti az alábbiakban csatolt kimenetet:

Miután rákattint a képernyőre, megtörténik az újra-renderelés, amely a következőket jeleníti meg a konzolon:

A fenti konzolkimenet világosan megérti a react életciklus-módszereit, amelyekre a react komponens életciklusa során hivatkoztak.

Következtetés

Miután áttekintettük a reagálási életciklusban részt vevő különböző fázisokat, egyértelmű, hogy vannak olyan életciklus-módszerek, amelyek automatikusan meghívásra kerülnek. Ezek az életciklus-módszerek az alkatrészek különböző fázisaiban megadják a szabadságot arra, hogy testreszabott eseményeket hajtsunk végre, amikor egy összetevő létrejön, frissül vagy megsemmisül. Ezenkívül ezek a módszerek lehetővé teszik a kellékek és az állapotváltozások kezelését, valamint a harmadik fél könyvtárainak egyszerű integrálását.

Ajánlott cikkek

Ez egy útmutató a React életciklusához. Itt a példával együtt tárgyaljuk a reagálás életciklusának fázisait, például az inicializálást, a felszerelést, az emelést és a leszerelést. A következő cikkeket is megnézheti további információkért -

1. Reagál natív vs reagál
2. Agilis életciklus
3. ITIL életciklus
4. Java telepítési eszközök
5. Útmutató a gomb reagálásához natív