2. Czym różnią się komponenty klasowe od funkcyjnych?

Podstawowe różnice

• Składnia klasa vs funkcja
• Cykl życia
• Stan - wbudowany w klasy
• Error Boundary - tylko w klasie
• Hooki - tylko funkcyjne komponenty mogą korzysta z hooków
• Pobieranie danych - componentDidMount vs useEffect

Komponenty Klasowe

class MyComponent extends React.Component<Props, State> {
    render = () => {
        return <div>Hello World!</div>;
    }
}

Komponent klasowy to komponent zadeklarowany przy pomocy klasy. Dziedziczy po klasaie Component z biblioteki react. W TypeScript jest to klasa generyczna, co oznacza, że przyjmuje dwa typy jako typ właściwości przekazywanych do tego komponentu, Props oraz typ, jaki przybierze stan komponentu, State.

Każdy komponent klasowy musi posiadać funkcję render - to wartość z niej zwracana zostanie wyświetlona użytkownikowi. Poza tym, istnieje szereg funkcji, które mogą zostać nadpisane - są to tzw. metody cyklu życia komponentu (lifecycle). Wykonywane są one w różnych momentach życia komponentu - np. przed wyrenderowaniem, po, podczas zmiany propsów itp.

Komponent klasowy może pełnić funkcję Error Boundary, czyli obsługiwać zdarzenie wystąpienia błędu w dowolnym potomnym komponencie. Służy do tego nadpisanie metod getDerivedStateFromError i/lub componentDidCatch.

Komponenty klasowe mogą również posiadać swój wenwetrzny stan, którego modyfikacja powoduje przerenderowanie komponentu (podonie jak zmiana propsów).

Więcej informacji o metodach życia komponentu dostępnych jest np. tutaj. Więcej informacji o error boundaries tutaj.

Komponenty Funkcyjne

Ich składnia jest niczym innym, jak funkcją. Korzystają ze składni jsx, podobnie jak funkcja render w komponentach klasowych. Cykl życia komponentów funkcyjnych obsługiwany jest przez hooki - specjalne funkcje, przygotowane do wykorzystania w komponentach funkcyjnych. Pozwalają na obsługę stanu, zdarzeń, wychwycenie momentu renderowania komponentu itp. Komponent funkcyjny nie może być tzw. Error Boundary. Jako, że jest to funkcja, całe jej ciało wykonywane jest za każdym razem, gdy element wyżej w drzewie zostanie przerenderowany - niezależnie, czy zmienią się propsy lub stan komponentu. Dlatego ważna jest optymalizacja kodu i wywołań funkcji za pomocą memoizacji.

const MyComponent: React.FC<MyComponentProps> = (props) => {
    return <div>Hello World!</div>;
}

Więcej informacji o podstawowym komponencie funkcyjnym znajdziesz tutaj.