Przechowywanie wartości bez ponownego renderowania
Przechowuj zmienne wartości między renderowaniami bez wywoływania ponownego renderowania; porównaj useRef i useState na przykładzie prostych liczników oraz identyfikatora timera.
Przechowywanie wartości bez ponownego renderowania to bezpłatna lekcja React Academy na CoddyKit. To lekcja 1 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 3 lekcji w sumie.
Dlaczego useRef?
Cel: Przechowywać wartości, które przetrwają ponowne renderowanie, nie powodując nowego renderowania. useRef udostępnia stabilne pole .current.
- Przetrwa kolejne renderowania
- Zmiana nie powoduje ponownego renderowania
- Świetnie nadaje się do timerów i poprzednich wartości
Ref a stan
Aktualizacje useState powodują ponowne renderowanie interfejsu. Aktualizacje useRef tego nie robią. Wybierz ref do zmiennych pomocniczych (identyfikatorów i liczników używanych w logice), a nie do danych interfejsu.
Demo: licznik renderowania z ref
Zwiększamy renderCount w efekcie i przechowujemy go w ref; wartość przetrwa kolejne renderowania, ale nie powoduje ich ponownego wywołania.
<div id="root"></div>
Dobre zastosowania useRef
Dobre zastosowania:
- Identyfikatory timerów i interwałów
- Pamięci podręczne poprzednich wartości
- Flagi między renderowaniami (np. isMounted)
Nie używaj do danych, które muszą pojawić się w interfejsie.
Demo: identyfikator timera w ref
Przechowuj identyfikator interwału w ref, aby można było uruchamiać i zatrzymywać timer bez dodatkowych renderowań.
<div id="root"></div>
Typowe problemy i wskazówki
Typowe problemy:
- Nie odczytuj ref, aby sterować interfejsem bez użycia stanu — interfejs się nie zaktualizuje.
- Resetuj ref podczas odmontowywania, jeśli przechowuje identyfikatory lub zasoby.
- Unikaj nadużywania refów jako globalnych magazynów.
Sprawdzenie koncepcji useRef
Podsumowanie
Podsumowanie: Używaj useRef do zmiennych wartości, które mają przetrwać kolejne renderowania — takich jak identyfikatory, poprzednie wartości lub flagi — bez powodowania ponownego renderowania. Do widocznego interfejsu używaj stanu.
Często zadawane pytania
Czy lekcja „Przechowywanie wartości bez ponownego renderowania” jest bezpłatna?
Tak — pełny tekst „Przechowywanie wartości bez ponownego renderowania” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 3 lekcji w sumie.
Co nauczysz się w „Przechowywanie wartości bez ponownego renderowania”?
Przechowuj zmienne wartości między renderowaniami bez wywoływania ponownego renderowania; porównaj useRef i useState na przykładzie prostych liczników oraz identyfikatora timera. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć React Academy?
Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 3.
Ile czasu zajmuje lekcja „Przechowywanie wartości bez ponownego renderowania”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?
Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Przechowywanie wartości bez ponownego renderowania
- Dostęp do węzłów DOM, pomiary i ustawianie fokusu
- Zmienialne referencje dla timerów i identyfikatorów