Тёмный

React Developer Tools - как пользоваться Profiler 

Чеботаев Роман. Frontend Blog
Просмотров 2,3 тыс.
50% 1

➡️ Telegram t.me/frontend_blog_tg
➡️ VK frontend.blog
➡️ Boosty boosty.to/romanchebotaev
0:00 Начальный код
1:16 Замер производительности в React DevTools
3:15 Оптимизация кода
6:42 Повторный замер производительности
Музыка
------------------------------
Track: Feel - Land of Fire [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Feel - Land of Fire | ...
Free Download / Stream: alplus.io/feel
------------------------------
Расширение React Developer Tools это инструмент, разработанный для упрощения отладки и разработки приложений, построенных на React. Оно доступно для браузеров Chrome и Firefox.
Расширение позволяет разработчикам легко изучать React-компоненты в дереве компонентов, просматривать иерархию компонентов, исследовать их состояние и свойства, а также анализировать производительность приложения.
React Developer Tools предоставляет следующие основные функции:
1. Инспектор компонентов: Расширение позволяет просматривать и исследовать иерархию компонентов в вашем приложении React. Вы можете просматривать свойства компонента, изменять их, просматривать потомков компонентов и многое другое.
2. Профилирование производительности: Вы можете использовать расширение, чтобы анализировать производительность вашего приложения React. Оно позволяет записывать профили во время работы приложения, а затем анализировать их, чтобы найти проблемы с производительностью.
3. Интеграция с React DevTools backend: Расширение также интегрируется с React DevTools backend, который обеспечивает поддержку отладки React-приложений, работающих вне браузера, например, на мобильных устройствах.
Чтобы установить расширение React Developer Tools, перейдите в соответствующий магазин расширений для вашего браузера (например, Chrome Web Store или Firefox Add-ons Gallery) и выполните поиск по запросу "React Developer Tools". Установите расширение и следуйте инструкциям по его использованию.
Заметьте, что React Developer Tools требует наличия React в приложении для полной функциональности.

Наука

Опубликовано:

 

31 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 8   
@-anonim-3008
@-anonim-3008 Месяц назад
Божеееееееееееееее это просто 8 минут настоящего контента. Респект!
@annashirinskaya7400
@annashirinskaya7400 3 месяца назад
Спасибо, хороший ролик с приминением на практике!
@inna1305
@inna1305 4 месяца назад
спасибо, полезно
@NeoCoding
@NeoCoding 4 месяца назад
mersi
@user-kv9ur9hi4n
@user-kv9ur9hi4n 3 месяца назад
а не проще просто const onChange = (e, index) => {...} ... onChange(e, index)} /> ? а вообще лайк конечно)
@d1zzy155
@d1zzy155 2 месяца назад
тоже так подумал, зачем лишний раз дата атрибут дергать, когда можно просто в аргументы передать индекс)
@vsoko_dormeh
@vsoko_dormeh Месяц назад
только нужно в onChange положить результат вызова, который возвращает функцию onChange={onChange(index)} const onChange = useCallback((index) => (event) => {...}) иначе в твоём примере мемоизация не сработает так как функция будет каждый раз новая
Далее
React Developer Tools | Components & Profiler
12:57
Просмотров 34 тыс.
надувательство чистой воды
00:28
Закладка Performance DevTools в Chrome
38:07
SAMSUNG S23 ULTRA🔥
0:47
Просмотров 140 тыс.
Pratik Cat6 kablo soyma
0:15
Просмотров 8 млн
wyłącznik
0:50
Просмотров 23 млн