Cykl życia komponentu React: co musisz wiedzieć [2022]
Opublikowany: 2021-01-06W React aplikacja podzielona jest na możliwie najmniejsze części zwane Components. Komponenty mogą być prezentacyjne lub kontenerowe.
Kiedy mówimy o komponentach prezentacyjnych, nie mają one logiki. Są osadzone wewnątrz komponentów; ma tylko interfejs użytkownika.
Komponenty kontenera to te, które używają komponentów prezentacyjnych i zawierają logikę biznesową w komponencie. Takie komponenty często muszą utrzymywać lokalne obiekty stanu, aby osiągnąć jeden z wielu przypadków użycia, za które mogą być odpowiedzialne. Komponenty te wykorzystują komponenty prezentacyjne jako komponenty potomne i przekazują dane za pomocą różnych właściwości.
React pozwala na posiadanie komponentów klasowych lub funkcjonalnych. Przeważającym wzorcem używanym w ekosystemie reakcji jest to, że komponent prezentacyjny jest komponentem typu funkcjonalnego, a komponenty kontenerowe są typu klasowego.
Cykl życia produktu React pokazuje dokładny proces, przez który przechodzą komponenty, oraz przyczynę cyklu życia komponentu React .
Spis treści
Komponenty funkcjonalne
Są to takie, które nie mają stanu i wykonywane są tylko manipulacje przy użyciu rekwizytów.
Wszystkie metody cyklu życia komponentów lub setState nie mogą być używane ani dostępne w takich komponentach.
Kasa: React Project Ideas
Składniki klas
Te komponenty mogą mieć stan lokalny i mają dostęp do metod cyklu życia i setState .
Typowy komponent klasy w React wygląda tak:- 
Cykl życia komponentu składa się z trzech faz:-
- Montowanie
- Aktualizacja
- Odmontowywanie
Montowanie
Kiedy dowolny komponent jest tworzony i wstawiany do DOM (Document Object Model), stosowane są następujące metody:
● konstruktor()
● statyczne getDerivedStateFromProps()
● render()
● componentDidMount()
Aktualizacja
Gdy właściwość lub stan dostarczony do komponentu ulegnie zmianie, ponowne renderowanie komponentu jest również nazywane fazą aktualizacji. W tej fazie poniżej podane są następujące metody cyklu życia, które nazywane są:
● statyczne getDerivedStateFromProps()
● shouldComponentUpdate()
● render()
● pobierzSnapshotBeforeUpdate()
● componentDidUpdate()
Przeczytaj: Vue vs React: różnica między Vue a React
Odmontowywanie
Ta metoda jest wywoływana podczas odmontowywania dowolnego komponentu:-
● komponent willUnmount()
Jest to ostatnia funkcja, która zostanie wywołana przed zniszczeniem modelu obiektowego dokumentu. Działa jako czyszczenie dowolnego elementu skonstruowanego podczas componentWillMount.
W celu obsługi błędów w komponencie jest kilka zarezerwowanych metod:-
● statyczne getDerivedStateFromError()
● componentDidCatch()
Powszechnie stosowane metody cyklu życia wyjaśnione szczegółowo: -
● konstruktor(rekwizyty)
Ta metoda cyklu życia jest używana podczas fazy montażu komponentów. W tym miejscu można zadeklarować lokalny obiekt stanu. Super(props) jest wywoływana wewnątrz konstruktora przed jakąkolwiek inną instrukcją; w przeciwnym razie wystąpi błąd podczas uzyskiwania dostępu do this.props.
Jeśli nie zamierza się deklarować lokalnego obiektu stanu ani wiązać procedury obsługi zdarzeń z instancją, nie ma potrzeby pisania metody cyklu życia komponentów.
Stan wywołujący w konstruktorze() nie jest zalecany, ponieważ wywołałby ponowne renderowanie przed zakończeniem poprzedniego cyklu.
Constructor() to jedyne miejsce, w którym można bezpośrednio przypisać stan. W przeciwnym razie, jeśli istnieje potrzeba zmiany stanu lub przypisania czegoś w jego wnętrzu, należy użyć this.setSate .
● render()
Wewnątrz tych komponentów metody zapisana jest część JSX. JSX jest podobny do HTML, ale jest rozszerzoną składnią javascript. Kiedy używamy JSX, możemy również użyć wyrażeń JavaScript wewnątrz metody render.
Metoda render() dowolnych komponentów nadrzędnych może zawierać komponenty podrzędne. Wszystko zgodnie ze schematem składu, na którym bazują składniki reagujące.
Za każdym razem, gdy wywoływana jest metoda render rodzica, renderowanie rozpoczyna się również dla komponentów podrzędnych, a renderowanie nadrzędne jest zakończone dopiero po zakończeniu całego renderowania podrzędnego.
Metoda render jest wymagana; bez tego nie można wykonać komponentu, ponieważ jest to jedyne miejsce, w którym można zapisać widokową część komponentu.
Metoda render jest czysta; oznacza to, że nie może modyfikować stanu w nim zawartego.
W przypadku dowolnego komponentu w fazie aktualizacji ponowne renderowanie dla danego komponentu nastąpi lub nie może zależeć od typu zwróconego lub użycia metody cyklu życia shouldComponentUpdate() .
Posiadanie wywołań API i jakiejkolwiek interakcji z przeglądarką wewnątrz tej metody nie jest zalecane i spowoduje to błąd.
● componentDidMount()
Ta metoda jest wywoływana natychmiast po zamontowaniu składnika. Teraz DOM jest dostępny do dalszych manipulacji. Wewnątrz tej metody można wywołać setState .
Z tego miejsca można również dokonywać interakcji z przeglądarką lub wywołaniami API.
Ta metoda jest wywoływana tylko raz, czyli w czasie tworzenia. Metoda nie zostanie uruchomiona w dalszej części ponownego renderowania, a zawarta w niej logika również nie zostanie uruchomiona.
● componentDidUpdate()
To to samo co componentDidMount.; można uzyskać błąd z tą różnicą, że jest on wywoływany tylko wtedy, gdy nastąpi ponowne renderowanie komponentu. Ta metoda nie jest wywoływana dla początkowego renderowania.
W ramach tej metody można wykonać setState i efekty uboczne. Ale setState musi być opakowany w warunek; w przeciwnym razie ktoś mógłby znaleźć się w pętli render endless, a render nigdy by się nie skończył.
Również componentDidUpdate nie zostanie wywołana, jeśli powinnaComponentUpdate() zwróci false.
● componentWillUnmount()
Ta metoda jest wywoływana, gdy trwa faza odmontowywania komponentu.
Wewnątrz metody, najlepiej, można osiągnąć usunięcie programów obsługi zdarzeń i oczyszczenie pamięci.
Funkcja setState() nie powinna być wywoływana wewnątrz tego, ponieważ powoduje to ponowne renderowanie komponentu.
● shouldComponentUpdate()
Podczas tworzenia aplikacji React często zdarzają się sytuacje, w których trzeba unikać niepotrzebnego ponownego renderowania komponentów. Aby osiągnąć ten składnik w klasie, należy zastosować metodę opisaną powyżej. Jeśli ta metoda zwróci wartość false, ponowne renderowanie składnika i jego składników podrzędnych nie nastąpi.
Poprzednie właściwości można sprawdzić i porównać z dostarczonymi nowymi właściwościami, aby upewnić się, że nie ma żadnych zmian, a następnie zwrócić wartość false.
Wywołanie metody setState() wewnątrz tego nie jest zalecane, ponieważ spowoduje to ponowne renderowanie.
Ponadto w ramach tej metody nie należy przeprowadzać skutków ubocznych.
Istnieje również inna alternatywa dla tej metody. Podczas rozszerzania klasy można używać React.pureComponents. Jest to znacznie bardziej stabilne i niezawodne niż powinnoComponentUpdate().
Wreszcie, istnieją granice błędów w typach komponentów reakcji, które są obecne w celu wyłapania błędów.
Trzeba po prostu owinąć komponent z komponentem granicy błędu.
Wewnątrz tego specjalnego komponentu stosowane są dwie metody cyklu życia:-
- statyczne getDerivedStateFromError()
- komponentDidCatch()
Oba są wywoływane, jeśli jakikolwiek składnik potomny zgłosi błąd.
Pierwszy z nich jest wywoływany w fazie renderowania, więc żadne efekty uboczne nie są w nim dozwolone. Drugi jest wywoływany podczas fazy zatwierdzenia, więc w jego wnętrzu dozwolone są efekty uboczne.
Przeczytaj także: Wynagrodzenie programisty ReactJS w Indiach
Ucz się kursów inżynierii oprogramowania online z najlepszych światowych uniwersytetów. Zdobywaj programy Executive PG, Advanced Certificate Programs lub Masters Programs, aby przyspieszyć swoją karierę.
Wniosek
Cykl życia komponentu React zwiększa złożoność kodu, ale systematyczne wykonywanie i manipulowanie za pomocą metod wydaje się całkiem atrakcyjne z perspektywy programisty. Cykl życia Reacta pozwala na restrukturyzację lub manipulowanie komponentami.
Jeśli chcesz dowiedzieć się więcej na temat reagowania, pełnego rozwoju oprogramowania, sprawdź program Executive PG UpGrad i IIIT-B w zakresie pełnego tworzenia oprogramowania, który jest przeznaczony dla pracujących profesjonalistów i oferuje ponad 500 godzin rygorystycznych szkoleń, ponad 9 projektów i zadania, status absolwentów IIIT-B, praktyczne praktyczne projekty zwieńczenia i pomoc w pracy z najlepszymi firmami.
