Рефы (сокращение от «ссылки») в React — это способ доступа и взаимодействия с узлами DOM или компонентами React напрямую. Они предоставляют средства для хранения ссылки на конкретный экземпляр элемента или компонента, позволяя вам выполнять над ним действия, которые могут быть невозможны при обычном управлении состоянием React и реквизитами. Ссылки следует использовать с осторожностью и только при необходимости, поскольку их использование может привести к менее предсказуемому и сложному в сопровождении коду.

Хук useRef используется для создания ссылок в функциональных компонентах. Хук useRef возвращает изменяемый объект ref, свойство .current которого инициализируется переданным аргументом (начальное значение равно null, если аргумент не указан). Возвращенный объект будет сохраняться в течение всего срока службы компонента.

Вот базовый пример использования хука useRef

import React, { useRef } from 'react';

function ExampleComponent() {
  // Create a ref with an initial value of null
  const myRef = useRef(null);

  // You can then attach the ref to a DOM element or a React component in your JSX
  // <input ref={myRef} />

  // Access the ref and its underlying DOM node or component instance using myRef.current

  return (
    // ...
  );
}

Случаи использования:

  1. Управление фокусом, выделением текста или воспроизведением мультимедиа: Refs можно использовать для управления фокусом элемента ввода, выбора текста или воспроизведения/паузы элементов мультимедиа программным путем.
  2. Запуск императивных анимаций: ссылки можно использовать для запуска анимаций в сторонних библиотеках, которым требуется прямой доступ к DOM.
  3. Интеграция с библиотеками, отличными от React: ссылки можно использовать для взаимодействия с библиотеками, отличными от React, которым требуется прямой доступ к DOM, например jQuery или D3.js.
  4. Хранение изменяемых значений, которые сохраняются при рендеринге: useRef также можно использовать для хранения изменяемых значений, которые должны сохраняться при рендеринге без запуска повторного рендеринга. Это может быть полезно для хранения предыдущих свойств или значений состояния, отслеживания тайм-аутов или интервалов или управления экземплярами внешних библиотек.

Пример:

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

import React, { useRef } from 'react';

function FocusExample() {
  // Create a ref for the input element
  const inputRef = useRef(null);

  // Function to handle button click
  const handleButtonClick = () => {
    // Access the input element and call the focus method
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Focus me on button click" />
      <button onClick={handleButtonClick}>Focus Input</button>
    </div>
  );
}

export default FocusExample;

В этом примере мы создаем ссылку, используя useRef, и присоединяем ее к элементу ввода в нашем JSX. При нажатии кнопки вызывается функция handleButtonClick, которая обращается к элементу ввода с помощью inputRef.current и вызывает его метод focus. Это приводит к тому, что элемент ввода получает фокус, позволяя пользователю немедленно начать печатать.

Важно помнить, что использование рефов может сломать типичный образ мышления «React», когда данные передаются через свойства, а обновления управляются через состояние. Поэтому лучше использовать ссылки только при необходимости и хранить большую часть вашей логики в иерархии компонентов React.

Если вам нравится моя работа, нажмите на 👏, подпишитесь на меня, чтобы узнать больше, и купите мне кофе, если вы чувствуете себя очень щедрым.

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .