Reagovat životní cyklus Různé fáze životního cyklu reakce s příklady

Úvod do životního cyklu reakce

Protože víme, že komponenty jsou základními stavebními bloky reakce, je důležité vědět o různých fázích zapojených do životního cyklu reakční složky. V tomto článku popíšeme různé události a metody zapojené do životního cyklu komponenty. Rovněž uvedeme několik příkladů, které poskytnou jasný obraz životního cyklu komponenty React.

Fáze reakčního životního cyklu

Životní cyklus složek je definován jako posloupnost metod vyvolaných v různých stádiích komponenty. Následují různé fáze zapojené do životního cyklu reakční složky:

1. Inicializace

Tato fáze vyžaduje, aby vývojář definoval vlastnosti a počáteční stav komponenty. To se provádí v konstruktoru komponenty. Následující kód ukazuje fázi inicializace reakční komponenty:

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áze reakčního životního cyklu, která nastane po dokončení inicializace. K montáži dochází, když je komponenta umístěna do kontejneru DOM a komponenta je vykreslena na webové stránce. Fáze montáže má dvě metody, které jsou:

• compnentWillMount () : Tato metoda se nazývá těsně před umístěním komponenty na DOM, což je tato funkce nazývána těsně před spuštěním funkce vykreslování poprvé.
• componentDidMount () : Tato metoda se nazývá těsně po umístění komponenty na DOM, která je tato funkce nazvána hned po provedení funkce vykreslení. Poprvé.

Z názvu výše uvedených dvou metod jsme pochopili význam klíčových slov „Will“ a „Did“. Nyní je jasné, že „Will“ se používá před konkrétní událostí a „did“ se používá v případě po určité události.

3. Aktualizace

Aktualizace je fáze, kdy se stav a vlastnosti obsažené v době inicializace změní, pokud je to vyžadováno po některých uživatelských událostech. Během fáze aktualizace jsou vyvolány různé funkce:

• componentWillReceiveProps (): Tato funkce je nezávislá na stavu komponenty. Tato metoda je volána dříve, než komponenta připojená k DOM získá přiřazení svých rekvizit. Funkce přijímá nové rekvizity, které mohou být stejné nebo odlišné od původních rekvizit. V tomto kroku lze použít zejména některé kontroly před vykreslením.
• shouldComponentUpdate (): Někdy je žádoucí nezobrazovat nové rekvizity na výstupní stránce. Abychom toho dosáhli, vrátí tato metoda false, což znamená, že nově vykreslené rekvizity by se neměly zobrazovat na výstupní stránce.
• componentWillUpdate (): Tato funkce se nazývá před opětovným vykreslením komponenty, což je tato metoda, která se volá jednou před provedením funkce vykreslení po aktualizaci.
• componentDidUpdate (): Tato funkce se nazývá po opětovném vykreslení komponenty, což je tato metoda, která je volána jednou po provedení funkce vykreslení po aktualizaci.

4. Odpojení

Toto je poslední fáze životního cyklu komponenty a v této fázi je komponenta odpojena od kontejneru DOM . Následující metoda spadá do této fáze.

• componentWillUnmount (): Tato funkce je vyvolána dříve, než je komponenta konečně odpojena od kontejneru DOM, který se nazývá tato metoda, když je komponenta zcela odstraněna ze stránky a to ukazuje konec jejího životního cyklu.

Příklad životního cyklu reakce

Zde uvidíme několik příkladů kódu zobrazujících životní cyklus reakční komponenty.

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

Když je výše uvedený program proveden zpočátku, zobrazí na webové stránce níže uvedený výstup.

Po kliknutí na oblast Click Here se text změní na následující:

Nyní na konzole můžete vidět posloupnost volaných metod, konzole zobrazí níže připojený výstup:

Po kliknutí na obrazovku dojde k opětovnému vykreslení a na konzole se zobrazí následující informace:

Výše uvedený výstup z konzole poskytuje jasné pochopení metod životního cyklu reakcí vyvolaných během životního cyklu reakční komponenty.

Závěr

Po pokrytí podrobností o různých fázích zapojených do reakčního životního cyklu je jasné, že existují metody životního cyklu, které se nazývají automaticky. Tyto metody životního cyklu v různých fázích komponenty nám dávají svobodu provádět přizpůsobené události, když je komponenta vytvořena, aktualizována nebo zničena. Tyto metody nám navíc umožňují zvládat rekvizity a změny stavu a také snadno integrovat knihovny třetích stran.

Doporučené články

Toto je průvodce životním cyklem React. Zde diskutujeme fáze reakčního životního cyklu, jako je inicializace, montáž, aktualizace a odpojení spolu s příkladem. Další informace naleznete také v následujících článcích -

1. Reagovat Nativní vs. Reagovat
2. Agilní životní cyklus
3. Životní cyklus ITIL
4. Java Deployment Tools
5. Průvodce tlačítkem v Reagovat Nativní