egghead
Проект egghead.io представляет огромный выбор курсов и скринкастов для разработчиков любого уровня и профессии.
Реюзабл стейт и Effects с React Hooks
Reusable State and Effects with React Hooks
★4.2 (всего оценок - 13)
Продолжительность
0 ч 57 мин
Категория
React.jsКоличество уроков
13 Видео
Дата добавления
18 нояб. 2019 г., 22:54
Язык
Английский
Дата обновления
29 апр. 2026 г., 05:31
React Hooks открыли возможность создавать более простые, гибкие и переиспользуемые компоненты без необходимости использовать классы. В этом материале вы узнаете, как применять состояние, побочные эффекты и кастомные хуки, а также как оптимизировать архитектуру приложения благодаря функциональному подходу.
Что вы узнаете о React Hooks
Hooks позволяют значительно упростить работу с состоянием и логикой, а также улучшить повторное использование кода. В рамках курса концепции объясняются через наглядные демонстрации и преобразование реальных классовых компонентов в функциональные.
Основные возможности Hooks
- useEffect — управление побочными эффектами, контроль зависимостей, оптимизация рендеров.
- useContext — упрощение взаимодействия с Context API.
- useReducer — предсказуемое обновление состояния через диспетчеризацию действий.
- useMemo — оптимизация тяжёлых вычислений и предотвращение лишних ререндеров.
- Кастомные хуки — выделение повторяющейся логики в отдельные функции для лучшей структуры кода.
Почему этот курс полезен
React Hooks — это современный инструмент, который стал стандартом разработки в экосистеме React. Понимание их работы помогает писать более чистый, компактный и поддерживаемый код.
Подход к обучению
Вы пройдёте путь от базовых принципов до продвинутых практик, шаг за шагом трансформируя классовые компоненты в функциональные. Такой подход помогает лучше понять взаимосвязи между старыми и новыми подходами и быстрее освоить обновлённый синтаксис.
Результаты обучения
- Уверенное управление сайд-эффектами посредством useEffect.
- Создание и внедрение кастомных хуков в архитектуру приложения.
- Интуитивное использование useContext для упрощения глобального состояния.
- Работа со сложными сценариями обновления состояния через useReducer.
- Оптимизация производительности компонентов благодаря useMemo.
Дополнительные материалы
Исходный код и примеры из уроков доступны в официальном репозитории:
- Урок 1.00:01:45Introduction to Reusable State and Effects with React Hooks
- Урок 2.00:01:52Environment Setup for React Hooks
- Урок 3.00:08:12Add State with the useState Hook to a React Function Component
- Урок 4.00:03:42Add Linting to Help Enforce Rules when Using React Hooks
- Урок 5.00:08:46Add a Lifecycle Event with the useEffect Hook to a React Function Component
- Урок 6.00:03:38Use the React useRef Hook to Reference a DOM Element or Simulate an Instance Variable
- Урок 7.00:05:40Write Custom Hooks to Share Logic Between React Function Components
- Урок 8.00:02:17Leverage an Existing Community Hook in Your React Function Component
- Урок 9.00:05:46Use the useReducer Hook and Dispatch Actions to Update State
- Урок 10.00:02:50Use the useContext Hook to Wire-up the React Context API
- Урок 11.00:05:58Simulate PureComponent with a React Function Component
- Урок 12.00:02:23Leverage the React useMemo Hook for Expensive Operations
- Урок 13.00:04:26Convert a Render Props Component using a Custom React Hook
Автор - egghead
Комментарии
RaysNice short course for getting quick refresher of hooks concepts!