- 56
- 55 632
Dev Surge
Russia
Приєднався 27 бер 2023
Канал про веб-разработку: JavaScript, React, Vue и многое другое
Продолжаем создавать собственные хуки для профессионального приложения
В этом уроке мы рассмотрим несколько примеров кастомных хуков и поймём, как они могут помочь нам:
1. В совместной работе
2. В соблюдении принципа DRY
3. В упрощении будущих миграций
Документация: react.dev/learn/reusing-logic-with-custom-hooks
Код: github.com/becasualle/devsurge-react-course/commit/b3bd882dcb8d8dffbf79259600f8cd21f02aba74
Всех, кто дошел до этого видоса поздравляю с успешным окончанием курса! Теперь вы можете создавать собственные приложения на React. Если вдруг что-то забыли - пересматривайте видео, читайте документацию, гуглите и подключайте мощь ChatGPT для реализации своих творческих задумок.
Мои статьи по веб-разработке доступны на devsurge.ru.
1. В совместной работе
2. В соблюдении принципа DRY
3. В упрощении будущих миграций
Документация: react.dev/learn/reusing-logic-with-custom-hooks
Код: github.com/becasualle/devsurge-react-course/commit/b3bd882dcb8d8dffbf79259600f8cd21f02aba74
Всех, кто дошел до этого видоса поздравляю с успешным окончанием курса! Теперь вы можете создавать собственные приложения на React. Если вдруг что-то забыли - пересматривайте видео, читайте документацию, гуглите и подключайте мощь ChatGPT для реализации своих творческих задумок.
Мои статьи по веб-разработке доступны на devsurge.ru.
Переглядів: 1 747
Відео
Как создать собственный хук в React
Переглядів 3865 місяців тому
React предоставляет встроенные хуки, такими как useState, useContext и useEffect. Иногда вам захочется иметь хук для какой-то более специфической цели: для получения данных, для отслеживания того, находится ли пользователь в сети, или для подключения к чату. Вы можете не найти таких хуков в React, но вы можете создать свои собственные хуки для задач вашего приложения. В этом уроке вы узнаете: -...
useEffect: как правильно работать с зависимостями
Переглядів 2595 місяців тому
Когда вы пишете эффект, линтер проверяет список зависимостей. Должны быть включены все реактивные значения, которые считывает эффект - пропсы, состояние, вычисляемые значения. При этом, лишние зависимости могут привести к тому, что ваш эффект будет запускаться слишком часто или создаст бесконечный цикл. В этом уроке вы узнаете, как правильно удалять ненужные зависимости. Мы разберемся: - Как ис...
useEffectEvent: отделяем события от эффектов
Переглядів 3476 місяців тому
Обработчики событий запускаются только при повторном выполнении того же взаимодействия. В отличие от обработчиков событий, эффекты повторно синхронизируются, если реактивное значение, которое они считывают, например пропс или переменная состояния, отличается от того, что было во время последнего рендера. Иногда требуется сочетание обоих типов поведения: эффект, который повторно запускается в от...
Жизненный цикл реактивных эффектов useEffect
Переглядів 3327 місяців тому
В этом уроке расскажу про жизненный цикл компонентов и эффектов. Вот, что следует запомнить: - Компоненты могут монтироваться, обновляться и размонтироваться. - Каждый Эффект имеет отдельный жизненный цикл от окружающего компонента. - Каждый Эффект описывает отдельный процесс синхронизации, который может запускаться и останавливаться. - Когда вы пишете и читаете Эффекты, думайте с точки зрения ...
Вам не нужен useEffect: Часть 2
Переглядів 4748 місяців тому
Основные идеи этого и предыдущего видео: - Если вы можете вычислить что-то во время рендеринга, вам не нужен Эффект. - Чтобы кэшировать дорогостоящие вычисления, добавьте useMemo вместо useEffect. - Чтобы сбросить состояние всего дерева компонентов, передайте ему другое значение ключа. - Чтобы сбросить определенный кусочек состояния в ответ на изменение пропса, вызовите сеттер во время рендерин...
Вам не нужен useEffect: Часть 1
Переглядів 6669 місяців тому
Эффекты позволяют вам "выйти" за пределы React и синхронизировать ваши компоненты с какой-либо внешней системой, например с не-React виджетом, сетью или DOM браузера. Если внешняя система не задействована (например, если вы хотите обновить состояние компонента при изменении некоторых реквизитов или состояния), вам не нужен Эффект. Удаление ненужных Эффектов сделает ваш код более понятным, быстр...
useEffect: примеры практического использования
Переглядів 3439 місяців тому
React в Strict Mode намеренно перемонтирует ваши компоненты в процессе разработки, чтобы преждевременно обнаружить баги. Когда мы создаем эффект, мы должны думать о том, как он должен работать после перемонтирования. Пользователь не должен различать однократный запуск эффекта и последовательность setup → cleanup → setup. Большинство эффектов, которые вы будете писать, будут вписываться в один и...
useEffect: cleanup функция
Переглядів 40310 місяців тому
Иногда нам требуется остановить или очистить операции какого-то эффекта. Например, "connect" нуждается в "disconnect", "subscribe" - в "unsubscribe", а "fetch" - в "cancel" или "ignore". Вы узнаете, как это сделать с помощью функции очистки. Документация: react.dev/learn/synchronizing-with-effects Подпишитесь, чтобы не пропустить выход новых видео. Ставьте лайк, чтобы поддержать канал. Мои стат...
useEffect: зачем нужен и как использовать
Переглядів 57310 місяців тому
Некоторые компоненты должны синхронизироваться с внешними системами. Например, вы можете захотеть управлять компонентом, не относящимся к React, на основе состояния React, установить соединение с сервером или отправлять логи аналитики при появлении компонента на экране. Эффекты позволяют выполнить некоторый код после рендеринга, чтобы синхронизировать компонент с какой-либо системой вне React. ...
useRef: вешаем ref на компонент и прочие тонкости
Переглядів 31610 місяців тому
В этом уроке вы узнаете: - Как получить доступ к DOM-узлу другого компонента - В каких случаях безопасно изменять DOM, управляемый React Документация: react.dev/learn/manipulating-the-dom-with-refs Подпишитесь, чтобы не пропустить выход новых видео. Ставьте лайк, чтобы поддержать канал. Мои статьи по веб-разработке доступны на devsurge.ru/
useRef: работаем с элементами DOM дерева
Переглядів 39310 місяців тому
React автоматически обновляет DOM в соответствии с результатами рендеринга компонента.Иногда вам может понадобиться прямой доступ к элементам DOM - например, чтобы сфокусировать инпут, прокрутить страницу, измерить размер или расположение элемента. В этом случае нам поможет "ссылка" на HTML-элемент, которую мы создаем с помощью useRef. Документация: react.dev/learn/manipulating-the-dom-with-ref...
В каких случаях использовать useRef
Переглядів 46411 місяців тому
В этом уроке я расскажу, в каких случаях нам потребуется useRef. Разберу пример с первым случаем - когда нам нужно хранить айдишник setInterval/setTimeOut. Документация: react.dev/learn/referencing-values-with-refs Подпишитесь, чтобы не пропустить выход новых видео. Ставьте лайк, чтобы поддержать канал. Мои статьи по веб-разработке доступны на devsurge.ru/
Знакомимся с хуком useRef
Переглядів 43311 місяців тому
Некоторым компонентам может потребоваться управление и синхронизация с системами за пределами React. Например, сфокусировать ввод с помощью API браузера, воспроизвести и поставить на паузу видеоплеер, реализованный без React, или подключиться и слушать сообщения с удаленного сервера. В этой главе вы познакомитесь с аварийными люками, которые позволят вам "выйти" за пределы React и подключиться ...
Токсичность на работе в IT: как распознать и что делать
Переглядів 125Рік тому
Токсичность - это вредное и разрушительное поведение или отношение. Включает в себя: словесные оскорбления, манипуляции, издевательства, агрессию и отсутствие сочувствия. Последствия - наносит вред отношениям, вызывает стресс, тревогу и низкую самооценку. В этом выпуске подкаста поговорим: - Как токсичность выражается на рабочем месте - Почему возникает - Как попасть в команду без токсичных пер...
Правильная организация хранилища с использованием useContext и useReducer
Переглядів 363Рік тому
Правильная организация хранилища с использованием useContext и useReducer
Создаём хранилище глобального состояния с помощью useReducer и useContext
Переглядів 592Рік тому
Создаём хранилище глобального состояния с помощью useReducer и useContext
useContext: в каких случаях использовать контекст?
Переглядів 340Рік тому
useContext: в каких случаях использовать контекст?
useContext: переиспользуем контекст в том же компоненте с помощью children
Переглядів 360Рік тому
useContext: переиспользуем контекст в том же компоненте с помощью children
useContext: избавляемся от Props Drilling
Переглядів 599Рік тому
useContext: избавляемся от Props Drilling
useReducer: как извлечь логику обновления состояния в reducer-функцию
Переглядів 559Рік тому
useReducer: как извлечь логику обновления состояния в reducer-функцию
Онлайн-курсы: стоит ли проходить и как устроен рынок в РФ
Переглядів 270Рік тому
Онлайн-курсы: стоит ли проходить и как устроен рынок в РФ
Почему React сбрасывает состояние и как этим управлять
Переглядів 717Рік тому
Почему React сбрасывает состояние и как этим управлять
Как правильно структурировать состояние React: 5 примеров
Переглядів 792Рік тому
Как правильно структурировать состояние React: 5 примеров
5 принципов структурирования состояния компонента React
Переглядів 579Рік тому
5 принципов структурирования состояния компонента React
Декларативный подход к созданию интерфейса: 5 шагов
Переглядів 707Рік тому
Декларативный подход к созданию интерфейса: 5 шагов
Императивный и декларативный подход к созданию UI
Переглядів 811Рік тому
Императивный и декларативный подход к созданию UI
Работаем с массивами в качестве состояния с использованием useState
Переглядів 854Рік тому
Работаем с массивами в качестве состояния с использованием useState
2:28 вот это мисклик.
Смотрел видосы из топа выдачи ютуба по реакту джс , абсолютная каша и отврат . Этот видос просто мед для ушек и максимально простыми словами истолкован . Надеюсь дальше также. Двигайся дальше , если те засросли попали в топы , ты точно сможешь ! +rep
Всем привет, бля!
тяжеловато зашло: код пишется не сверху вниз а то там то там, я с ужасом думаю как чинить после других подобные вещи. надо чтобы в голове отстоялось или мышление перестроилось, а может я уже старый..
даа, зашевелились в голове шестеренки. так оно всегда когда материал в новинку. помню пару лет назад джангу изучал, тоже все дымилось. а сейчас вспоминаю и не пойму чего там такого сложного было.
наконец-то звук получше
зачем в return setIsOnline?
та, там товарищ сравнивает объекты и ожидает, что они когда нибудь могут дать true ))
Спасибо за урок!
Спасибо за урок
Интересно, спасибо!)
Спасибо за видео и за курс! Очень доходчиво объясняете, вместе с вашими видео гораздо полезнее и понятнее становится чтение документации
важно понимать, что изменение пропса не ведет к ререндеру, это частое заблуждение и этот вопрос любят задавать на собеседованиях
Вы очень хорошо объясняете 👍👍👍
Как так, три месяца искал понятный разбор React с документацией. А тут просто случайно в рекомендациях увидел. Автор большо0Ое спасибо !💯
Не понял, откуда для карточки берутся стили. В документации их вроде нет. Если просто вставить аватар в карточку, то ничего не происходит. Работает только если отдельно дописать стили и импортировать.
на самом деле стили есть по документации. Но их нигде не показывают даже в документации
Ни хрена не понял, слишком быстро.
Что за приложение в котором пишешь код ?
VS Code
Очень умно)) в первом случае, если тебе нужен реактивно меняющийся массив, че делать будешь? Если-бы там нужна была бы строка "Музыка" ее можно было бы и статически прямо передавать на самом деле
вы не в хлеву, не тыкайте. видео -учебное
@@showrun4747 Я в интернете, тут и хлев и твой дом и ринг, свои правила неписаные сам соблюдай
Спасибо за видосы.)
Брат какая color theme у тебя стоит? Обновил вс, потерял ее, любимая была...Вроде что то с дракулой
Отличная задачка! Поставил на паузу, усложнил условия - элементов более 2, полчаса промучался и родил оч кривое решение с вынесением всех текстов в отдельный массив с объектами, хранящими состояние и индекс. Но решение автора оказалось гораздо элегантнее
Respect brat 'you help me' далше погнали 🤓
Like❤
Спасибо! Полезная информация, продолжайте в таком же духе! Побольше вам подписчиков!🎉
Большое спасибо!
Спасибо большое за выпуск! Мне было очень полезно и интересно. Отдельная благодарность за личные примеры ❤
лайк за выпуск, респект за помо от тиктика))
Добрый день. Можно развить тему и сделать кастомный хук для Intersection Observer. Который будет триггерить коллбэк, если элемент по рефу определен как видимый. Или меняется видим/невидим. Это полезно для прокруток с подгрузкой данных, например
Или Дебаунсить значение по таймеру, записывая в переменную хука только последнее значение, если по таймеру не произошло новых изменений
Или хук, аналог атомарного стора. Где будет сам объект состояния и набор объектов диспатча. Менять стор можно только через диспатч
Новый урок 👍
Это топ контент Ты в реках, кстати
Супер, новое видео 👍
Лучший! Ни какой воды, сразу к делу, но при этом всё объясняется досконально
Спасибо, мне очень приятно! 🖤
Большое спасибо! Лучший курс по React который мне попадался. Отличная идея использовать документацию, как базу для курса
Согласен. Документация доступна в любой момент, чтобы освежить знания или что-то найти, а также содержит примеры для практической отработки полученных знаний.
писят два
4 05 я гуль 0100-6 зхс
Как сделать api заглкшку для бакэнда
я бы использовал моки mswjs.io/
Сначала говоришь не изменяется потом говоришь изменяется Ничего не понял
Ну как, понял?
Важно: n=1; setState(n+5); setState(n+5); setState(n+5); Равносильно: n=1; setState(1+5); setState(1+5); setState(1+5);
Если дважды запустить то console log будет инткрементироваться
Скоро ютуб прикроют, залейте на Вконтакт плиз
Как запускать реакт в докере
www.freecodecamp.org/news/how-to-dockerize-a-react-application/
Проходил доку сам, но наткнулся на тебя, теперь прохожу с твоими видео одновременно, спасибо!
Всё супер, очень подробно и самое главное понятро объяснил, лайаа👍
спасибо за такое подробное и очень понятное объяснение
Спасибо 👍
Хорошое объяснение, а как можно решить данные проблемы без использования useEffectEvent?
Об этом я планирую упомянуть в следующем уроке. Если коротко - мы можем использовать обработчик событий, который принимает актуальное значение темы.
В документации - раздел "Storing information from previous renders". Также можно попробовать применить рефы для хранения темы или количества выбранных товаров.
🔥🔥🔥
Курс ещё актуален?) на 2024?)
да
Я не понял. Родительский компонет это не тег а сам компонен(функция "Avatar") а <Avatar/> -это дочка. Все данные которые мы передаём внутрь функции -это props То что мы используем в <Avatar/>-это так называемое спуск данных(propsi) с родителя ,то есть функции Avatar? Все правильно?