Все хуки ReactJS за 1 час
#React #ReactJS
В этом видео рассмотрим все хуки в ReactJS (react hooks), рассмотрим кастомные хуки (пользовательские хуки), а также поговорим о том, что такое хуки, для чего они нужны, как появились хуки, какие есть правила использования хуков в реакт и.д.
Хуки в React - это функциональность, которая позволяет использовать состояние без использования классов. Появилась эта возможность с версии 16.8.
В функциональных компонентах нельзя было иметь состояние - они так и назывались stateless (соответственно классовые компоненты - stateful). Теперь же за счет использования хуков функциональные компоненты также могут иметь состояние. Функциональные компоненты является предпочтительным.
Классовые компоненты до сих пор доступны. Просто для того чтобы использовать методы жизненного цикла - не нужно переписывать функциональные компоненты на классовые. Для функциональных компонентов для работы с жизненным циклом компонента доступны хуки.
Хуки (React hooks) помогают переиспользовать логику; тестировать логику состояния отдельно от компонентов; помогают избегать большого количества оберток - компонентов, которые несут в себе логику, а не полезную разметку.
Мы в соцсетях:
💻 Сайт: https://it-dev-journal.ru
💻 Telegram: https://t.me/devmagazinechannel
💻 Twitter: / _devmagazine
💻 GitHub: https://github.com/vadimkorr
☕️ Поддержать канал: https://www.donationalerts.com/r/devm...
Плейлисты и курсы:
💡 Все о ReactJS: • 📘 ReactJS
💡 Как пройти ReactJS собеседование: • 🚀 Собеседование React Frontend
💡 ReactJS хуки: • 🐠 React хуки
💡 Redux: • ☕️ Redux курс
💡 Redux Saga: • 🍏 Redux Saga курс
💡 Как создать слайдер на ReactJS: • 🎪 Как создать СЛАЙДЕР на ReactJS
💡 Svelte: • 🌴 Svelte курс
💡 Sass: • 📔 Sass курс
💡 GraphQL: • 💪 GraphQL
💡 JavaScript: • 📜 JavaScript
00:00 Что такое хуки в React JS?
00:01:59 Правила хуков в ReactJS
00:02:56 Для чего нужны хуки в React?
00:03:40 Какие есть хуки в реакт?
00:04:54 useState
00:09:01 useEffect
00:15:52 useContext
00:24:25 useReducer
00:32:41 useCallback
00:36:55 useMemo
00:42:05 useRef
00:49:43 useImperativeHandle
00:53:39 useLayoutEffect
00:57:42 кастомные хуки в реакт (react custom hooks)
01:07:18 useDebugValue
#devmagazine #devmagazinechannel
