Как useRef используется с useImperativeHandle

1️⃣ Как кратко ответить

useRef используется для создания референции, которая сохраняется между рендерами. useImperativeHandle позволяет компоненту управлять тем, что будет доступно через эту референцию, предоставляя контролируемый интерфейс для взаимодействия с компонентом извне.

2️⃣ Подробное объяснение темы

useRef и useImperativeHandle — это хуки в React, которые позволяют управлять референциями и предоставлять контролируемый интерфейс для взаимодействия с компонентами.

Зачем это нужно

• useRef: Позволяет сохранять мутабельные значения, которые не вызывают повторный рендер компонента при изменении. Это полезно для доступа к DOM-элементам или хранения любых данных, которые должны сохраняться между рендерами.

• useImperativeHandle: Используется для настройки того, что будет доступно через референцию, когда компонент используется как forwardRef. Это позволяет компоненту предоставлять специфичный интерфейс для взаимодействия с ним извне, скрывая внутренние детали реализации.

Как это работает

Пример использования useRef и useImperativeHandle

import React, { useRef, useImperativeHandle, forwardRef } from 'react';
​
// Создаем функциональный компонент, который будет использовать forwardRef
const CustomInput = forwardRef((props, ref) => {
  // Создаем локальную референцию для доступа к DOM-элементу input
  const inputRef = useRef();
​
  // Используем useImperativeHandle для настройки того, что будет доступно через ref
  useImperativeHandle(ref, () => ({
    // Метод для фокусировки на input
    focus: () => {
      inputRef.current.focus();
    },
    // Метод для получения значения input
    getValue: () => {
      return inputRef.current.value;
    }
  }));
​
  // Возвращаем input элемент, связанный с локальной референцией
  return <input ref={inputRef} {...props} />;
});
​
// Компонент, который использует CustomInput
function ParentComponent() {
  // Создаем референцию, которая будет передана в CustomInput
  const inputRef = useRef();
​
  // Функция для фокусировки на input через референцию
  const handleFocus = () => {
    inputRef.current.focus();
  };
​
  // Функция для получения значения input через референцию
  const handleGetValue = () => {
    alert(inputRef.current.getValue());
  };
​
  // Рендерим CustomInput и кнопки для взаимодействия
  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={handleFocus}>Focus Input</button>
      <button onClick={handleGetValue}>Get Input Value</button>
    </div>
  );
}
​
export default ParentComponent;

Объяснение кода

1. Импорт хуков и forwardRef: Мы импортируем необходимые хуки и функцию forwardRef из React. forwardRef позволяет передавать референции дочерним компонентам.

2. Создание компонента CustomInput: Это функциональный компонент, который принимает props и ref. Мы используем forwardRef для передачи референции.

3. Локальная референция inputRef: Создаем референцию с помощью useRef, чтобы получить доступ к DOM-элементу input.

4. useImperativeHandle: Настраиваем, что будет доступно через переданную референцию. В данном случае, это методы focus и getValue, которые позволяют фокусироваться на input и получать его значение.

5. Рендеринг input: Возвращаем элемент input, связанный с локальной референцией inputRef.

6. Компонент ParentComponent: Использует CustomInput и управляет его поведением через референцию inputRef.

7. Функции handleFocus и handleGetValue: Эти функции вызывают методы, определенные в useImperativeHandle, для взаимодействия с CustomInput.

Этот подход позволяет компоненту CustomInput предоставлять контролируемый интерфейс для взаимодействия, скрывая внутренние детали реализации и обеспечивая более чистую архитектуру.