Szybkie Odświeżanie

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Szybkie Odświeżanie to funkcja React Native, która pozwala uzyskać niemal natychmiastową informację zwrotną o zmianach w komponentach React. Domyślnie jest włączona, a przełącznik "Włącz Szybkie Odświeżanie" znajdziesz w Menu Deweloperskim React Native. Przy włączonym Szybkim Odświeżaniu większość zmian powinna być widoczna w ciągu sekundy lub dwóch.

Jak to działa

• Jeśli edytujesz moduł, który eksportuje wyłącznie komponenty React, Szybkie Odświeżanie zaktualizuje kod tylko tego modułu i ponownie wyrenderuje twój komponent. Możesz edytować wszystko w tym pliku: style, logikę renderowania, procedury obsługi zdarzeń czy efekty.

• Jeśli edytujesz moduł z eksportami, które nie są komponentami React, Szybkie Odświeżanie uruchomi ponownie zarówno ten moduł, jak i moduły, które go importują. Na przykład, jeśli zarówno Button.js, jak i Modal.js importują Theme.js, edycja Theme.js zaktualizuje oba komponenty.

• Wreszcie, jeśli edytujesz plik importowany przez moduły spoza drzewa React, Szybkie Odświeżanie przejdzie do pełnego przeładowania. Może to dotyczyć pliku, który renderuje komponent React, ale także eksportuje wartość importowaną przez komponent nienależący do React. Przykładowo: twój komponent eksportuje stałą, którą importuje nienależący do React moduł narzędziowy. W takim przypadku rozważ przeniesienie stałej do osobnego pliku i importowanie jej w obu miejscach. To przywróci działanie Szybkiego Odświeżania. Inne przypadki można zazwyczaj rozwiązać podobnie.

Odporność na błędy

Jeśli popełnisz błąd składniowy podczas sesji Szybkiego Odświeżania, możesz go poprawić i ponownie zapisać plik. Czerwony ekran błędu zniknie. Moduły z błędami składniowymi są blokowane, więc nie będzie potrzeby przeładowywania aplikacji.

Jeśli wystąpi błąd wykonania podczas inicjalizacji modułu (np. wpiszesz Style.create zamiast StyleSheet.create), sesja Szybkiego Odświeżania będzie kontynuowana po poprawieniu błędu. Czerwony ekran zniknie, a moduł zostanie zaktualizowany.

Jeśli popełnisz błąd prowadzący do błędu wykonania wewnątrz komponentu, sesja Szybkiego Odświeżania również będzie kontynuowana po poprawieniu błędu. W takim przypadku React ponownie zamontuje twoją aplikację używając zaktualizowanego kodu.

Jeśli masz w aplikacji granice błędów (co jest dobrym pomysłem dla eleganckiego obsłużenia błędów w produkcji), podejmą próbę renderowania przy kolejnej edycji po pojawieniu się czerwonego ekranu. W tym sensie posiadanie granic błędów może zapobiec ciągłemu przekierowywaniu na ekran główny aplikacji. Pamiętaj jednak, że granice błędów nie powinny być zbyt szczegółowe. Są używane przez Reacta w produkcji i zawsze powinny być celowo zaprojektowane.

Ograniczenia

Szybkie Odświeżanie stara się zachować lokalny stan Reacta w edytowanym komponencie, ale tylko gdy jest to bezpieczne. Oto kilka powodów, dla których stan lokalny może być resetowany przy każdej edycji pliku:

• Stan lokalny nie jest zachowywany dla komponentów klasowych (tylko komponenty funkcyjne i Hooki zachowują stan).

• Edytowany moduł może mieć inne eksporty oprócz komponentu React.

• Czasami moduł eksportuje wynik wywołania komponentu wyższego rzędu jak createNavigationContainer(MyScreen). Jeśli zwrócony komponent jest klasą, stan zostanie zresetowany.

W dłuższej perspektywie, wraz z przenoszeniem kodu do komponentów funkcyjnych i Hooków, można oczekiwać zachowania stanu w większej liczbie przypadków.

Porady

• Szybkie Odświeżanie domyślnie zachowuje lokalny stan Reacta w komponentach funkcyjnych (i Hookach).

• Czasami możesz chcieć wymusić reset stanu i ponowne zamontowanie komponentu. Na przykład może to być przydatne przy dostrajaniu animacji występującej tylko przy montowaniu. W tym celu dodaj // @refresh reset w dowolnym miejscu edytowanego pliku. Ta dyrektywa działa lokalnie dla pliku i nakazuje Fast Refresh ponowne montowanie komponentów przy każdej zmianie.

Fast Refresh a Hooki

Gdy to możliwe, Fast Refresh stara się zachować stan komponentu między edycjami. W szczególności useState i useRef zachowują poprzednie wartości, o ile nie zmienisz ich argumentów ani kolejności wywołań Hooków.

Hooki z zależnościami – takie jak useEffect, useMemo i useCallback – będą zawsze aktualizowane podczas działania Fast Refresh. Ich lista zależności jest ignorowana w tym trybie.

Przykładowo, gdy zmienisz useMemo(() => x * 2, [x]) na useMemo(() => x * 10, [x]), Hook wykona się ponownie mimo że x (zależność) się nie zmienił. Gdyby React tego nie robił, twoja zmiana nie byłaby widoczna!

Czasem może to prowadzić do niespodziewanych efektów. Na przykład nawet useEffect z pustą tablicą zależności wykonałby się ponownie raz podczas Fast Refresh. Jednak pisanie kodu odpornego na sporadyczne ponowne uruchamianie useEffect to dobra praktyka nawet bez Fast Refresh. Ułatwia to późniejsze dodawanie nowych zależności.