Самые загадочные хуки - useImperativeHandle и forwardRef
ฝัง
- เผยแพร่เมื่อ 28 ก.ย. 2024
- #ReactJS #react
Полезный Сайт О Разработке 👉 it-dev-journal.ru
В этом выпуске рассматриваем react хук useImperativeHandle и forwardRef, сравниваем хуки useImperativeHandle и useRef.
📃 Исходный код: t.me/devmagazi...
#devmagazine #devmagazinechannel
Мы в соцсетях:
☕ 💻 Telegram: t.me/devmagazi...
☕ 💻 Twitter: / _devmagazine
☕ 💻 GitHub: github.com/vad...
☕ 💻 Medium: / devmagazine
Поддержать канал: www.donational...
Еще больше полезного о React 👉 it-dev-journal.ru/tags/react
Не совсем понятно зачем этот хук, если с помощью forwardRef и без хука можно ref на DOMElement прокинуть вверх.
Отвечаю спустя год, но может комментарий поможет кому-то.
У меня был кейс с двумя рефами: одна пришла от родителя через forwardRef, другая создаётся внутри через useRef. В итоге получается что нужно в компонент передать две рефы, но ref принимает только одну. Здесь на помощь приходит useImperativeHandle. В компонент прокидывается внутренний реф, а родителю отдаётся весь веф или то что нужно через useImperativeHandle
@@Bnepeg3agpoT Правильней был бы ответ такой: useImperativeHandle нужен для того, чтобы с родительского компонента вызывать функции расположенные в дочерних элементах.
@@Bnepeg3agpoT Есть более элегантное решение, через паттерн custom ref prop.
Чел, огромное спасибо за референс, пол дня потратил, чтобы понять что это за фигня, зачем она нужна и почему я должен это знать)))))Кажется это вообще единственное упоминание useImperativeHandle в ру сегменте интернета! Подписка, лайк, ну и по-ходу мне придется у тебя посмотреть всё))))))
Благодарю, отличное объяснение. Очень помогло разобраться в теме!
Что-то я не совсем вкуриваю, `useImperativeHandle` нужен для того, чтобы прокинуть нужные значения в приходящий `ref`. Тогда возникает только один вопрос: Зачем? Если ref - это ссылка на объект, то значит мы можем его и так изменить. Даже если предположить, что нужно закешировать объект, то куда понятнее использовать useMemo.
```jsx
ref.current = useMemo(() => ({
focus: () => {
inputElement.current.focus()
}
}), [])
```
Спасибо тебе большое за качественный, простой и доступный материал!
Спасибо!)
Большое спасибо. То, что надо. Добавляет понимания в работе с кастомными компонентами. У "популярных" рассказчиков обычно все по-верхушкам и для вау эффекта. В глубь мало кто копает. Спасибо
Очень полезно и понятно!
разве это все не заработает просто с форвард реф?
без юзапртивхэндл
вешаешь реф на кастомный кмпнент
там принимаешь его после пропсов в фрврдреф и передаешь на тег инпут
в родителе жмякаешь фокус и все
или не?
Полезное видео, useImperativeHandle пригодился мне при работе с таблицой ag-grid, там в ячейки нужно было пробросить кастомный инпут.
Без воды. Благодарю
Показан только пример использования, как и в стандартной документации. Ни слова о том, как он работает и почему.
useImperativeHandle связывает параметр ref с возвращаемым объектом, подставляя его в ref.current на этапе выполнения. А forwareRef предотвращает связывание ref с корневым элементом компоненты, ожидая выполнения useImperativeHandle.
Спасибо за пояснение, очень доступно и локанично пояснил)
А чего мой коммент затерли? Мне нравится, то что вы рассказываете на своем канале. Я спрашиваю почему мы не делаем просто проброску пропса сразу в input ref={ref}? можете пояснить чем ваш способ лучше и когда его стоит использовать?
не затерли) я видел ваш комент в уведомлениях и на почте, под видео его уже не было...
Рефы через пропы пробрасывать можно, особенно это будет полезно если в компоненте множество элементов. Хотя, на самом деле, с useImperativeHandle тоже можно дать возможность работы с несколькими элементами... В этих двух подходах будет отличаться API кастомного компонента.
А в видео я просто хотел показать такой use case на сравнении с рефом, т.к. useImperativeHandle не совсем очевидный хук, его сложнее понять в отличие от, например, useEffect или useContext.
@@DevMagazineChannel Спасибо
Совсем не раскрыт смысл хука. С первого взгляда, по видео или документации может сложится впечатление что он нужен для манипуляции рефами внутри компонента. Но на самом деле он создает реф, который будет присвоен в свойство ref CustomInput. Звучит немного сложно, но попробую объяснить.
Например если мы напишем такой код:
useImperativeHandle(ref, () => ({ log: () => console.log('Hello world') }));
То тогда в ref CustomInput будет содержать метод log(), при вызове которого в консоле отобразиться "Hello world".
label с input-ом связываются через id. Так что в CustomInput, в htmlFor, нужно передавать id а не label. Спасибо :)
да, спасибо!)
В конце видео вы говорите что можно для скрола применять, у вас где используется useImperativeHandle scrollIntoView для скрола к елементу и это в useEffect? Спасибо.
Ты молодец, продолжай в том же дуже. Подписался!
Кстати преподавать это очень полезно в первую очередь для преподавателя.
Это очень круто для саморазвития!
четко и по делу. Спасибо
у Вью баги и мало библиотек сторонних, у Свелт нет авторитета, поддержки корпораций и библиотек сторонних нет от слова вообще, Реакт сложнее, но других недостатков нет. Пожалуй, если я пойду работать то только на Реакт. Но свои проекты пишу на шаблонизаторах и чистом js, больше свободы.
Больше свободы, больше гавнокода
еще у Vue 3 насколько мне известно нет до сих пор нормальной поддержки typeScript в шаблонах, а у реакта есть.
@@habalgarmin руки чешутся пойти работать Реакт-разработчиком, но также есть цель сделать свой проект образовательный) Решил год посвятить его созданию)
ты сам с собой разговариваешь?
@@Armas0n мысли вслух