Перейти к содержимому

Полное руководство по производительности React (часть 1): прекратите бесполезные повторные рендеры!

tapaScript by Tapas Adhikary

0:00 / 0:00

Полное руководство по производительности React (часть 1): прекратите бесполезные повторные рендеры!

8 616 просмотров · 8 мес. назад
tapaScript by Tapas Adhikary
41 тыс. подписчиков
8 616 просмотров · 8 мес. назад
Добро пожаловать в первую часть серии «React Performance Mastery»! В этом видео мы разбираем основные принципы, которые ДОЛЖЕН знать каждый React-разработчик для создания быстрых, плавных и масштабируемых приложений. Если ваши компоненты React слишком часто перерисовываются… Если ваш пользовательский интерфейс тормозит… Если useCallback, useMemo и React.memo() сбивают вас с толку… Или если ваши поля поиска и события прокрутки срабатывают как сумасшедшие… 👉 Что вы узнаете в части 1 В этом видео вы узнаете: ✅ Понимание перерисовок React ✅ Мемоизация в React (правильный подход) ✅ Паттерны производных состояний ✅ Отказоустойчивость и троттлинг в React 🎁 Бонус: изучите полную шпаргалку по React Hooks 👉 https://tapascript.io/books/react-hoo... Таймкоды 0:00 — Паттерны производительности 00:52 — Что в части 1? 01:51 — Повторный рендеринг в React 05:29 — Мемоизация 07:58 — Memo() 12:21 — UseCallback() 20:46 — UseMemo() 28:21 — Производное состояние 33:53 — Устранение дребезга 41:40 — Регулирование скорости 46:20 — Задачи и завершение 🔥 Если вам понравилось, вторая часть вас точно удивит. Мы подробно рассмотрим: Компилятор React Изоляцию компонентов Виртуализацию Оптимизацию контекста Ленивую загрузку Производительность пакетов 🔔 Подпишитесь, чтобы не пропустить! ⭐ Подпишитесь:    / tapasadhikary   ⭐ Присоединяйтесь:    / @tapasadhikary   Важные ссылки Присоединяйтесь к моему Discord:   / discord   Подпишитесь на tapaScript на GitHub: https://github.com/tapascript Скачать шаблон: https://topmate.io/tapasadhikary/1737706 Репозиторий фейкового API: https://github.com/tapascript/fake-apis Использованный исходный код: https://github.com/tapascript/15-days... Код в репозитории React 19: https://github.com/atapas/code-in-rea... Если Если вам понравилось, посмотрите мою другую популярную серию: «40 дней JavaScript» ✅ Начните «40 дней JavaScript»:    • Day 01: Introduction to JavaScript & Setti...   ✅ Вот ещё один путь обучения JavaScript, который я рекомендую: https://scrimba.com/t0js?via=tapascript ✅ Скачайте шаблон трекера «40 дней JavaScript»: Ссылка на шаблон: https://topmate.io/tapasadhikary/382755 👋 Понравилась моя работа? Спасибо! Присоединяйтесь как участник:    / @tapasadhikary   Спонсор: https://github.com/sponsors/atapas Спонсор моего блога: https://blog.greenroots.info/sponsor 🤝 Мои ссылки: Блог: https://blog.greenroots.info/ Подписывайтесь на X (Twitter):   / tapasadhikary   Подпишитесь на LinkedIn:   / tapasadhikary   Следите за моими работами на GitHub: https://github.com/atapas Обо мне: Тапас Адхикари — преподаватель tapaScript, энтузиаст технологий, писатель, ютубер, а также сопровождающий/участник проектов с открытым исходным кодом. Он — full-stack разработчик с богатым опытом создания SaaS-решений. Он — основатель платформы ReactPlay, которая развивается благодаря проектам с открытым исходным кодом и быстрорастущему сообществу. Подробнее о нём можно узнать на сайтах https://tapasadhikary.com и https://tapascript.io #reactjs #designpatterns #reactcourse #learnreact