Rodzaje komponentów ReactJs w programowaniu

Czym są komponenty w ReactJs?

Komponenty zasadniczo odnoszą się do podstawowej jednostki i bloków konstrukcyjnych Reacta. Aby było łatwiej zrozumieć, tak jak wszystko na świecie składa się z atomów, komponenty są tylko składnikami ReactJS. Każda aplikacja lub strona internetowa opracowywana przy użyciu ReactJS będzie składać się z różnych jednostek, które nazywane są komponentami.

Na powyższym obrazku możesz znaleźć kilka komponentów w interfejsie użytkownika witryny. Pasek menu to jeden składnik, a lewa kolumna Polecane to kolejny. Pudełko na ciasteczka jest również elementem, a główna część zawierająca wszystkie informacje jest znowu po prostu kolejną. Tak więc cały interfejs użytkownika składa się z różnych komponentów, aby strona była dla nas przydatna. Interfejs użytkownika strony internetowej można zatem uznać za komponent nadrzędny.

Rodzaje komponentów ReactJs w programowaniu

1. Komponent funkcjonalny

Komponenty funkcjonalne można tworzyć po prostu pisząc funkcje Javascript. Mówiąc konkretnie, komponenty funkcjonalne to te funkcje, które pobierają rekwizyty i zwracają JSX. Komponenty funkcjonalne mogą, ale nie muszą, odbierać dane w postaci parametrów. Co więcej, komponenty funkcjonalne nie mają metod cyklu życia ani stanu, jednak można je dodać, po prostu implementując hooki reakcji. Funkcjonalne komponenty są zawsze łatwe do debugowania, odczytywania i testowania.

 // Functional Component Example import React from 'react'; const HelloWorld = () => { return ( <div> <p>Hello Emizen!</p> </div> ) } export default HelloEmizen;

Na powyższym obrazie kodu jest to prosty komponent niosący zmienną stałą „Hello Emizen”. Zmienna stała jest przypisana do funkcji strzałki, która zwraca kod JSX. Komponenty funkcjonalne nie muszą być funkcjami strzałek i można je również po prostu zadeklarować za pomocą zwykłych funkcji JavaScript. W tym samym czasie, Props można również przekazać do funkcji, a tym samym wykorzystać do renderowania danych w kodzie JSX.

2. Składnik klasy

Składnik Class jest najczęściej używanym składnikiem spośród wszystkich typów. Powodem jest to, że komponent klasy ma możliwość wykonywania każdej funkcji komponentu funkcjonalnego, a jednocześnie także pewne dodatkowe możliwości. Może efektywnie korzystać z głównych funkcji Reacta, props, state i lifecycle. Jednak komponenty klasy są stosunkowo bardziej złożone w porównaniu z komponentami funkcjonalnymi. Dane mogą być bardzo łatwo przekazywane z jednego komponentu klasy do innego komponentu klasy.

 // Class Component Exampleimport React from 'react';class HelloWorld extends React.Component {
   renderowanie() {
      zwrócić (
         <div>
            <p>Witaj Emizen!</p>
         </div>
      )
   }
}eksportuj domyślne HelloEmizen;

W powyższym przykładzie widać, że komponent klasy używa extends React.Component po klasie Hello Emizen . Następnie wymaga również metody render() w celu zwrócenia kodu JSX. W komponencie klasy można zadeklarować stan, ustawić go na obiekt JavaScript, użyć props , aby być w fazie początkowej i zmienić stan w metodach cyklu życia. Wykonanie tych działań przez komponent funkcjonalny będzie wymagało od haków reakcji.

3. Czysty składnik

Czyste komponenty to najprostsze i najszybsze komponenty, jakie ktoś może napisać. Ponieważ czyste komponenty nie modyfikują lub nie zależą od stanu różnych zmiennych poza ich zakresem, mogą z łatwością zastąpić proste komponenty funkcjonalne. Komponenty, które jedynie zwracają funkcję render, są najbardziej odpowiednie dla czystych komponentów. Największym przypadkiem użycia komponentu Pure jest zapewnienie optymalizacji.

Duża różnica między React.Component i React.PureComponent polega na tym, że czysty składnik wykazuje płytkie porównanie zmian stanu. Czyste składniki automatycznie zarządzają shouldComponentUpdate() .

React Components są ponownie renderowane głównie wtedy, gdy:

• setState() jest wywoływana
• forceUpdate()
• props Wartości są aktualizowane

4. Komponenty wyższego rzędu

Komponenty wyższego rzędu, znane również jako KWR, są mniej podobne do komponentu React, a bardziej do wzorca, będącego wynikiem kompozycyjnej natury Reacta. Głównym przypadkiem użycia KWR jest współdzielenie logiki z innymi komponentami.

 // HOC Example import React from 'react'; import MyComponent from './components/MyComponent'; class HelloEmizen extends React.Component { render() { return( <div> {this.props.myArray.map((element) => ( <MyComponent data={element} key={element.key} /> ))} </div> ) } } export default HelloEmizen;

Powyższy obraz kodu zawiera prosty komponent opisujący komponent wyższego poziomu. Tutaj kluczem jest this.props.myArray.map((element) => (<MyComponent />) funkcja zwraca komponenty.Liczba komponentów jest po prostu zależna od liczby elementów w tablicy, które są nazywane HOC Funkcja pobiera tablicę ze stanu i w ten sposób mapuje każdy element w tablicy, przekształcając każdy element w React Component.

Poniżej przedstawiono proste podsumowanie komponentów wyższego rzędu:

1. Pobierz dane z rekwizytów lub stanu
2. Odwzoruj tablicę i zwróć komponent Reach dla każdego elementu.

Jak wyrenderować komponent ReactJs?

Aby wyrenderować komponent ReactJS, wykonaj następujące kroki:

• Przede wszystkim tworzona jest klasa ES6 o tej samej nazwie, która rozszerza React.Component .
• Do niego dodawana jest pojedyncza pusta metoda znana jako render() .
• Treść funkcji zostaje przeniesiona do metody render() .
• Zamień props na this.props w treści render() .
• Na koniec usuń pozostałą pustą deklarację funkcji.

Zagnieżdżanie komponentów React

Jedną z najlepszych rzeczy w React jest to, że komponenty mogą zagnieżdżać się w sobie. Ta funkcja znacząco pomaga w tworzeniu złożonego interfejsu użytkownika. Tutaj komponenty potomne są zagnieżdżone w komponentach nadrzędnych. Zagnieżdżanie komponentów w sobie jest określane jako wewnętrzne i zewnętrzne.

• Eksport : kiedy określony moduł lub plik jest eksportowany i używany w innym module, nazywa się to Eksportem.
• Import : kiedy określony moduł lub plik jest importowany i używany w istniejącym module, nazywa się to importem.

Cykl życia komponentu React

Aplikacje internetowe React to w zasadzie zbiór różnych komponentów, które są niezależne i działają w oparciu o interakcje z nimi. Każdy z tych komponentów ma swój własny cykl życia. Cykl życia odnosi się do serii metod, które ponownie uruchamiają się na różnych etapach istnienia komponentu.

Każdy komponent React ma zasadniczo następujące trzy etapy:

1. Montaż

Po zakończeniu inicjalizacji komponentów, komponent jest montowany w DOM i renderowany na stronie internetowej. Tutaj React postępuje zgodnie z domyślną procedurą tylko dla konwencji nazewnictwa predefiniowanych funkcji. Funkcje, które zawierają „Czy” reprezentują przed określoną fazą. Podobnie funkcja, która zawiera „Did” reprezentuje po zakończeniu fazy. Faza montażu komponentów składa się z dwóch następujących funkcji:

• componentWillMount() Funkcja : ta funkcja jest wywoływana przed zamontowaniem komponentu w DOM.
• componentDidMount() Funkcja : w przeciwieństwie do poprzedniej, ta funkcja jest wywoływana po zamontowaniu komponentu na DOM.

2. Aktualizacja

Aktualizacja jest w zasadzie fazą, w której aktualizowane są stany i właściwości komponentu, po których następuje zdarzenie lub polecenie użytkownika, takie jak naciśnięcie klawisza, kliknięcie myszą itp. Pomaga to aktywnym stronom internetowym zachowywać się zgodnie z potrzebami i polecenia ich użytkowników.

3. Demontaż

Jest to etap zakończenia cyklu życia komponentu. W tej fazie komponenty są odłączane od DOM. Następująca funkcja jest jedynym członkiem tej funkcji:

componentWillUnmount() Funkcja : funkcja jest wywoływana tuż przed całkowitym odmontowaniem komponentu z DOM. Następuje przed usunięciem komponentu ze strony, co oznacza koniec cyklu życia.

Mamy nadzieję, że ten post dał ci podstawowe pojęcie o typach komponentów React i sposobach ich wykorzystania. Emizentech to wiodąca firma zajmująca się tworzeniem aplikacji, która opracowuje aplikacje internetowe, natywne i hybrydowe aplikacje mobilne. Tak więc, jeśli kiedykolwiek potrzebujesz profesjonalnych programistów ReactJs, skontaktuj się z nami.