useRef()
- это хук в React, предназначенный для создания изменяемого значения, которое сохраняется между рендерами компонента. В отличие от useState
, изменение значения useRef
не вызывает повторного рендеринга компонента.
Основные характеристики useRef
:
- Сохранение значения между рендерами: Значение, хранящееся в
useRef
, сохраняется между рендерами компонента. Это полезно, когда вам нужно хранить какое-то значение, которое не должно вызывать повторный рендеринг. - Доступ к DOM-элементам: Одним из наиболее распространенных применений
useRef
является доступ к DOM-элементам. Вы можете связатьref
с элементом в JSX и затем использовать его для прямого манипулирования этим элементом. - Изменяемость: Вы можете изменять значение
useRef
напрямую, не вызывая повторного рендеринга. Это делается через свойствоcurrent
.
import React, { useRef } from 'react';
function MyComponent() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Focus Input</button>
</div>
);
}