{"draftJsState":{"blocks":[{"data":{"image":{"id":"64d948c56894166d57c363bd"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5jm6h"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"8tc99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Одна из полезных особенностей React — абстрагирование от сложного взаимодействия с объектной моделью документа (DOM, Document Object Model). Вместо того чтобы запрашивать элементы, пытаться добавить к ним классы и устранять несоответствия браузера, можно просто писать компоненты, сосредоточившись на взаимодействии с пользователем. Однако иногда все же появляется необходимость в доступе к реальному DOM.","type":"unstyled","key":"bsd1f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":294,"style":"ITALIC"}],"text":"И здесь самое важное — разобраться в особенностях Ref и его окружения, научиться их правильно использовать. Сначала рассмотрим, зачем нужен доступ к DOM, как при этом помогает Ref, что такое useRef, forwardRef и useImperativeHandle и как их правильно использовать. Кроме того, посмотрим, как без forwardRef и useImperativeHandle получить подобные результаты.","type":"unstyled","key":"ug1j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А в качестве бонуса рассмотрим реализацию в React императивных API.","type":"unstyled","key":"accc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Доступ к DOM в React с помощью useRef","type":"header-three","key":"ct33d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Допустим, нужно создать форму регистрации участников конференции. Они должны оставлять свое имя и другие данные, прежде чем им отправят дополнительную информацию. Обязательными будут поля «имя» и «электронная почта». Мы не будем добавлять раздражающие эффекты, возникающие при попытке оставить их пустыми, например красные рамки. Вместо этого пустое поле будет фокусироваться и немного трястись, чтобы ненавязчиво привлечь внимание.","type":"unstyled","key":"6rfsp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":34,"style":"ITALIC"}],"text":"Сегодня React может многое, но не все. В пакете нет таких конструкций, как «сфокусировать элемент вручную». Тут и понадобятся навыки работы с API Javascript. А для этого нужен доступ к фактическому элементу DOM.","type":"unstyled","key":"3mkid"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Без React можно сделать что-то подобное:","type":"unstyled","key":"29u42"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const element = document.getElementById(\"bla\");","type":"blockquote","key":"ehsc7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Затем элемент можно сфокусировать:","type":"unstyled","key":"aje74"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"element.focus();","type":"blockquote","key":"bf1jl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Или прокрутить:","type":"unstyled","key":"1oir4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"element.scrollIntoView();","type":"blockquote","key":"dolv6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно сделать и нечто вроде нативного API DOM в React:","type":"unstyled","key":"emkli"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":7,"style":"BOLD"}],"text":"ручная фокусировка элемента после его рендеринга, например поля ввода в форме;","type":"unordered-list-item","key":"9gctb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":12,"style":"BOLD"}],"text":"обнаружение щелчка за пределами компонента при отображении всплывающих окон;","type":"unordered-list-item","key":"2jg26"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":7,"style":"BOLD"}],"text":"ручная прокрутка к элементу после его появления на экране;","type":"unordered-list-item","key":"7o6jp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"вычисление размеров и границ компонентов на экране для правильного позиционирования, к примеру, всплывающей подсказки.","type":"unordered-list-item","key":"ebcc7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И хотя технически ничто не мешает использовать getElementById, React предоставляет и несколько более мощный способ получить доступ к этому элементу, который не потребует повсеместного распределения идентификаторов и знания базовой структуры DOM . Это рефы.","type":"unstyled","key":"rimp"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":14,"offset":214}],"inlineStyleRanges":[],"text":"Ref — это просто изменяемый объект, ссылку на который React сохраняет между повторными рендерингами. Он не запускает повторный рендеринг, поэтому никак не меняет состояние. Подробнее о различии между Ref и State написано здесь.","type":"unstyled","key":"5snal"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ref создается с помощью хука useRef:","type":"unstyled","key":"c59jt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const Component = ( ) => { \n // создаем ref со значением null по умолчанию\n const ref = useRef (null); \n\n return... \n}","type":"blockquote","key":"fjtme"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Значение, хранящееся в Ref, будет доступно в «текущем» (и единственном) его свойстве. В действительности хранить в нем можно что угодно! Например, объект с некоторыми значениями, поступающими из состояния:","type":"unstyled","key":"1mlmo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const Component = ( ) => { \n const ref = useRef (null); \n\n useEffect ( () => { \n // перезаписываем значение ref по умолчанию с новым объектом \n ref.current = {\n someFunc: () => {...}, \n someValue : stateValue, \n } \n }, [stateValue]) \n\n return ... \n}","type":"blockquote","key":"6qn6l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Или, что более важно для нашего случая, можно назначить этот Ref любому элементу DOM и некоторым компонентам React:","type":"unstyled","key":"4tcfo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const Component = ( ) => { \n const ref = useRef (null); \n\n // присвоение ref элементу ввода \n return \n}","type":"blockquote","key":"eunot"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":113,"style":"ITALIC"}],"text":"Теперь, если регистрировать ref.current в useEffect (это возможно только после рендеринга компонента), мы увидим точно такой же элемент, который получился бы, если реализовать getElementById на этом входе:","type":"unstyled","key":"ehrdg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const Component = ( ) => { \n const ref = useRef (null); \n\n useEffect(() =>{ \n // это будет ссылка на входной DOM-элемент! \n // точно так же, как если бы реализовать для него getElementById \n console.log(ref.current);\n });\n\nreturn }","type":"blockquote","key":"2ivu6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь, если реализовать регистрационную форму как один большой компонент, можно сделать что-то подобное:","type":"unstyled","key":"blb00"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const Form = ( ) => { \n const [name, setName] = useState ( '' ); \n const inputRef = useRef (null); \n\n const onSubmitClick = ( ) => { \n if (!name) { \n // \"фокусируем\" поле ввода, если кто-то пытается отправить незаполненное поле имени\n ref.current.focus();\n } else { \n // отправляем данные сюда! \n } \n } \n\n return <> \n ... \n setName(e.target.value)} ref={ref} />\n \n \n}","type":"blockquote","key":"9oa3a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сохраните значения из входов в состояние, создайте “рефы” для всех входов, а после нажатия кнопки “submit” нужно проверить заполненность полей ввода и при необходимости “сфокусировать” нужный ввод.","type":"unstyled","key":"14ph4"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":14,"offset":32}],"inlineStyleRanges":[],"text":"Проверяем реализацию этой формы в codesandbox.","type":"unstyled","key":"9pj90"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Передача ref от родителя к дочернему компоненту в качестве пропса","type":"header-three","key":"96f0s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Конечно, в реальных условиях не стоит писать один огромный компонент на все случаи жизни. Лучше извлечь каждый ввод в отдельный компонент и повторно использовать его в разных формах. В этом случае можно инкапсулировать и контролировать собственные стили и даже иметь некоторые дополнительные функции, такие как метка вверху и значок справа.","type":"unstyled","key":"5hl7u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const InputField = ({ onChange, label }) => { \n return <> \n {label}
\n onChange(e.target.value)} /> \n < /> \n}","type":"blockquote","key":"4ol2v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но функции обработки ошибок и отправки по-прежнему будут в Form, а не в input!","type":"unstyled","key":"die81"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const Form = ( ) => { \n const [name, setName] = useState ( '' ); \n\n const onSubmitClick = ( ) => { \n if (!name) { \n // имеем дело с пустым именем\n } else { \n // отправляем сюда данные! \n } \n } \n\n return <> \n ... \n \n \n \n}","type":"blockquote","key":"1fna3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как указать полю ввода «самофокусироваться» из компонента формы (Form)? «Обычное» управление данными и поведением в React — передача пропсов компонентам и прослушивание обратных вызовов. Можно попытаться передать пропс «focusItself» к InputField для переключения с false на true. Но это сработает только один раз.","type":"unstyled","key":"8hl8a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// не делайте этого в реальности! только для демонстрации работы в теории \nconst InputField = ( { onChange, focusItself } ) => { \n const inputRef = useRef (null); \n\n useEffect ( () => { \n if (focusItself) { \n // \"фокусирование\" ввода, если пропс focusItself изменяется, \n // сработает только один раз, когда false изменится на true\n ref. current . focus (); \n } \n }, [focusItself]) \n\n // остальное здесь то же самое\n }","type":"blockquote","key":"fpnek"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно попробовать добавить какой-нибудь обратный вызов «onBlur» и сбросить этот пропс focusItself в false, когда ввод теряет фокус, поэкспериментировать со случайными значениями вместо логических или найти какое-то другое решение.","type":"unstyled","key":"de9rv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вероятно, есть и другой способ. Вместо того чтобы возиться с пропсами, можно просто создать Ref в одном компоненте (Form), передать его другому компоненту (InputField) и прикрепить его к базовому элементу DOM. В конце концов, Ref — это всего лишь изменяемый объект.","type":"unstyled","key":"3gh8a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Затем Form создаст Ref как обычно:","type":"unstyled","key":"4gp7r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const Form = ( ) => { \n // создаем компонент Ref в Form \n const inputRef = useRef (null); \n\n ... \n}","type":"blockquote","key":"9keag"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А компонент InputField будет иметь пропс, который принимает ref, и поле input, которое принимает ref. Только вместо создания в InputField Ref будет исходить из пропса:","type":"unstyled","key":"d0k4s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const InputField = ( { inputRef } ) => { \n // остальная часть кода такая же \n\n // передача ref из пропса во внутренний компонент ввода \n return \n}","type":"blockquote","key":"d3p83"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":19,"style":"ITALIC"}],"text":"Ref разработан как изменяемый объект. После передачи элементу, React просто изменяет его. А измененный объект будет объявлен в компоненте Form. Поэтому после рендеринга InputField объект Ref будет изменен, а Form получит доступ к элементу DOM input в inputRef.current:","type":"unstyled","key":"fi0m1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const Form = ( ) => { \n // создаем компонент Ref в Form \n const inputRef = useRef (null); \n\n useEffect ( () => { \n // здесь будет элемент \"input\", который рендерится внутри InputField \nconsole.log(inputRef.current);\n }, []);\n \nreturn (\n <> \n {/* Передать ref как пропс компоненту поля ввода */} \n \n \n ) \n}","type":"blockquote","key":"64qco"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Или же при отправке обратного вызова можно вызвать inputRef.current.focus() — код точно такой же, как и раньше.","type":"unstyled","key":"6ej85"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":13,"offset":0}],"inlineStyleRanges":[],"text":"Пример здесь.","type":"unstyled","key":"efc6p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Передача ref от родителя к дочернему компоненту с помощью forwardRef","type":"header-three","key":"e0fce"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я назвал свойство inputRef, а не просто ref, по следующей причине. ref — это не обычный пропс, а своего рода «зарезервированное» имя. Раньше если мы передавали ref компоненту класса при его написании, экземпляр этого компонента был значением .current этого Ref.","type":"unstyled","key":"9md2f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но функциональные компоненты не имеют экземпляров. Об этом дается предупреждение в консоли: «Функциональные компоненты не могут иметь refs. Попытки получить доступ к этому ref будут неудачными. Хотите использовать React.forwardRef()?».","type":"unstyled","key":"431ra"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const Form = ( ) => { \n const inputRef = useRef (null);\n\n // если мы так сделаем, то получим предупреждение в консоли \n return \n}","type":"blockquote","key":"3ofj9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":187,"style":"ITALIC"}],"text":"Чтобы это сработало, нужно сигнализировать React о том, что в данный момент мы собираемся использовать этот ref. Сделать это можно с помощью функции forwardRef: она принимает компонент и вставляет ref из атрибута ref в качестве второго аргумента функции компонента, сразу после пропса.","type":"unstyled","key":"dbnet"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// обычно там только пропсы, \n// но мы обернули функцию компонента с помощью forwardRef, \n// которая вводит второй аргумент - ref, \n// если он был передан этому компоненту его потребителем \nconst InputField = forwardRef ( ( props, ref ) => { \n // остальной код такой же\n\n return \n})","type":"blockquote","key":"c28dc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для лучшей читабельности можно даже разделить приведенный выше код на две переменные:","type":"unstyled","key":"8hb8h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const InputFieldWithRef = ( props, ref ) => { \n // остальное то же самое\n }\n\n// это будет использоваться формой \nexport const InputField = forwardRef ( InputFieldWithRef );","type":"blockquote","key":"meku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь Form может просто передать ref компоненту InputField, как обычному элементу DOM:","type":"unstyled","key":"750dd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return ","type":"blockquote","key":"fedrn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Использовать ли forwardRef или просто передавать ref как пропс — здесь все зависит от личных предпочтений. Конечный результат будет одинаковый.","type":"unstyled","key":"5hmpb"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":17,"offset":18}],"inlineStyleRanges":[],"text":"Реальный пример в этом CodeSandbox.","type":"unstyled","key":"cbblk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Императивный API с useImperativeHandle","type":"header-three","key":"82tji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Будем считать, что с фокусировкой поля ввода от компонента Form мы разобрались. Но ведь это еще не все. В случае ошибки мы собирались дополнить фокусировку поля ввода вибрацией. Но здесь нет такого элемента, как element.shake() в нативном API Javascript. Так что доступ к элементу DOM тут не поможет.","type":"unstyled","key":"bpou"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эту задачу можно легко реализовать как анимацию CSS:","type":"unstyled","key":"9ge38"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const InputField = ( ) => { \n // сохраняем в состоянии, есть ли необходимость во встряхивании \n const [shouldShouldShake, setShouldShake] = useState (false);\n\n // просто добавьте имя класса, когда пришло время встряхнуть его — css обработает его \n const className = shouldShake ? \"shake-animation\" : '';\n\n // когда анимация завершена, состояние перехода возвращается в false, чтобы при необходимости можно было начать заново \n return setShouldShake(false)} /> \n}","type":"blockquote","key":"9tcl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но как это запустить? Опять та же история, что и раньше с фокусом. Можно придумать какое-то креативное решение с пропсом, но оно выглядело бы странно и сильно усложняло Form. Особенно учитывая обработку фокуса через ref, поэтому используем два решения для одной и той же проблемы. Не помешало бы сделать здесь что-то типа InputField.shake() и InputField.focus()!","type":"unstyled","key":"21rlh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почему для запуска фокусировки компонент Form должен взаимодействовать с нативным API DOM? Разве не для этого нужен InputField, чтобы абстрагироваться от подобных сложностей? Почему Form вообще имеет доступ к базовому элементу DOM — это утечка внутренних деталей реализации. Компоненту Form все равно, используем ли мы какой-то элемент DOM или что-то другое. Таков принцип разделения функций.","type":"unstyled","key":"4g6ss"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":19,"offset":240}],"inlineStyleRanges":[],"text":"Теперь реализуем императивный API, соответствующий компоненту InputField. Будучи декларативным инструментом, React ожидает соответствующий код. Но иногда нужен способ принудительно (императивно) запустить что-то. Для этого в React есть хук useImperativeHandle.","type":"unstyled","key":"1ichg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сразу разобраться в этом хуке не так просто. Для этого мне пришлось дважды прочитать документацию, опробовать хук несколько раз и проанализировать реализацию в реальном коде React. Но, по сути, нам нужны всего две вещи: решить, как будет выглядеть императивный API и Ref, к которому его нужно прикрепить. Для нашего ввода это просто: нужны функции .focus() и .shake() как API, и мы уже знаем все о refs.","type":"unstyled","key":"fbklb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// вот как мог бы выглядеть наш API \nconst InputFieldAPI = { \n focus : () => { \n // здесь делаем фокус\n }, \n Shake : () => { \n // здесь запускаем Shake\n } \n}","type":"blockquote","key":"22ki7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хук useImperativeHandle просто прикрепляет этот объект к «текущему» свойству объекта Ref. Вот пример:","type":"unstyled","key":"7t6hd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const InputField = ( ) => {\n\n useImperativeHandle (someRef, () => ({ \n focus : () => {}, \n Shake : () => {}, \n }), [])\n\n}","type":"blockquote","key":"56d0c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первый аргумент — это Ref, который либо создается в самом компоненте, либо передается из пропса, либо через forwardRef. Второй аргумент — функция, возвращающая объект, который будет доступен как inputRef.current. И третий аргумент — это массив зависимостей, как и любой другой хук React.","type":"unstyled","key":"9j4ln"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для нашего компонента явно передадим ссылку как пропс apiRef. И осталось лишь реализовать реальный API. Для этого понадобится еще один ref, на этот раз внутренний для InputField, чтобы можно было прикрепить его к элементу DOM input и активировать фокус, как обычно:","type":"unstyled","key":"cl140"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// передаем реф, который будем использовать в качестве императивного API, как пропс \nconst InputField = ( {apiRef} ) => { \n // создаем другой реф — внутренний для компонента Input\n const inputRef = useRef ( null ); \n\n // \"слить\" наш API в apiRef \n // возвращенный объект будет доступен для использования как apiRef.current \n useImperativeHandle (apiRef, () => ({ \n focus : () => { \n // просто активируем фокус по внутреннему реф, который прикрепляется к объекту DOM \ninputRef.current.focus\n },\n shake: () => {},\n }), [])\n\n return \n}","type":"blockquote","key":"7hsr4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А для «встряхивания» (shake) просто вызовем обновление состояния:","type":"unstyled","key":"45sv9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// передаем Ref, который будем использовать в качестве императивного API, как пропс\nconst InputField = ( { apiRef } ) => { \n // помним наше состояние для встряхивания? \n const [shouldShake, setShouldShake] = useState ( false ); \n\n useImperativeHandle (apiRef, () => ({ \n focus : () => {}, \n Shake : () => { \n // здесь запускаем обновление состояния \n setShouldShouldShake ( true ); \n }, \n }), []) \n\n return ... \n}","type":"blockquote","key":"3mipa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь Form может просто создать ref, передать его InputField, и можно просто сделать inputRef.current.focus() и inputRef.current.shake(), не заботясь об их внутренней реализации!","type":"unstyled","key":"7peto"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const Form = ( ) => { \n const inputRef = useRef ( null ); \n const [имя, setName] = useState ( '' ); \n\n const onSubmitClick = ( ) => { \n if (!name) { \n // фокусируем ввод, если пустое поле \"имя\"\n inputRef. текущий . фокус (); \n // и встряхнем его! \n inputRef.current.shake();\n } else { \n // отправляем данные сюда! \n } \n } \n\n return <>\n ...\n \n \n \n}","type":"blockquote","key":"75c0"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":17,"offset":54}],"inlineStyleRanges":[],"text":"Поэкспериментируйте с примером полной рабочей формы в этом CodeSandbox.","type":"unstyled","key":"7cus4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Императивный API без useImperativeHandle","type":"header-three","key":"21t90"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если хук useImperativeHandle все еще заставляет нервничать, то не волнуйтесь — вы в этом не одиноки. К тому же для реализации нашей функциональности можно обойтись и без него. Мы уже знаем, как работают рефы и то, что они изменяемые. Итак, нам нужно просто связать объект API с ref.current используемого Ref, например так:","type":"unstyled","key":"bb16b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const InputField = ( { apiRef } ) => { \n useEffect ( () => { \n apiRef. current = { \n focus : () => {}, \n Shake : () => {}, \n } \n }, [apiRef]) \n}","type":"blockquote","key":"9496s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В любом случае это почти то же самое, что делает useImperativeHandle. И работать будет точно так же.","type":"unstyled","key":"9p7h9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На самом деле здесь, возможно, даже лучше подойдет useLayoutEffect. Но пока обойдемся традиционным useEffect.","type":"unstyled","key":"2k5eo"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":17,"offset":23}],"inlineStyleRanges":[],"text":"См. последний пример в этом CodeSandbox.","type":"unstyled","key":"einb4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Заключение","type":"header-three","key":"dtv9q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Форма с эффектом вибрации готова, рефы React — больше не загадка, а императивное API в React — это удобный инструмент.","type":"unstyled","key":"ajqgt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но следует помнить: Refs — «аварийное решение», а не замена состоянию и обычному потоку данных React с пропсами и обратными вызовами. Используйте их только тогда, когда нет «нормальной» альтернативы. То же самое касается императивного запуска. Скорее всего, вам достаточно будет обычного потока пропсов/обратных вызовов.","type":"unstyled","key":"bb6a9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"cudml"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":36,"offset":0}],"inlineStyleRanges":[],"text":"Как реализовать feature gate в React","type":"unordered-list-item","key":"6cedg"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":35,"offset":0}],"inlineStyleRanges":[],"text":"7 способов создать приложение React","type":"unordered-list-item","key":"2di2p"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":65,"offset":0}],"inlineStyleRanges":[],"text":"Руководство по применению паттерна Event Bus в архитектуре React ","type":"unordered-list-item","key":"38dhe"},{"data":{},"depth":0,"entityRanges":[{"key":11,"length":8,"offset":14},{"key":12,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"eg9ul"},{"data":{},"depth":0,"entityRanges":[{"key":13,"length":16,"offset":15},{"key":14,"length":51,"offset":33}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Nadia Makarevich: Refs in React: from access to DOM to imperative API","type":"unstyled","key":"aodt8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ft3qe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"T6xlqS5Dj6jIPrUoiUOV"}],"entityMap":{"11":{"data":{"href":"https://t.me/nuancesprog","url":"https://t.me/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"12":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"13":{"data":{"href":"https://adevnadia.medium.com","url":"https://adevnadia.medium.com/"},"mutability":"MUTABLE","type":"LINK"},"14":{"data":{"href":"https://adevnadia.medium.com/refs-in-react-from-access-to-dom-to-imperative-api-1f2806b698fb","url":"https://adevnadia.medium.com/refs-in-react-from-access-to-dom-to-imperative-api-1f2806b698fb"},"mutability":"MUTABLE","type":"LINK"},"0":{"data":{"url":"https://nuancesprog.ru/p/18507/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://react.dev/learn/referencing-values-with-refs#differences-between-refs-and-state","url":"https://react.dev/learn/referencing-values-with-refs#differences-between-refs-and-state"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://codesandbox.io/embed/giant-form-ref-example-23z9vf?file=/src/App.tsx?codemirror=1&hidedevtools=1&view=preview","url":"https://codesandbox.io/embed/giant-form-ref-example-23z9vf?file=/src/App.tsx?codemirror=1&hidedevtools=1&view=preview"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://codesandbox.io/s/example2-pass-ref-as-prop-5i03u9?from-embed","url":"https://codesandbox.io/s/example2-pass-ref-as-prop-5i03u9?from-embed"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://codesandbox.io/s/example3-pass-ref-with-forwardref-eg30h5?from-embed","url":"https://codesandbox.io/s/example3-pass-ref-with-forwardref-eg30h5?from-embed"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://react.dev/reference/react/useImperativeHandle","url":"https://react.dev/reference/react/useImperativeHandle"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://codesandbox.io/s/example4-imperative-api-with-useimperativehandle-v5hdsm?from-embed","url":"https://codesandbox.io/s/example4-imperative-api-with-useimperativehandle-v5hdsm?from-embed"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://codesandbox.io/s/example5-imperative-api-without-useimperativehandle-yjyxd0?from-embed","url":"https://codesandbox.io/s/example5-imperative-api-without-useimperativehandle-yjyxd0?from-embed"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://nuancesprog.ru/p/18446/","url":"https://nuancesprog.ru/p/18446/"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://nuancesprog.ru/p/16491/","url":"https://nuancesprog.ru/p/16491/"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"href":"https://nuancesprog.ru/p/16623/","url":"https://nuancesprog.ru/p/16623/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}