React 18: Хук useRef
ฝัง
- เผยแพร่เมื่อ 9 ต.ค. 2020
- Есть несколько сценариев использования useRef хука. Первый когда нам нужны ссылки на dom-элементы из jsx. Второй когда нужно не реактивное состояние. В обоих сценариях объект, создаваемый с помощью useRef, помогает решать поставленную задачу.
Наш главный курс "JavaScript старт" - constcode.ru/javascript-start
Бесплатная консультация - constcode.ru/free-lesson
Контакты:
Сайт - constcode.ru
VK - constcode
TH-cam - / @web-constcode6252
Telegram - t.me/constcode
Discord - / discord
Материал урока:
github.com/Aleksey-Danchin/re...
ru.reactjs.org/docs/hooks-ref...
Блин! Ахренительно объясняешь! Я с Практикума к тебе бегаю за знаниями. Спасибо
Спасибо. Понятнее, чем написано в документации, объяснил.
Примеры помогают
wooow, thanks so much👍👍👍👍👍👍👍👍
Спасибо! Очень понятно и просто.
Рад стараться
Спасибо, что освещаете тему хуков, очень нужная тема!
Спасибо. Хорошо объяснил
Рад стараться
Спасибо!
Пожалуйста
Спасибо 👍
top!
Не понимаю, у всех изменение state в input не сбрасывает фокус, а у меня сбрасывает...
Это говорит о том, что у тебя инпут пересоздается. Напиши мне в лк, покажешь баг, найдём проблему.
@@web-constcode6252 я нашёл ответ, как раз сегодня.
Моя ошибка была в том, что я обьявлял элемент в основной функции из-за чего он перерендевался.
Я просто вынес компонент за функцию с рендером и передавал state через props.
Спасибо за отклик!)
ахахахаха))))))) а первое применение useRef - это ты сам придумал?)) по секрету тебе скажу, вместо useRef можно обычную let-переменную использовать. результат будет такой же, без перерисовки компонента))
А коли несколько компонентов ?
Реально крутой урок, но у меня база некая уже есть, предварительно нужно знать принцип разботы хука useState
Это 18 урок. Думаю, что useState к этому моменту уже должен быть известеен
Не кёрент, а карент.
Current
именно кёрент!
Нашел еще одно применение useRef() может кому пригодится.
В React 18 useEffect() вызывается 2 раза. Долго не мог понять как заставить его вызываться один раз, пока не увидел такое решение:
const isMouted = useRef()
В useEffect создаем :
if (isMouted.current) return // По умолчанию isMouted.current == undefined поэтому пройдет дальше
isMouted.current = true //После true второй раз уже не будет рендериться
В React 18 useEffect не вызывается 2 раза. Второй вызов - это вызов StrictMode, он был всегда и отсутствует на продакшане.