useRef Flashcards
useRef
useRef это перехватчик реакции, который позволяет вам ссылаться на значение, которое не требуется для рендеринга.
const ref = useRef(initialValue)
function MyComponent() {
const intervalRef = useRef(0);
const inputRef = useRef(null);
// …
Параметры
initialValue: Значение, которое вы хотите, чтобы свойство ref объекта current было изначально. Это может быть значение любого типа. Этот аргумент игнорируется после первоначального отображения.
ВОЗВРАТ
useRef возвращает объект с одним свойством:
current: Изначально для нее задано значениеinitialValue, которое вы передали. Позже вы можете установить для него что-нибудь другое. Если вы передадите объект ref в React в качестве ref атрибута к узлу JSX, React установит его current свойство.
При следующем рендеринге useRef вернет тот же объект.
Предостережения
Вы можете изменять ref.current свойство. В отличие от state , оно изменяемо. Однако, если он содержит объект, который используется для рендеринга (например, фрагмент вашего состояния), то вам не следует изменять этот объект.
При изменении ref.current свойства React не выполняет повторную визуализацию вашего компонента. React не знает, когда вы его изменяете, потому что ref - это обычный объект JavaScript.
Не записывайте и не считывайте ref.current во время рендеринга, за исключением инициализации. Это делает поведение вашего компонента непредсказуемым.
В строгом режиме React вызовет вашу компонентную функцию дважды, чтобы помочь вам найти случайные примеси. Это поведение предназначено только для разработки и не влияет на производство. Каждый объект ref будет создан дважды, но одна из версий будет отброшена. Если функция вашего компонента является чистой (как и должно быть), это не должно повлиять на поведение.
useRef возвращает объект ref с единственным current свойством, изначально установленным в указанное вами начальное значение.
При следующем рендеринге useRef вернет тот же объект. Вы можете изменить его current свойство, чтобы сохранить информацию и прочитать ее позже. Это может напоминать вам о состоянии, но есть важное отличие.
Изменение ссылки не запускает повторный рендеринг. Это означает, что ссылки идеально подходят для хранения информации, которая не влияет на визуальный вывод вашего компонента. Например, если вам нужно сохранить идентификатор интервала и получить его позже, вы можете поместить его в ссылку. Чтобы обновить значение внутри ref, вам необходимо вручную изменить его current свойство
Используя ссылку, вы гарантируете, что:
Вы можете сохранять информацию между повторными рендерингами (в отличие от обычных переменных, которые сбрасываются при каждом рендеринге).
Ее изменение не запускает повторный рендеринг (в отличие от переменных состояния, которые запускают повторный рендеринг).
Информация является локальной для каждой копии вашего компонента (в отличие от внешних переменных, которые являются общими).
Изменение ссылки не запускает повторный рендеринг, поэтому ссылки не подходят для хранения информации, которую вы хотите отобразить на экране. Вместо этого используйте state . Узнайте больше о выборе между useRef и useState.
const inputRef = useRef<HTMLInputElement>(null)
const onClickHandlerRef = () => {
if (inputRef.current) {
addTask (inputRef.current.value)
inputRef.current.value = ''
}
}
<input ref={inputRef}/>
<button onClick={onClickHandlerRef}>+</button></HTMLInputElement>
Недостатки:
- валидация пользовательского ввода не в процессе, а по факту, когда пользователь нажал на кнопку.
Например. Когда пользователь вводит заметку, а унас стоит ограниченеи в 15 символов, но пользователь не знает, что таска будет удалена, после нажатия ее добавления.
