Jakie są metody cyklu życia komponentów w React JS?

Podobnie jak my wszyscy, komponenty React również rodzą się, rosną i umierają!

(Habilelabs) (7 grudnia 2020 r.)

Do Payal Mittal

metody cyklu życia komponentów w Reactjs
Metody cyklu życia komponentów w React.js

Każdy komponent klasy React przechodzi przez serię„ metody cyklu życia ”. Zasadniczo wszystko w React składa się z komponentów lub części komponentów.

Te komponenty podlegają pewnym cyklom życia, prawie takim, jak każda żywa istota na Ziemi. Rodzą się, rosną i w końcu umierają. Faza, w której się rodzą, nazywana jest montowaniem, kiedy rosną nazywana jest aktualizacją, a ostatnia faza śmierci jest znana jako odmontowanie.

Cały ten proces nazywa się „cyklem życia komponentu”. Na każdym z tych etapów React.js renderuje pewne wbudowane metody określane jako metody cyklu życia, które kontrolują zachowanie komponentów w aplikacji.

Na tym blogu przejdziemy przez ten cykl życia i uzyskamy wiedzieć o tych metodach cyklu życia –

Co to są metody cyklu życia komponentów?

Metody cyklu życia komponentów są podzielone na trzy różne fazy, np. –

  • Montaż
  • Aktualizacja
  • Odmontowywanie

Cały cykl życia komponentu można zrozumieć dzięki tej prostej wizualnej ilustracji –

Diagram cyklu życia komponentu

Teraz szczegółowo omówimy każdą z faz i ich metody. Chodźmy więc –

✔ Montowanie metod cyklu życia

Po ukończeniu komponentu inicjalizacja, rozpoczyna się montowanie komponentu, w którym komponent jest tworzony i wstawiany do DOM.

Tutaj omówimy najczęściej używane metody cyklu życia-

1. constructor ()

Element constructor() jest wywoływany jako pierwszy przed rozpoczęciem montowania i jest zasadniczo używany do obsługi tych dwóch celów-

Zamiast używać setState(), możesz bezpośrednio przypisać stan początkowy do this.state() w metodzie constructor. Oto jak możemy zdefiniować nasz stan-

constructor(props) {
super(props);this.state = { count: 0 };
this.handleClick = this.handleClick.bind(this);
console.log("Constructor!");
}

2. render ()

Następna w wierszu jest metoda render()! Montuje komponent na DOM i renderuje go do interfejsu użytkownika. Ta metoda jest wywoływana w celu sprawdzenia atrybutów this.state i this.props zawsze, gdy występuje jakakolwiek zmiana w state lub props.

render to najczęściej używana metoda ze wszystkich w Reakcie. Jeśli chcesz wyrenderować elementy w DOM, to render() jest metodą, na którą należy się spodziewać, ponieważ możesz je tutaj zapisać.

Każde wywołanie może zwrócić wiele typów, np. łańcuchy, liczby, tablice, fragmenty, wartości logiczne lub elementy null , portal lub React. Oto kilka przykładów –

class MyComponent extends React.Component {
render() {//return string
return "Hello!!"//return null value in case you don"t want to render anything
return null//return fragments
return
Hello

Friends

//return arrays
return [
Hello
,
World

]; }
}

Uwaga : Jeśli metoda componentShouldMount zwróci wartość logiczną false, wówczas metoda renderowania nie zostanie wywołana.

3. componentDidMount ()

Ta metoda jest wywoływana natychmiast po wstawieniu komponentu do DOM za pomocą metody render . Jest wywoływana tylko raz w cyklu życia.

  • Jeśli chcesz skonfigurować jakiekolwiek subskrypcje, to jest to dobre miejsce, aby to zrobić. Musisz jednak zrezygnować z subskrypcji w componetWillUnmount().
  • Jest to również dobre miejsce na utworzenie wystąpienia żądania sieciowego, jeśli chcesz załadować dane ze zdalnego punkt końcowy.
  • Możesz nawet zadzwonić do setState() tutaj. Chociaż spowoduje to ponowne uruchomienie renderowania, nie zobaczysz przynajmniej stanu pośredniego. Należy jednak zachować ostrożność podczas korzystania z tego, ponieważ powoduje to problemy z wydajnością. W rzeczywistości stan początkowy należy przypisać w metodzie constructor(), zgodnie z zaleceniami. Ale to podejście przydaje się, gdy trzeba zmierzyć węzeł DOM przed wyrenderowaniem czegoś, co zależy od jego rozmiaru.

✔ Aktualizowanie metod cyklu życia

W przeciwieństwie do „Montażu faza, która występuje tylko raz podczas montowania komponentu, faza Updating może wystąpić wiele razy.

Ilekroć następuje zmiana we właściwościach / stanie komponentu, który wymaga aktualizacji, zegar wywołuje aby render i componentDidupdate potwierdziły, zaktualizowały i wyrenderowały zmianę, do gry wchodzi faza aktualizacji.

1. static getDerivedStateFromProps ()

Jest to pierwsza metoda, która jest wywoływana w fazie cyklu życia aktualizacji. Można go wywołać wiele razy, ponieważ jest wywoływany za każdym razem, gdy inicjowana jest metoda render . Jest więc oczywiste, że jest wywoływana zarówno w fazie montowania, jak i aktualizacji.

Ta metoda nie jest zbyt powszechna i rzadko używana w określonych przypadkach, na przykład gdy stan komponentu zmienia się wraz ze zmianami właściwości w czasie. Jak sama nazwa wskazuje, wyprowadza stan z właściwości.

2. shouldComponentUpdate ()

Ta metoda jest wywoływana, gdy komponent ma zostać ponownie wyrenderowany. Określa, czy bieżące zmiany w states / props mają wpływ na wyjście komponentu. Służy wyłącznie do optymalizacji wydajności i informuje nas „czy komponent powinien zostać zaktualizowany, czy nie”, co jest wyrażone za pomocą wartości logicznej true lub false wartości. Domyślnie zwraca true.

Jeśli

shouldComponentUpdate() zwraca false oznacza, że ​​mówisz Reactowi, aby pominął tę aktualizację, a zatem metody render i componentDidUpdate nie zostaną wywołane.

Działanie metody shouldComponentUpdate

Jednak możesz również zapobiec niepotrzebnemu renderowaniu, używając wbudowanego

React.PureComponent który pozwala porównać nową i starą state / props i sprawia, że ​​jest mało prawdopodobne, że pominiesz jakąkolwiek niezbędną aktualizację.

3. render ()

Dalej jest render. To, czy zostanie wywołana, zależy od wartości zwróconej przez shouldComponentUpdate. Uruchomi się tylko w przypadku, gdy zostanie zwrócony true .

4. getSnapshotBeforeUpdate ()

Po wywołaniu render

getSnapshotBeforeUpdate jest następny. Nie jest powszechnie używany, ale jest bardzo przydatny w określonych przypadkach, na przykład gdy potrzebujesz dostępu do niektórych informacji w DOM i zmienić je zaraz po ich aktualizacji.

Ta metoda pozwala komponentowi na przechwytywanie pewnych informacji (wysokość przewijania) z DOM, aby można było je później dostosować (po aktualizacji). Musisz jednak zrozumieć, że przechwycona tutaj wysokość przewijania wskazuje wysokość przed zaktualizowaniem go do DOM.

Możemy przekazać prevState i prevProps jako argumenty, jak podano tutaj –

getSnapshotBeforeUpdate(prevProps, prevState) {return null;}

5. componentDidUpdate ()

Ta metoda jest wywoływana natychmiast po zaktualizowaniu i ponownym wyrenderowaniu komponentu. Otrzymuje prevState i prevProps jako parametry i może również uzyskać dostęp do nowo zmienionego stanu lub właściwości.

Jednak zdecydowanie odradza się ustawianie stanu bezpośrednio w tej funkcji, w przeciwnym razie spowoduje to dalsze wyzwolenie render i componentDidUpdate.

Za pomocą tej metody możemy obliczyć scrollHeight różnicę między tym, co było przed aktualizacją.

To jest tylko jeden przypadek użycia. jest kilka innych, takich jak –

👉 Aby pobrać dane z serwera

👉 Aby uzyskać dostęp do węzłów DOM komponentu React

Aby uzyskać szczegółowe informacje o jego przypadkach użycia , sprawdź oficjalną dokumentację –

React.Component – React

Ta strona zawiera szczegółowe informacje o API dla klasy komponentów React definicja. Zakłada się, że „znasz…

awarejs.org

✔ Odmontowywanie metod cyklu życia

To jest ostatnia faza, przez którą przechodzi komponent reagujący, gdzie zostaje odmontowany z DOM i zniszczony. W tej fazie istnieje tylko jedna metoda cyklu życia.

1. componentWillUnmount ()

componentWillUnmount metoda jest wywoływana jako pierwsza w fazie odmontowywania, tuż przed zniszczeniem komponentu.Jest to miejsce, w którym można wykonać dowolną metodę czyszczenia, zasadniczo anulując żądania sieciowe, unieważniając liczniki czasu lub czyszcząc niechciane subskrypcje, które zostały utworzone za pomocą metody componentDidMount .

Podsumowanie:

Istnieją inne metody, które są wywoływane w przypadku wystąpienia błędu podrzędny, metody te są nazywane metodami cyklu życia obsługi błędów. Znajdziesz je tutaj .

To byli wszyscy programiści !! Mam nadzieję, że dzięki temu blogowi lepiej zrozumiesz metody cyklu życia komponentu React. Wkrótce wrócę do Ciebie z kolejnym wnikliwym blogiem.

Do życzę miłej lektury !! 🙃

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *