Сегодня мы поговорим об одном из самых важных React Hook useRef().

Прежде всего, если вы заинтересованы в том, чтобы присоединиться к нашему бесплатному сеансу, чтобы ответить на ваши вопросы о программировании и карьере. Пожалуйста, заполните эту форму, чтобы присоединиться к сообществу CODE Culture Pro https://forms.gle/kjU3PWhwQy16Tghe9

Перехватчики React: useRef()
Что такое useRef()?
useRef() — это перехватчик React, который позволяет ссылаться на ненужное значение. для рендеринга.

UseCase
Он используется для ссылки на объект внутри функционального компонента и сохраняет состояние объекта, на который указывает ссылка, между повторными рендерингами.
Его можно использовать для хранения изменяемого значения, которое не вызывает повторную визуализацию при обновлении.

Если бы мы попытались подсчитать, сколько раз наше приложение отрисовывается с использованием хука useState(), мы бы попали в бесконечный цикл, поскольку этот хук сам вызывает повторный рендеринг.
чтобы избежать этого, мы используем хук useRef():
//Code
function App() {
const [inputValue, setInputValue] = useState( **);
const count = useRef(0);
useEffect(() =› {
count.current= count.current + 1;
});
return (
‹›
‹input
type="text"
value={inputValue}
onChange={(e)setInputValue(e.target.value)}
/›
‹h1› Счетчик рендеринга: {count.current}‹/h1›
);
}

Вывод

При каждом нажатии клавиши в поле ввода число будет
увеличиваться.
Манипуляции с DOM:
Объявить объект ref с начальным значением null:
// Код
import { useRef} from 'react';
function MyComponent() {
const inputRef = useRef(null);
…

Затем передайте свой объект ref в качестве атрибута ref в JSX узла DOM, которым вы хотите управлять:
//Code
return ‹input ref={inputRef} /›;

После того, как React создаст узел DOM и поместит его на экран, React установит текущее свойство вашего объекта ref для этого узла DOM. Теперь вы можете получить доступ к DOM-узлу ‹input› и вызывать такие методы, как focus:
//Code
function handleClick() {
inputRef.current.focus();
}
React установит для текущего свойства значение null, когда узел будет удален с экрана.