О чём занятие
Занятие посвящено принципам построения архитектуры React-приложений и подходам к их оптимизации. Студенты разберут организацию структуры проекта, разделение приложения на страницы, компоненты, хуки, сервисы и вспомогательные модули, а также принципы переиспользования кода и разделения ответственности. Будут рассмотрены причины лишних рендеров компонентов и способы их обнаружения и устранения. Отдельное внимание уделяется React.memo, useMemo, useCallback, ленивой загрузке компонентов через React.lazy, Suspense, разделению кода (code splitting) и оптимизации загрузки приложения.
Цель. Научить студентов проектировать понятную и масштабируемую структуру React-приложения, находить проблемы производительности и применять основные инструменты оптимизации.
Чему научится
- Организовывать архитектуру приложения и разделять ответственность между модулями
- Понимать причины повторных рендеров, мемоизацию, lazy loading и code splitting
- Декомпозировать крупные компоненты и выносить логику в хуки
- Применять React.memo, useMemo, useCallback и ленивую загрузку страниц
Рефакторинг приложения: разделить крупные компоненты, вынести повторяющуюся логику, убрать лишние рендеры, настроить React.lazy и Suspense.
Архитектурный рефакторинг учебного проекта: единая структура, декомпозиция, устранение лишних рендеров и ленивая загрузка нескольких страниц.