02. Komponenty funkcyjne vs klasowe — ewolucja React

Ewolucja React: klasy → funkcje

React przeszedł przez dwie epoki: komponenty klasowe (przed 2019) z metodami cyklu życia (componentDidMount, shouldComponentUpdate) i komponenty funkcyjne z hookami (React 16.8+). Opracowanie analizuje różnice, motywację zmiany i dlaczego hooki wygrały.

Starsze projekty React nadal używają komponentów klasowych. Zrozumienie obu podejść pozwala pracować z każdym kodem React — nie tylko nowym. Zrozumiesz też DLACZEGO hooki powstały — to ważniejsze niż samo API.

1. Opisać komponent klasowy — struktura, metody cyklu życia, this.state
2. Opisać komponent funkcyjny — prosta funkcja zwracająca JSX
3. Wyjaśnić czym są hooki i dlaczego zastąpiły klasy
4. Porównać oba podejścia z konkretnymi przykładami

1. Komponent klasowy — extends React.Component, constructor, render(), this.state, this.setState
2. Metody cyklu życia — componentDidMount, componentDidUpdate, componentWillUnmount
3. Komponent funkcyjny — prosta funkcja, hooks zamiast metod cyklu życia
4. Problemy klas — złożoność, this binding, code reuse (HOC, render props)
5. Hooki jako rozwiązanie — useState, useEffect, custom hooks

• Struktura minimalna

1. Wstęp — krótka historia React
2. Rozdział 1: Komponenty klasowe — struktura, state, cykl życia
3. Rozdział 2: Komponenty funkcyjne — ewolucja, hooki
4. Rozdział 3: Porównanie — tabela różnic, kiedy co
5. Podsumowanie
6. Bibliografia

Historia React to historia ewolucji API!

To opracowanie pokazuje jak dojrzewa ekosystem JavaScript. Opisz ewolucję z perspektywy developera — co było trudne, co się poprawiło i dlaczego to ma znaczenie dziś.