Для чего нужен хук useImperativeHandle?

Question

Хук useImperativeHandle позволяет управлять тем, какие методы и свойства доступны родительскому компоненту через реф. Он используется в сочетании с forwardRef, чтобы создавать компоненты, которые могут предоставлять управляемые интерфейсы, позволяя родителям вызывать определенные функции на дочерних компонентах, такие как фокусировка или анимация.

YeaHub · Accepted Answer

Хук useImperativeHandle в React позволяет кастомизировать инстанс, который будет возвращаться при использовании рефов на компонентах. Это полезно, когда вы хотите, чтобы родительский компонент мог вызывать определенные методы на дочернем компоненте, сохраняя инкапсуляцию и избегая доступа к внутренним данным Использование useImperativeHandle требует, чтобы компонент использовал React.forwardRef, чтобы обеспечить правильную передачу рефа. Вот пример использования:import React, { useImperativeHandle, forwardRef, useRef } from 'react'; const CustomInput = forwardRef((props, ref) => { const inputRef = useRef(); useImperativeHandle(ref, () => ({ focus: () => { inputRef.current.focus(); // Предоставляем метод для фокусировки }, clear: () => { inputRef.current.value = ''; // Предоставляем метод для очистки поля } })); return ; }); function ParentComponent() { const inputRef = useRef(); const handleFocus = () => { inputRef.current.focus(); // Вызываем метод focus на дочернем компоненте }; const handleClear = () => { inputRef.current.clear(); // Вызываем метод clear на дочернем компоненте }; return (

); }В этом примере CustomInput использует useImperativeHandle для предоставления методов focus и clear, которые могут быть вызваны из родительского компонента ParentComponent. Это позволяет родителю управлять состоянием дочернего компонента, сохраняя при этом внутреннюю логику инкапсулированной. Таким образом, useImperativeHandle является мощным инструментом для создания компонентов, которые могут предоставлять управляемые интерфейсы, что особенно полезно в крупных приложениях с комплексными иерархиями компонентов.