Wszystko o React

Postanowiłem wstawić wpis na którym zamieszczę wszystko o React opisane w miarę ogólnie z odniesieniami do innych stron czy do moich artykółów opisujących zagadnienia bardziej szczegółowo. Zacznę od rzeczy prostrzych do coraz bardziej zaanwasowanych. Miłej lektury.

Główne API Reacta

Ogólnie idee'a oznacza użycie reacta ale mówię tu to w kontekście bez stosowania JSX'a, Babela czy innych transpilerów. Chodź niewiele się o tym mówi to są przypadki, gdzie warto stosować samo API Reacta, chodźby aplikacje wykorzystujące większą abstrakcję do renderowania potrzebnych komponentów. Użycie api następuje poprzez importowanie React'a i wywołanie poszczególnych metod.

Najważniejsze metody to:

• React.createElement('nazwa tagu HTML' lub ReferencjaDoKomponentu, Propsy, Childy);

Najważniejsza, potrafi tworzyć nowe instancje elementów reactowych z komponentów. Po tranpilacji JSX'a występuje powrzechnie tworząc elementy.

• React.cloneElement(ReactElement, Props, Childy);

Pozwala sklonować element z nowymi właściwościami i childami.

Więcej na: Główne API Reacta – React (reactjs.org) .

JSX

Ractive Javascript w skrócie JSX, oznacza templatki komponentów pisane w react. Sam react tego nie rozpoznaje a używa się transpilatora do przetłumaczenia tej składni na wywołanie odpowiednich funkcji z użyciem głównego api react'a.

ReactDOM

React DOM pozwala na renderowanie drzew elementów reactowych na natywnych elementach DOM stąd nazwa.

Granice błędów (Error boundary)

Granice błędów pozwalają na łapanie wyjątków w oczekiwanym przez nas momencie a mówiąc zwięźle komponencie, jaki ma obsłużyć błąd przełączając widok na ten zawierający informację o nim. Jest to pojęcie, które głównie istnieje w komponentach klasowych bo rozwiązanie okazało się nie do końca trafione znaczy łapanie nieoczekiwanych wyjątków przyczyniało się do wysyłania niekompletnych informacji czy innych anomali ale postanowiłem o tym napąknąć jako ciekawostka i możliwość w użycia w aplikacjach, gdzie integralność danych nie jest tak istotna choćby. Od wersji 16 po uzyskaniu błędu drzewo komponentów jest odcinane zapogiegając wykonaniu nieoczekiwanemu kodu. Istnieje za to implementacja HoC tego w funkcjonalnych komponentach, można ją zobaczyć tutaj: React Error Boundary Component and HOC (github.com) . Kolejną sprawą jest że do prawidłowego wykorzystania tej funkcjonalności nadal są użyte komponenty klasowe jako parenty.

Więcej na Granice błędów – React (reactjs.org)

Hooki

Hooki to funkcje, pozwalające na wielokrotne wykorzystanie różnego rodzaju kodu i wywołanie go z jednego miejsca w drugim miejscu. W kontekście React'a są wykorzystywane w komponentach funkcyjnych. Pozwalają na użycie wielu bazowych funkcjonalności Reacta, takich jak zmiana stanu, zmiana danych, wyciągnięcie elementu z drzewa czy wywołanie akcji po załadowaniu komponentu.

Wbudowane hooki to:

• const [ obecnyStan, zaktualizujStan ] = useState<typStanu>(Pierwotny stan); - Jeden z najważniejszych, czyni w zasadzie komponent stanowym. Używany zazwyczaj do flagowania różnych stanów. Może prowadzić do wielu antypatternów bez zastooswania choćby własnych hooków. Aktualizacja stanu jest wykonywana asynchronicznie a sama funkcja przyjmuje nowy stan lub callback, który zwraca nowy stan a w argumencie ma poprzedni. Czyli aktualizacja stanu odbywa się poprzez: zaktualizujStan(nowyStan); lub zaktualizujStan(staryStan => nowyStan); .
• useEffect(Callback, Deps); - Wywołuje podany callback w momencie gdy komponent zostanie załadowany po mutacji/aktualizacji wskazanych propsów w drugim argumencie. Jeśli podamy pustą tablicę to callback zostanie wywołany tylko po pierwszym załadowaniu.
• const odniesienieDoObiektu = useRef<typReferencji>(Pierwotna wartość); - Głównym zastosowaniem jest przechowywanie do rejerencji elemntu drzewa w danym komponencie ale również można tam przechowywać obiekt, który chcemy modyfikowac poza stanem.
• const metodaKomponentu = useCallback(Callback, Deps); - Zachowuje podany callback w stanie, którym występuje po aktualizacji wskazanych propsów w drugim argumencie.
• const wynikKosztownejOperacji = useMemo(Callback, Deps); - Używane do cachowania wartości wynikających z kosztowych operacji.

Wzorce projektowe

• High-Order Component (w skróce HoC) - Wzorzec, w którym opakowywujemy komponent funkcją choćby poprzez eksportowanie z wywołaniem funkcji przekazując jako parametr docelowy komponent.
• Provider - Wzorzec, którego celem jest współdzielenie stanu aplikacji między komponentami.
• Finite State Machine - Wzorzec pozwalający na zmianę stanów komponentu skończoną ilość razy poprzez zdefiniowane stany i przejścia międz nimi.

React 18 i nowsze

Nową wersję reacta można zainstalować za pomocą npma i yarna poprzez poniższe komendy.

npm install react@rc react-dom@rc
yarn add react@rc react-dom@rc

Wersje alfa można zainstalować za pomocą:

npm install react@alpha react-dom@alpha
yarn add react@alpha react-dom@alpha

W wersji 18 warto się zainteresować useMutableSource oraz useOpaqueIdentifier .

Ciąg dalszy nastąpi...