85 - React JS - hook, useEffect, хуки
HTML-код
- Опубликовано: 19 авг 2019
- it-incubator.io/education/?ut... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_samurai
API: social-network.samuraijs.com/
Хук (hook) useEffect позволяет нам сделать какой-то сайд-эффект после того, как компонента отрендериться. Что-то вроде методов жизненного цикла в классовой компоненте: componentDidMount + componentDidUpdate (2 в 1)
useEffect сложен по-своему, но очень крут! Попробуем на простом примере разобрать его действие!
А вот та самая статья про разжеванное объяснение от создателя:
habr.com/ru/company/ruvds/blo...
Обязательно гуглим эту тему в официальной документации!
Летим, самураи!!!
Уроки по React JS: • Курс "React JS - путь ...
* Сайты:
it-kamasutra.com
it-incubator.eu
samuraijs.com
* Мы в соц. сетях:
itkamasutra
/ itkamasutra
telegram.me/itkamasutra
* Мои личные VK и Insta:
d.kuzyuberdin
/ it.kamasutra.dimych
#useEffect #hook #reactJS
Всем привет. Поделюсь своей историей.
Года три назад встал на тернистый путь погроммиста. Учился по курсам Димыча - сначала JS, потом React. Попутно обивал пороги разных компаний и что-то как-то не шло. Но в итоге свершилось, два года назад. Писать, правда, пришлось на ангуляре (и по сей день), но оффер я почил именно за петпроект социальной сети. С тех пор постоянно вспоминал Димыча с теплотой и обещал себе, что обязательно зайду, проставлю лайки за все видосы просмотренные (этот был последним перед оффером), и напишу комментарий (у меня их всего два за всю историю пользования ютуба, и этот второй). Но всё как-то забывал; заход в профессию был непростым - дальше больше... Но время пришло.
Собственно, вот. Ланнистеры всегда платят свои долги c:
Если ты тот человек, который это сейчас читает, то знай, что тебе очень повезло наткнуться на этот шикарнейший курс. Будет непросто - но оно того стоит. Если уйдешь в тильт - не бойся переключить внимание на что-то другое. Мне в своё спорт помогал морально отойти он неудач. Желаю тебе успехов и терпения
Мне так нравятся вот эти отступления Димыча вначале и вконце, просто мотивация на всё видео
Мой любимый коммент с хабра про хуки:
rzcoder
12 марта 2019 в 20.04, +8
"Сначала добавляют в реакт функциональные компоненты, которые вроде как лишены бизнес логики, чистые как слеза младенца и легко тестируемы, и вообще сказка просто.
А теперь вдруг функция вызывает какие-то неведомые эффекты, читает из чертегознает где хранящегося стейта, создает неопределенное количество замыканий… И все это на каждый вызов рендера."
Димыч из прошлого: лето заканчивается, я сделаю API-шку подороже.
Димыч из будущего(на стриме): я сниму ограничения и сделаю API-шку бесплатной для всех 👏👏👏
Спасибо тебе Димыч за уроки!
Поэтому друзья прошу поддержать Димыча ютуб подпиской на него - что бы он и дальше был мотивирован! всего 3 дол в месяц + еще специальные видосики становятся доступны!
Впервые подписался на спонсорство ютуб канала. Мне как бэкэндщику уже сейчас очень сильно помогает понимание Реакта на работе. Это, конечно, очень крутой курс - всё по полочкам.
хуки запрещено писать в условиях, в циклах
пример как вынести в 2 переменные результат хука - значение и функцию - сеттер значения
let [applesCount, setApplesCount] = useState(8);
нельзя в функциональной компоненте иметь sideEffect
useEffect - это тоже хук, мы отдаем реакту функции как эффекты которые должны быть применены когда компонента отрисуется
принимает функцию и массив с зависимостями
useEffect( ()=>{ ... }, [a,b,c])
если не передать зависимости - useEffect будет выполняться после каждой отрисовки
если передать пустой массив как зависимость - useEffect будут работать как componentDidMount
Круто Спасибо!
React Redux
Три года прошло. Как успехи?
У тебя супер уникальная подача! Желание поднимается прогать.
Часто смотрю монотонных блогеров, которые ещё к тому же подают тему так, как будто "итак всё очевидно же" - это загоняет в тоску.
А ты не такой!😀 Ты знаешь проблемы новичков и что для них блин многие вещи неочевидны!
Жыве Беларусь!!!
Слава Украине!
Краткий отчет по уроку:
1) использовали useEffect для синхронизации статуса из state и приходящего из DAL. Когда произойдет изменение статуса в глобальном state (пришел ответ с сервера), - мы перезапишем локальный state и перерисуем на его основе компоненту
2) useEffect - это хука о которая запускает какуето функцию после того, как все отрисуется и покажется на экране.
3) объявление хуков нельзя использовать в условиях
4) хуку useEffect можно подвязать зависимостью от определенного значения (если изменится значение переменной, вызовется функция которая внутри useEffect, и без введенного параметра - useEffect будет вызываться после каждой отрисовки компоненты)
useEffect( () => {
//логика функции которая внутри useEffect
}, [параметр] )
В нашем случае useEffect выглядит следующим образом
useEffect( () => {
setUserStatus(props.userStatus)
}, [props.userStatus] )
Мы подвязываем вызов функции из useEffect при изменении приходящего статуса из props. При изменении статуса в глобальном state, произойдет перезапись в локальном state и компонента перерисуется с новым значением
Спасибо за урок
Спасибо большое за урок!!! Хуки useState, useEffect стали более понятными
React JS - hook, useEffect, хуки
Лучшие уроки по React JS & Redux !!!
The BEST!!! lessons of React & Redux!!!
Programming and Coding!!!
Just simply about information technology =)
Выпуск огонь, Дима. Ты красавчик, самурай и настоящий шифу!))
🤩React JS - hook, useEffect, хуки
Круто! Летим дальше!
React JS от Димыча - лучший курс!
очень круто) особенно твоя поддержка в начале и в конце помагает очень сильно)
Супер!!! Всё очень понятно о hook useEffect. Ко всему добавлю что этот хук ещё имеет возможность делать отписку, что-то типа componentWillUnmount, внутри хука в конце нужно возвращать функцию в которой будет происходить какая-то логика в тот момент когда компонент будет демонтирован, например
useEffect(() => {
window.addEventListener('scroll',handleScroll)
return () => {
window.removeEventListener('scroll', handleScroll)
}
},[])
как componentWillUnmount он сработает только если deps будет [], а если есть зависимости - то поведение return уже будет другое
Объясняешь как Бог!Спасибо тебе еще раз,полетела штудировать статью!!
Бомби, Димыч, бомби видосы! Спасибо за твой труд!!!!
Спасибо за урок по useEffect, до этого непонимал, зачем нужны зависимости. Просто использовал. Теперь всё ясно )
Спасибо Димыч за твой труд!
Супер!!!
Подробный разбор React JS - hook, react хуки, useEffect, useState
Крутое объяснение react hooks. Спасибо димыч, всё понятно
Отличные уроки по React - Redux! Прекрасная подача информации! Дмитрий лучший! IT-KAMASUTRA, вперед!
Спасибо, я сам решил эту задачу, но не до конца понимал, что именно я сделал, хотя изучил статью Дэна Абрамова вдоль и поперёк.
А тут ты до конца помог осознать весь происходящий процесс :)
Отличный курс. React JS - hook, useEffect, хуки
Отличное объяснение хука. Никак не мог понять его работу, используя другие источники. С этим видео произошло прозрение)) Спасибо, Димыч ;)
Спасибо за урок! утром на повтор, чтобы информация усвоилась. лайк, подписочка
Спасибо Димыч! все очень понятно) надеюсь и статья так же легко пойдет! hook, useEffect, react, redux
Большое спасибо за понятное описание концепции хуков. Тема про hook теперь стала намного понятнее, а useEffect- так вообще пушка, осталось только статью прочитать. Дима, береги себя, впереди еще более сотни уроков, и это только в рамках пути самурая)) Как всегда, лучший курс по React JS. Продолжаем подтягивать нативный JavaScript
Спасибо огромное за твой труд! Смотрю дальше!
Спасибо за курс!!!
React JS - hook, useEffect,хуки
85/100 - Идём дальше! (04.04.21)
как успехи
офигенный курс!! Димычу респект )) 07.01.22 Кстати все прекрасно синхронизируется и без Use Effect
То же смое))) Вот тольо почему оно работает😅
Действительно, синхронизируется и без Use Effect.
Июль 2022.
React Hook! Летим дальше! Димыч красавчик, спасибо за хорошие объяснения!
Спасибо, курс просто космос !!!!!
Отличная статья. Осилила в два подхода!!! Спасибо за видос React JS - hook, useEffect, хуки и подробное разжевывание материала про hook, useEffect, хуки, да и , в принципе, за React JS. На теории React JS - hook, useEffect, хуки вроде как все ясно. Открываем мир React JS - hook, useEffect, хуки вместе с Димычем. Спа-си-бо!
Освежила в памяти useEffect, спасибо)
Урок 85. Пишу свой белорусский социально-экологический проект. Комент как благодарность (:
Как сейчас дела бро?
@@user-wh5bj9dn2z сейчас немного подзабил на проект: увидел проблему в том, что я мало действую как экологический активист - поэтому сейчас я больше перешел на действия в реальном мире и нахождение ЦА. Возможно, если найду команду единомышленников, то продолжу (: Для чего спрашиваешь?
Давно ждал! Спасибо
Спасибо за урок! Hook, useEffect
Максимально актуальный выпуску про useEffect! Спасибо Димыч! Летим Бро!
и снова спасибо за рассказ о хуке useEffect!)
Просто про React JS - hook, useEffect. Дякую!
Димыч харош,уже поскорей хочу перейти к 2 версии курса)
Все круто!!! бомбим до конца!
React JS, useEffect разложил по полочкам))) Димыч ты крут!)))
Спасибо ДИмычь. Бомбим дальше!!!React Redux, hook, useEffect
Спасибо за урок!!! В целом, всё понятно, но придется вернуться заново и пересмотреть!
#hook #useeffect #react #redux #reactredux #itkamasutra
еще чуть чуть осталось, спасибо димыч !
Спасибо, Димыч! Какой я ленивый, нужно же было меня заставить двигаться! Ты хорош, всегда свеж, тлеет шмаль, летит кэш)))
Спасибо за крутой курс React redux hook useState useEffect
Круто! Спасибо, повторил useEffect
Димыч, так круто что ты дал ссылку на статью Дэна Абрамса перед изучением этой главы. Не один день уже потрачено, но прям чувствую, что расту сам над собой. Я властелин колец! Спасибо тебе огромное, с меня магарыч, как закончу 100 урок 👍
spasibo za urok - React JS - hook, useEffect, хуки
За день статью осилил, лайк и полетели!
После обьяснений Димыча и документация заходит лучше, без них вообще сложно читать её. Благодарю за подробности.
Спасибо! React JS - hook, useEffect, хуки #useEffect #hook #reactJS
Обожаю лирические отступления!
Зашёл, поставил лайк, начал просмотр. Только в таком порядке
Лайк! Отличный хук. Едем дальше.
Димыч, все красиво
React JS - hook, useEffect, хуки
#ReactJS #hook #useEffect #хуки
Hook useEffect - крутая вещь! Димычу респект)
Летииим в Космос )))React JS - hook, useEffect, хуки
Спасибо! Очень интересно!
Хуки - это круто!
P.S. Список ключевых слов: React, Redux, лучшие супер курсы, бесплатно,
hook, хук, useEffect
Димыч ты топ, летим дальше ❤
Спасибо за урок!
Всё круто! hook, useEffect, хуки
СПАСИБО, ДИМЫЧ!!!
Спасибо большое!!! Конечно на хуках я подвис, но ничего, прорвёмся))
спасибо большое, за хуки за понимание useEffect
Мощный инструмент таки, эти Хуки!)
Спасибо, Димыч)
Димыч как всегда крут, Все очень мега понятно!!!!!!!!!!!!!!!
react js, hook, useEffect !!! крутяк !
Дима, спасибо!
#React #JS - #hook, #useEffect, #хуки
Плюсик для лучшего ранжирования !)
Cool video and music at the end.
Ох Hooks для первого знакомства тяжеловаты , но думаю это только пока у нас не было пару интимных💋 встреч , будем почти как родные.
Уже на 85 уроке , а кажется что только-только 10-й смотрел и вникал что тут происходит , в целом это тяжелый путь, но когда понимаешь какие перспективы тебя ждут останавливаться и не надеюсь, летим вперед и только вперед.🚀
React JS - hook, react хуки, useEffect, useState. Спасибо за твой труд Дмитрий. 👏
спасибо за контент!
Летим !
React JS
IT-KAMASUTRA
Redux
спасибо Димич!
да ты просто Агонь! Супер!
Thank You!
чаще смотри в консоль!
бомбим дальше!
Спасибыч за урок!)))
Фиг вас догонишь, видосы так быстро выходят)
Хук useEffect призван заменить методы жизненного цикла классовых компонент: componentDidMount, componentDidUpdate componentWillUnmount. Одно из преимуществ - то, что не нужно разбивать логику и привязывать её к конкретному методу жизненного цикла.
Смотрю, и понимаю, что все видео можно было вместить в 2 мин, а как Вы умудряетесь разжевать так, чтобы прям все все по полочкам, я не понимаю😁 Круто, спасибо)
:))) летим!
спасибо, все супер
useEffect, useState is awesome!
Спасибо! все получается!
Из-за того что у тебя светло в комнате, я аж обрадовался и захотелось учиться. А то немножко взгрустнул, сижу 7-ой час учусь. ночь на дворе. один
Дима, спасибо
Идём вперёд !!!!!!
Устроился на работу в большую компанию на реакт и походу щас в конторе будем учить вуе))) Спасибо !!!!
Как успехи?
Thanks Dimych!!!!!!!!!
Lesson 85 Done!
#useEffect #hook #reactJS Круто!!! Спасибо!
Спасибо тебе Димыч за уроки! 2023
Димыч такой отличный педагог!
Круто! React Hook
Бомбео!