Jeśli chodzi o React i React Native, jest sporo fajnych technik i drobnych trików, które potrafią trochę ułatwić życie. Część z nich pewnie znasz i stosujesz w swoich projektach. Ale założę się, że wciąż jest wiele takich, których nigdy nie próbowałeś ani nawet o nich nie słyszałeś.
Pracuję z Reactem od lat i wciąż odkrywam nowe możliwości i skróty, które włączam do swojej pracy z kodem.
W tym artykule podzielę się z Tobą snippetami i drobnymi sztuczkami, których używam od jakiegoś czasu i które - jestem przekonany - ułatwią pracę także Tobie.
Miłej lektury!
1. Przekazywanie propsów
Zacznijmy od czegoś prostego - alternatywnym sposobem przekazania propsów do komponentu jest podanie ich jako obiektu ze spreadem.
Oto przykład:
2. matchAll
Metoda matchAll() zwraca iterator wszystkich wyników dopasowania łańcucha do wyrażenia regularnego, wraz z grupami przechwytującymi.
Niestety w react-native ta metoda nie jest dostępna na Androidzie, ale tym snippetem uzyskasz tę samą funkcjonalność:
3. Pressable
Podobny do komponentów Touchable/Highlight, ale daje się bardziej dostosować.
Dzięki temu możesz umieścić konkretną logikę na każdym etapie interakcji naciśnięcia i puszczenia:
4. useCallback vs useMemo
Jeśli nie masz pewności, czym różnią się useCallback i useMemo w React, zapamiętaj jedną rzecz:
- useMemo zwraca wartość
- useCallback zwraca funkcję
W większości przypadków będziesz używać useCallback, ale uważaj na przypadki brzegowe w zależnościach - możesz stracić główny sens tego hooka.
5. Funkcja porównująca dla memo
React.memo to komponent wyższego rzędu. Logika jest taka: gdy zmieniają się propsy komponentu, funkcja memo wykonuje płytkie porównanie i komponent zostanie przerenderowany, jeśli któryś z propsów różni się od poprzedniej wersji.
Ale nie wszyscy wiedzą, że React.memo ma drugi parametr - funkcję porównującą, dzięki której zdefiniujesz własne zachowanie przy przerenderowaniach.
6. Ref dla komponentu funkcyjnego
Żeby uzyskać referencję do komponentu potomnego, zrób tak:
- Owiń komponent w forwarRef, żeby przekazać ref do komponentu potomnego
- Zdefiniuj w komponencie potomnym hook useImperativeHandle - dostosowuje on wartość instancji udostępnianą komponentom nadrzędnym przy użyciu ref.
7. React-Native Doctor
react-native doctor (dostępne w ramach React Native 0.62) to niezwykle przydatna komenda, która pomaga naprawić problemy ze środowiskiem programistycznym:
8. Fragmenty
Fragment można zdefiniować na dwa sposoby:
Problem pojawia się, gdy chcesz przekazać do fragmentu klucz. W takiej sytuacji zapis z pustym tagiem nie zadziała - nie obsługuje atrybutów.
9. Kolory natywne (PlatformColor, DynamicColor)
Pierwszy parametr to kolor domyślny, a drugi to kolor zapasowy:
Nowe metody API dają dostęp do kolorów konkretnej platformy. Oto lista dostępnych kolorów:
- Android:
- iOS (notacje Objective-C i Swift):
10. Wsparcie renderowania
Teraz możesz zdefiniować komponent <View /> wewnątrz <Text /> bez jawnego określania jego rozmiaru (dokumentacja).
I… to tyle z mojej strony.
Mam nadzieję, że znalazłeś tu coś przydatnego dla siebie. A jeśli masz własne triki React i React Native, których używasz w pracy, i chcesz opowiedzieć o nich innym programistom - daj mi znać! Chętnie dodam je do listy i wspomnę o Tobie 🙂
Miłego kodowania!
