Все хуки ReactJS за 1 час
Вставка
- Опубліковано 4 сер 2024
- #React #ReactJS
В этом видео рассмотрим все хуки в ReactJS (react hooks), рассмотрим кастомные хуки (пользовательские хуки), а также поговорим о том, что такое хуки, для чего они нужны, как появились хуки, какие есть правила использования хуков в реакт и.д.
Хуки в React - это функциональность, которая позволяет использовать состояние без использования классов. Появилась эта возможность с версии 16.8.
В функциональных компонентах нельзя было иметь состояние - они так и назывались stateless (соответственно классовые компоненты - stateful). Теперь же за счет использования хуков функциональные компоненты также могут иметь состояние. Функциональные компоненты является предпочтительным.
Классовые компоненты до сих пор доступны. Просто для того чтобы использовать методы жизненного цикла - не нужно переписывать функциональные компоненты на классовые. Для функциональных компонентов для работы с жизненным циклом компонента доступны хуки.
Хуки (React hooks) помогают переиспользовать логику; тестировать логику состояния отдельно от компонентов; помогают избегать большого количества оберток - компонентов, которые несут в себе логику, а не полезную разметку.
Мы в соцсетях:
💻 Сайт: it-dev-journal.ru
💻 Telegram: t.me/devmagazinechannel
💻 Twitter: / _devmagazine
💻 GitHub: github.com/vadimkorr
☕️ Поддержать канал: www.donationalerts.com/r/devm...
Плейлисты и курсы:
💡 Все о ReactJS: • 📘 ReactJS
💡 Как пройти ReactJS собеседование: • 🚀 Собеседование React ...
💡 ReactJS хуки: • 🐠 React хуки
💡 Redux: • ☕️ Redux курс
💡 Redux Saga: • 🍏 Redux Saga курс
💡 Как создать слайдер на 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
Братишка спасибо за крупный шрифт можно смотреть даже на экране телефона Ещё раз спасибо за урок
Огромное спасибо за видео!
Очень полезная инфа о хуках. Спасибо! ReactJS (react hooks)
Пришел сюда, после того как Минин, 10 минут жевал сопли, и так и не смог внятно объяснить useCallback. Автор видео объяснил это меншье чем за минуту, еще до начала примера. Грац
Минин 😂😂😂
Мужик вообще красавец, много видео посмотрел, одно из самых лучших, приятный голос и классаня подача, без воды, супер
Спасибо!
Спасибо большое. Очень понятно и четко получилось
Лайк за голос, очень приятно слушать.
шикардос! контент кайф
Спасибо, очень помог)
ты крут спасибо тебе товарищ!
Круто! 👍
спасибо Вам за годный контент! Готовлюсь к асессменту, Ваши видео помогают
Как приятно!) Спасибо! Успешной сдачи)
огонь, спасибо)
Спасибо за полезное видео
Спасибо!
React собеседование все хуки , спасибо оч круто и полезно
годно спасибо
👍
Очень яркая плашка слева внизу, при каждом переключении на тёмный редактор отвлекаешься на неё.
Спасибо, оч незаслуженно обделенный просмотрами канал, может вы запишите видео о вопросах на собеседование по React? На таких темах обычно много просмотров...
Спасибо!) хорошая идея
+++
@@DevMagazineChannel Поддерживаю, когда ждать?)
Видео будет, нужно подобрать вопросы) не могу назвать точный срок)
@@DevMagazineChannel Как можно быстрее)) Скоро собесы)
Если оставить useState() без значений, то что это значит?как это будет работать? Undefined?
Прошел весь курс. Спасибо большое автору. Могу подметить одну ошибку при создании курса. Следует показывать css код. Т.к в некоторых хуках не понятно что имеет в веду автор. А именно. useDebugValue, useCallback
Очень здорово! Спасибо! Но ведь это не ВСЕ хуки, а как же:
useId: предназначен для генерации уникального идентификатора
useTransition: применяется для создания переходов при рендеринге
useDeferredValue: позволяет отложить рендеринг некритичных частей структуры DOM
useSyncExternalStore: предназначен для синхронизации данных с внешними хранилищами
useInsertionEffect: предназначен для библиотек, которые используют CSS в JS, для оптимизации при внедрении стилей при рендеринге?
Они так редко используются, что не стали о них говорить?
Спасибо! на момент записи видео этих хуков еще не было)
useTransition и useDeferredValue 👉 it-dev-journal.ru/articles/huki-use-transition-i-use-deferred-value-v-react-js-18
useLayoutEffect 👉 ua-cam.com/video/wPQlz4M4rnI/v-deo.html
useReducer 👉 ua-cam.com/video/a-s9mIByo4w/v-deo.html
Redux курс (плейлист) 👉 ua-cam.com/play/PLmfIBo6rTVR70B7skhP5BtczReJMZQ0Vd.html
Собеседование по ReactJS 👉 ua-cam.com/video/A0Lp8TMCFhA/v-deo.html
Не понятно, как обычный пользователь может понять то что здесь объясняют =/
Мне кажется, что видео довольно сложное для понимания именно новичкам. Но после того, как выполнил несколько учебных проектов (просто переписав код за кем-то), пусть весьма и туманное, но представление есть о работе хуков. И вот это видео больше для тех, кто хоть немного, но с хуками сталкивался. Думаю, если бы я месяца два назад тоже начал смотреть это видео, я бы нихрена не понял)))
@@Dead.Oracle Молодец. Уже по этой специальности работаешь?
@@Dead.Oracle Подскажи. А где можно взять учебные проекты?
Мне объяснения не понравились. Если автор считает эти хуки азами и хочет объяснить что-то для новичков, то зачем брать примеры "посложнее"? Раз взялся объяснять в одном видео за все хуки - чтобы не было галопом по Европам - объясняй с самыми простыми примерами, а если кому надо - снимешь для продвинутых по отдельному видео на каждый хук с продвинутыми примерами. А так ощущение что ты старался сделать абы быстро. В общем - совсем не старался. Сделал ставку на то что для профи - и так сойдёт, а новички - сосите лапу.