React Lifecycle - Różne fazy cyklu życia reakcji z przykładami

Wprowadzenie do cyklu życia React

Ponieważ wiemy, że składniki są podstawowymi elementami składowymi reagowania, ważne jest, aby wiedzieć o różnych etapach cyklu życia składnika reagującego. W tym artykule opiszemy różne zdarzenia i metody związane z cyklem życia komponentu. Omówimy również kilka przykładów, które dadzą jasny obraz cyklu życia komponentu React.

Fazy ​​cyklu życia reakcji

Cykl życia komponentów definiuje się jako sekwencję metod wywoływanych na różnych etapach komponentu. Poniżej przedstawiono różne fazy biorące udział w cyklu życia elementu reagującego:

1. Inicjalizacja

Ten etap wymaga od programisty zdefiniowania właściwości i stanu początkowego komponentu. Odbywa się to w konstruktorze komponentu. Poniższy kod pokazuje fazę inicjalizacji komponentu reagującego:

Kod:

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

2. Montaż

Montaż to faza cyklu życia reakcji, która następuje po zakończeniu inicjalizacji. Montowanie ma miejsce, gdy komponent zostanie umieszczony w kontenerze DOM, a komponent zostanie wyrenderowany na stronie internetowej. Faza montażu ma dwie metody:

• compnentWillMount () : Ta metoda jest wywoływana tuż przed umieszczeniem komponentu w DOM, czyli ta funkcja jest wywoływana tuż przed pierwszym uruchomieniem funkcji renderowania.
• componentDidMount () : Ta metoda jest wywoływana zaraz po umieszczeniu komponentu w DOM, co oznacza, że ​​ta funkcja jest wywoływana zaraz po uruchomieniu funkcji renderowania. Po raz pierwszy.

Z nazwy powyższych dwóch metod zrozumieliśmy znaczenie słów kluczowych „Will” i „Did”. Teraz jest jasne, że „Wola” jest używana przed konkretnym wydarzeniem, a „zrobione” jest używane w przypadku po określonym wydarzeniu.

3. Aktualizacja

Aktualizacja to faza, w której stan i właściwości wypełniane w momencie inicjalizacji są zmieniane, jeśli jest to wymagane po niektórych zdarzeniach użytkownika. Poniżej przedstawiono różne funkcje wywoływane podczas fazy aktualizacji:

• componentWillReceiveProps (): Ta funkcja jest niezależna od stanu składnika. Ta metoda jest wywoływana, zanim komponent zamontowany w DOM zostanie ponownie przypisany. Funkcja akceptuje nowe rekwizyty, które mogą być identyczne lub różne od oryginalnych rekwizytów. Na tym etapie można zastosować głównie kontrole przed renderowaniem.
• shouldComponentUpdate (): Czasami pożądane jest, aby nie wyświetlać nowych rekwizytów na stronie wyjściowej. Aby to osiągnąć, ta metoda zwraca false, co oznacza, że ​​nowo renderowane rekwizyty nie powinny być wyświetlane na stronie wyjściowej.
• componentWillUpdate (): Ta funkcja jest wywoływana przed ponownym renderowaniem komponentu, to jest ta metoda jest wywoływana raz przed wykonaniem funkcji renderowania po aktualizacji.
• componentDidUpdate (): Ta funkcja jest wywoływana po ponownym renderowaniu komponentu, tzn. ta metoda jest wywoływana raz po wykonaniu funkcji renderowania po aktualizacji.

4. Odmontowanie

Jest to ostatnia faza cyklu życia komponentu, aw tej fazie komponent jest odłączany od kontenera DOM . Następująca metoda należy do tej fazy.

• componentWillUnmount (): Ta funkcja jest wywoływana, zanim komponent zostanie ostatecznie odłączony od kontenera DOM, dlatego ta metoda jest wywoływana, gdy komponent zostanie całkowicie usunięty ze strony, co pokazuje koniec jego cyklu życia.

Przykład cyklu życia React

Tutaj zobaczymy kilka przykładów kodu pokazujących cykl życia komponentu reagującego.

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

Kiedy powyższy program jest wykonywany początkowo, pokaże poniższe dane wyjściowe na stronie internetowej.

Po kliknięciu obszaru Kliknij tutaj tekst zmieni się na:

Teraz na konsoli możesz zobaczyć sekwencję wywoływanych metod, konsola wyświetli załączone poniżej dane wyjściowe:

Po kliknięciu na ekran nastąpi ponowne renderowanie i wyświetli się w konsoli:

Powyższe dane wyjściowe konsoli dają wyraźne zrozumienie metod cyklu życia reaktora przywołanych podczas cyklu życia komponentu reakcji.

Wniosek

Po omówieniu szczegółów różnych faz biorących udział w cyklu życia reagowania, jasne jest, że istnieją metody cyklu życia, które są wywoływane automatycznie. Te metody cyklu życia na różnych etapach komponentu dają nam swobodę wykonywania niestandardowych zdarzeń podczas tworzenia, aktualizowania lub niszczenia komponentu. Ponadto metody te pozwalają nam łatwo obsługiwać rekwizyty i zmiany stanu, a także łatwo integrować biblioteki innych firm.

Polecane artykuły

Jest to przewodnik po cyklu React Lifecycle. Tutaj omawiamy fazy cyklu życia reakcji, takie jak inicjalizacja, montowanie, aktualizacja i odmontowywanie wraz z przykładem. Możesz także przejrzeć następujące artykuły, aby dowiedzieć się więcej -

1. React Native vs React
2. Zwinny cykl życia
3. Cykl życia ITIL
4. Narzędzia wdrażania Java
5. Przewodnik po przycisku w React Native