Введение

Что такое useRef

useRef — это хук React, который позволяет создавать постоянную ссылку на значение или элемент DOM. В отличие от useState, который используется для управления состоянием, запускающим повторную отрисовку, useRef в основном используется для побочных эффектов или прямого доступа к элементам DOM.

Зачем использовать useRef

Хук useRef особенно полезен для:

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

Понимание хука useRef

Хук useRef возвращает объект со свойством .current. когда вы вызываете useRef, он создает постоянную ссылку на значение, которое вы передаете в качестве аргумента. Эта ссылка хранится в свойстве .current возвращаемого объекта.

Создание ссылки с помощью useRef

Чтобы создать ссылку, просто вызовите useRef с начальным значением.

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  return (...)
}

export default App

В приведенном выше примере countRef — это ссылка на начальное значение 0.

Доступ к эталонному значению

Чтобы получить доступ к ссылочному значению, просто вызовите объект countRef со свойством .current

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  const increment = () => {
    countRef.current  
  }

  return (
    

      
Count: {countRef.current}
      Increment
    
  )
}

export default App

В приведенном выше примере, если вы нажмете кнопку, будет вызвана функция увеличения, которая увеличит countRef, но счетчик не будет обновлен в

Count: {countRef.current

обновите код до примера ниже, чтобы получить ожидаемый результат.

import { useRef, useState } from 'react'

const App = () => {
  const countRef = useRef(0)
  const [count, setCount] = useState(0)

  const increment = () => {
    countRef.current  
    setCount(countRef.current)
  }

  return (
    

      
Count: {count}
      Increment
    
  )
}

export default App

Распространенные случаи использования useRef

Прямой доступ к элементам DOM и управление ими.

можно использовать хук useRef для доступа и изменения свойств элементов HTML

const App = () => {
  const inputRef = useRef(null)

  const handleFocus = () => {
    inputRef.current.focus()
  }

  return(
    
  )
}

Постоянные ценности

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

Оптимизация производительности

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

Лучшие практики и соображения

• Не пишите  и не читайте ref.current во время рендеринга
• Вы можете изменить свойство ref.current.
• Когда вы меняете свойство ref.current, React не выполняет повторную визуализацию вашего компонента
• Информация  является локальной для каждой копии вашего компонента (в отличие от внешних переменных, которые являются общими). ​​Вы можете хранить информацию между повторными рендерингами (в отличие от обычных переменных, которые сбрасывается при каждом рендеринге).
• Вместо этого вы можете читать или записывать ссылки из обработчиков событий или эффектов.
• Управление доменом с помощью ref

Передача ссылки на пользовательский компонент.

Если вы попытаетесь передать ссылку на свой собственный компонент следующим образом

const inputRef = useRef(null);

return ;

В консоли может появиться ошибка:
Предупреждение: Функциональным компонентам нельзя присваивать ссылки. Попытки получить доступ к этой ссылке потерпят неудачу. Вы имели в виду использовать React.forwardRef()?

Чтобы решить эту проблему, оберните пользовательский компонент с помощьюforwardRef следующим образом:

const inputRef = useRef(null);

return ;

Пользовательский компонент:

import { forwardRef } from 'react';

const MyInput = forwardRef(({ value, onChange }, ref) => {
  return (
    
  );
});

export default MyInput;

Заключение

useRef — это мощный перехват, который в основном используется для использования побочных эффектов, таких как кэширование данных между повторными рендерингами или доступ к элементам DOM. Это отличный инструмент для оптимизации производительности и достижения определенных функций в приложении React.