React Components - Props and States w ReactJS z przykładami

„W React wszystko jest składnikiem”

Jeśli znasz Reacta, to na pewno wiele razy słyszałeś lub czytałeś to zdanie. Ale czy wiesz, co to dokładnie oznacza i jak jest używane? Jeśli nie, przeczytaj tego bloga, aby dowiedzieć się wszystkiego o komponentach React i różnych fazach cyklu życia. Jestem pewien, kiedy skończysz czytając ten blog, będziesz miał pełne zrozumienie komponentów React i otaczających je pojęć. Ale zanim przejdziesz dalej, rzuć okiem na tematy, które będę omawiać:

• Co to są komponenty React?
• Zalety komponentów React
• Rekwizyty
• Stany
• Stany kontra rekwizyty
• Reaguj na cykl życia komponentów

Co to są komponenty React?

Wcześniej programiści musieli napisać 1000 linii kodu, aby opracować prostą aplikację jednostronicową. Większość tych aplikacji była zgodna z tradycyjną strukturą DOM, a wprowadzanie do nich zmian było bardzo trudnym i żmudnym zadaniem dla programistów.Musieli ręcznie wyszukać element, który wymagał zmiany i odpowiednio go zaktualizować. Nawet mały błąd doprowadziłby do awarii aplikacji. Ponadto aktualizacja DOM była bardzo kosztowna. W ten sposób wprowadzono podejście oparte na komponentach. W tym podejściu cała aplikacja jest podzielona na logiczne fragmenty zwane Komponentami. React był jednym z frameworków, które zdecydowały się na takie podejście.Jeśli planujesz rozwijać swoją karierę w tworzeniu stron internetowych, wczesny start otworzyłby przed Tobą wiele możliwości.

Przyjrzyjmy się teraz, czym są te komponenty.

Komponenty React są uważane za bloki konstrukcyjne interfejsu użytkownika. Każdy z tych komponentów istnieje w tej samej przestrzeni, ale jest wykonywany niezależnie od siebie. Komponenty Reacta mają własną strukturę, metody oraz API. Są wielokrotnego użytku i można je wstrzykiwać do interfejsów zgodnie z potrzebami. Aby mieć lepsze zrozumienie, potraktuj cały interfejs użytkownika jako drzewo.Tutaj składnik początkowy staje się korzeniem, a każda z niezależnych części staje się gałęziami, które są dalej dzielone na podgałęzie.

Dzięki temu nasz interfejs użytkownika jest zorganizowany i umożliwia logiczny przepływ danych i zmian stanu z katalogu głównego do gałęzi, a następnie do gałęzi podrzędnych. Komponenty wywołują serwer bezpośrednio po stronie klienta, co umożliwia dynamiczną aktualizację DOM bez odświeżania strony. Dzieje się tak, ponieważ komponenty Reagowania są zbudowane na koncepcji żądań AJAX. Każdy komponent ma własny interfejs, który może wywoływać serwer i aktualizować je. Ponieważ te składniki są od siebie niezależne, każdy z nich może być odświeżany bez wpływu na inne lub interfejs użytkownika jako całość.

Używamy React.createClass () metoda tworzenia komponentu. Do metody tej należy przekazać argument obiektu, który będzie definiował komponent React. Każdy składnik musi zawierać dokładnie jeden renderowanie() metoda. Jest to najważniejsza właściwość komponentu odpowiedzialnego za parsowanie kodu HTML w JavaScript, JSX. To renderowanie() zwróci reprezentację HTML komponentu jako węzeł DOM. Dlatego wszystkie tagi HTML muszą być zawarte w otaczającym tagu wewnątrz renderowanie() .

Poniżej znajduje się przykładowy kod do tworzenia komponentu.

różnica między final final i finalize in java

import React from 'act' import ReactDOM z klasy 'act-dom' MyComponent extends React.Component {render () {return (
Twój identyfikator to {this.state.id}
)}} ReactDOM.render (, document.getElementById ('content'))

Stany kontra rekwizyty

Reaguj na cykl życia komponentów

React udostępnia różne metody, które powiadamiają o wystąpieniu określonego etapu cyklu życia komponentu. Metody te nazywane są metodami cyklu życia. Te metody cyklu życia nie są bardzo skomplikowane. Możesz myśleć o tych metodach jako o wyspecjalizowanych programach obsługi zdarzeń, które są wywoływane w różnych momentach życia komponentów. Możesz nawet dodać własny kod do tych metod, aby wykonywać różne zadania. Mówiąc o cyklu życia komponentu, cykl życia podzielono na 4 fazy. Oni są:

1. Faza początkowa
2. Faza aktualizacji
3. Faza zmiany rekwizytów
4. Faza demontażu

Każda z tych faz zawiera pewne metody cyklu życia, które są specyficzne tylko dla nich. Zobaczmy więc teraz, co dzieje się podczas każdej z tych faz.

za. Faza początkowa - Pierwsza faza cyklu życia komponentu React to faza początkowa lub początkowa faza renderowania. W tej faziekomponent zaraz rozpocznie swoją podróż i trafi do DOM. Ta faza składa się z następujących metod, które są wywoływane w predefiniowanej kolejności.

1. getDefaultProps (): Ta metoda służy do określenia domyślnej wartości this.props . Jest wywoływana przed utworzeniem komponentu lub przekazaniem do niego jakichkolwiek właściwości od rodzica.
2. getInitialState (): Ta metoda jest używana dosprecyzować domyślna wartość ten stan przed utworzeniem komponentu.
3. componentWillMount (): Jest to ostatnia metoda, którą możesz wywołać, zanim komponent zostanie wyrenderowany do DOM. Ale jeśli zadzwonisz setState () wewnątrz tej metody twój komponent nie będzie ponownie renderowany.
4. renderowanie(): Cz is jest odpowiedzialna za zwrócenie pojedynczego głównego węzła HTML i musi być zdefiniowana w każdym komponencie. Możesz wrócić zero lub fałszywy na wypadek, gdybyś nie chciał niczego renderować.
5. componentDidMount (): Gdy komponent zostanie wyrenderowany i umieszczony w DOM, this wywoływana jest metoda. Tutaj możesz wykonywać dowolne operacje zapytań DOM.

b. Faza aktualizacji - Po dodaniu komponentu do DOM mogą aktualizować się i ponownie renderować tylko wtedy, gdy nastąpi zmiana stanu. Za każdym razem, gdy zmienia się stan, składnik wywołuje swoje renderowanie() jeszcze raz. Każdy komponent, który opiera się na danych wyjściowych tego komponentu, wywoła również jego renderowanie() jeszcze raz. Ma to na celu zapewnienie, że nasz komponent wyświetla swoją najnowszą wersję. W związku z tym, aby pomyślnie zaktualizować stan komponentów, wywoływane są następujące metody w podanej kolejności:

1. shouldComponentUpdate (): Korzystając z tej metody, możesz kontrolować zachowanie komponentu podczas aktualizacji. Jeśli zwrócisz wartość true z tej metody,składnik zostanie zaktualizowany. W przeciwnym razie, jeśli ta metoda zwraca plikfałszywy, komponent pominie aktualizację.
2. componentWillUpdate (): Tnazywa się jego metoda jottuż przed aktualizacją komponentu. W tej metodzie nie możesz zmienić stanu komponentu przez wywołanie this.setState .
3. renderowanie(): Jeśli zwracasz fałsz za pośrednictwem shouldComponentUpdate () , kod w środku renderowanie() zostanie wywołany ponownie, aby upewnić się, że komponent wyświetla się poprawnie.
4. componentDidUpdate (): Po zaktualizowaniu i wyrenderowaniu składnika wywoływana jest ta metoda. Możesz umieścić dowolny kod w tej metodzie, który chcesz wykonać po zaktualizowaniu komponentu.

do. Faza zmiany rekwizytów - Po komponent został wyrenderowany do DOM, jedyną inną sytuacją, w której komponent będzie aktualizowany, poza zmianą stanu, jest zmiana wartości właściwości. Praktycznie ta faza działa podobnie jak poprzednia faza, ale zamiast stanu zajmuje się rekwizytami. Dlatego ta faza ma tylko jedną dodatkową metodę z fazy aktualizacji.

1. componentWillReceiveProps (): Ta metoda zwraca jeden argument zawierający nową wartość właściwości, która ma zostać przypisana do komponentu.
   Pozostałe metody cyklu życia zachowują się identycznie jak metody, które widzieliśmy w poprzedniej fazie.
   
2. shouldComponentUpdate ()
3. componentWillUpdate ()
4. renderowanie()
5. componentDidUpdate ()

re.Faza Odmontowywania -Jest to ostatnia faza cyklu życia komponentów, w której komponent jest całkowicie niszczony i usuwany z DOM. Zawiera tylko jedną metodę:

1. componentWillUnmount (): Po wywołaniu tej metody komponent jest trwale usuwany z DOM.W tej metodzie YMożesz wykonać dowolne zadania związane z porządkowaniem, takie jak usuwanie nasłuchiwaczy zdarzeń, zatrzymywanie timerów itp.

Poniżej znajduje się diagram całego cyklu życia:

To prowadzi nas do końca bloga o React Components. Mam nadzieję, że na tym blogu udało mi się jasno wyjaśnić, czym są komponenty React, jak są używane. Możesz zapoznać się z moim blogiem na , jeśli chcesz dowiedzieć się więcej o ReactJS.

Jeśli chcesz przejść szkolenie w zakresie React i chcesz samodzielnie opracować ciekawe interfejsy użytkownika, zapoznaj się z autorstwa Edureka, zaufanej firmy zajmującej się edukacją online, z siecią ponad 250 000 zadowolonych uczniów rozsianych po całym świecie.

Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy, a my skontaktujemy się z Tobą.