React Academy · Урок

Использование вкладки профилировщика

Записывайте отрисовки, читайте пламенные графики и находите медленные компоненты

«Использование вкладки профилировщика» — бесплатный урок React Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Добро пожаловать

На этом уроке Вы будете использовать профилировщик React DevTools, чтобы записывать отрисовки, читать пламенные диаграммы и определять, какие компоненты вызывают проблемы с производительностью.

Открытие профилировщика

Нажмите на вкладку **Профилировщик** в React DevTools (рядом с вкладкой «Компоненты»). Вы увидите кнопку «Записать» (круг) и кнопку «Перезагрузить и профилировать». Профилировщик работает только в режиме разработки.

Запись сеанса

Нажмите **Записать** (круг), поработайте с приложением (например, нажмите кнопку или введите текст в поле ввода), а затем нажмите **Остановить** (квадрат). DevTools зафиксирует каждый render, произошедший во время сеанса.

Чтение пламенной диаграммы

Пламенная диаграмма показывает по одной полосе на каждый компонент в каждой фиксации. Ширина = время, затраченное на отрисовку. Высокие стопки = глубокие деревья компонентов. Наведите указатель на полосу, чтобы увидеть имя компонента и точную длительность отрисовки.

Временная шкала фиксаций

В верхней части профилировщика Вы видите ряд небольших полос — по одной на каждую фиксацию React. Более высокие полосы соответствуют более медленным фиксациям. Нажмите на полосу, чтобы перейти к пламенной диаграмме этой фиксации.

Почему компонент выполнил render?

Выберите компонент на пламенном графике и откройте раздел **Почему выполнен этот render?** В нём указано, был ли render вызван изменением свойств, изменением состояния или повторным render родительского компонента.

Серые и цветные полосы

Серые полосы означают, что компонент не выполнял render в этой фиксации (React повторно использовал предыдущий результат). Цветные полосы означают, что компонент выполнил render повторно: более тёмные цвета соответствуют большей длительности render.

Ранжированная диаграмма

Переключитесь с пламенного графика на **ранжированную** диаграмму с помощью переключателя вверху. В ней перечислены все компоненты, выполнившие render, отсортированные по времени render, поэтому самый медленный компонент можно сразу обнаружить.

Запись и перезагрузка

Нажмите **Перезагрузить и профилировать** вместо кнопки «Записать», чтобы захватить загрузку страницы, включая первоначальные render. Это поможет найти компоненты, которые медленно работают при первом монтировании.

Включение профилирования в рабочей сборке

В рабочих сборках профилировщик по умолчанию отключён. Чтобы профилировать рабочую сборку, выполните сборку с `react-dom/profiling` в качестве псевдонима и `scheduler/tracing-profiling`. Большинство команд сначала выполняют профилирование в режиме разработки.

Быстрая проверка

Что означает ширина полосы на пламенном графике профилировщика React DevTools?

Итоги

Теперь вы умеете записывать сеанс профилировщика, читать пламенные графики и ранжированные диаграммы, проверять, почему компонент повторно выполнил render, и использовать временную шкалу фиксаций для перехода между render.

Следующий урок: **Диагностика распространённых ошибок React** — вы научитесь находить предупреждения об отсутствующих ключах, ошибки с неопределённым состоянием и несоответствия при гидратации с помощью DevTools и консоли браузера.

Часто задаваемые вопросы

Урок «Использование вкладки профилировщика» бесплатный?

Да — полный текст урока «Использование вкладки профилировщика» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Использование вкладки профилировщика»?

Записывайте отрисовки, читайте пламенные графики и находите медленные компоненты Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Использование вкладки профилировщика»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к React Academy