React Academy · Lekcja

Korzystanie z karty Profiler

Nagrywaj renderowanie, odczytuj wykresy płomieniowe i identyfikuj wolne komponenty

Korzystanie z karty Profiler to bezpłatna lekcja React Academy na CoddyKit. To lekcja 3 z 4. 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 4 lekcji w sumie.

Witamy

W tej lekcji użyją Państwo narzędzia React DevTools Profiler do rejestrowania renderowań, odczytywania wykresów płomieniowych i identyfikowania komponentów powodujących wąskie gardła wydajności.

Otwieranie profilera

Należy kliknąć kartę **Profiler** w React DevTools (obok Components). Zobaczą Państwo przycisk Record (kółko) oraz przycisk Reload and Profile. Profiler działa tylko w trybie deweloperskim.

Rejestrowanie sesji

Należy kliknąć **Record** (kółko), wejść w interakcję z aplikacją (np. kliknąć przycisk lub wpisać tekst w polu), a następnie kliknąć **Stop** (kwadrat). DevTools zarejestruje każde renderowanie, które nastąpiło podczas sesji.

Odczytywanie wykresu płomieniowego

Wykres płomieniowy pokazuje jeden słupek na komponent dla każdego commitu. Szerokość oznacza czas poświęcony na renderowanie. Wysokie stosy oznaczają głębokie drzewa komponentów. Po najechaniu kursorem na słupek zobaczą Państwo nazwę komponentu i dokładny czas renderowania.

Oś czasu commitów

U góry profilera znajduje się rząd małych słupków — po jednym dla każdego commitu React. Wyższe słupki oznaczają wolniejsze commity. Kliknięcie słupka przenosi do wykresu płomieniowego danego commitu.

Dlaczego komponent został wyrenderowany

Proszę wybrać komponent na wykresie płomieniowym i sprawdzić sekcję **Why did this render?**. Pokazuje ona, czy komponent został wyrenderowany, ponieważ zmieniły się propsy, zmienił się stan lub komponent nadrzędny został ponownie wyrenderowany.

Szare a kolorowe paski

Szare paski oznaczają, że komponent **nie został wyrenderowany** w ramach tego commitu (React ponownie wykorzystał poprzedni wynik). Kolorowe paski oznaczają, że komponent został ponownie wyrenderowany — ciemniejsze kolory wskazują dłuższy czas renderowania.

Widok wykresu rankingowego

Proszę przełączyć się z widoku Flame Graph na wykres **Ranked** (przełącznik znajduje się u góry). Zostaną wyświetlone wszystkie wyrenderowane komponenty posortowane według czasu renderowania, dzięki czemu można od razu znaleźć najwolniejszy komponent.

Nagrywanie i ponowne ładowanie

Proszę kliknąć **Reload and Profile** zamiast Record, aby zarejestrować ładowanie strony wraz z początkowym renderowaniem. Ułatwia to znalezienie komponentów, które działają wolno podczas pierwszego montowania.

Włączanie profilowania w środowisku produkcyjnym

Wersje produkcyjne domyślnie wyłączają Profiler. Aby profilować wersję produkcyjną, należy zbudować aplikację z `react-dom/profiling` jako aliasem oraz `scheduler/tracing-profiling`. Większość zespołów najpierw wykonuje profilowanie w środowisku deweloperskim.

Szybkie sprawdzenie

Co oznacza szerokość paska na wykresie płomieniowym Profilera React DevTools?

Podsumowanie

Można już nagrywać sesję profilowania, odczytywać wykresy płomieniowe i rankingowe, sprawdzać, dlaczego komponent został ponownie wyrenderowany, oraz używać osi czasu commitów do przechodzenia między renderowaniami.

Następna lekcja

Następna lekcja: **Debugowanie typowych błędów React** — dowiedzą się Państwo, jak diagnozować ostrzeżenia o brakujących kluczach, błędy związane ze stanem `undefined` oraz niezgodności hydratacji za pomocą DevTools i konsoli przeglądarki.

Często zadawane pytania

Czy lekcja „Korzystanie z karty Profiler” jest bezpłatna?

Tak — pełny tekst „Korzystanie z karty Profiler” 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 4 lekcji w sumie.

Co nauczysz się w „Korzystanie z karty Profiler”?

Nagrywaj renderowanie, odczytuj wykresy płomieniowe i identyfikuj wolne komponenty Ć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 3 z 4.

Ile czasu zajmuje lekcja „Korzystanie z karty Profiler”?

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

Instalowanie i otwieranie React DevTools
Inspekcja drzewa komponentów i propsów
Korzystanie z karty Profiler
Debugowanie typowych błędów React

← Powrót do React Academy