08.11.2023 в 15:44
Алексей Устинов
useRef для избегания повторного рендеринга компонента
useRef может хранить любые изменяемые данные, которые вы хотите сохранить между рендерингами. Это поможет вам избежать повторного рендеринга компонента, когда вы этого не хотите.
useRef против useState
useRef похож на useState, но есть некоторые различия:
- Оба
useStateиuseRefмогут сохранять значение между рендерингами. useStateиспользуется для хранения состояния компонента, тогда какuseRefиспользуется для хранения любого изменяемого значения.useStateприведет к повторной визуализации компонента при обновлении состояния, тогда какuseRefне приведет к повторной визуализации компонента при обновлении значения.
const [text, setText] = useState('')
const handleTextChange = (e) => {
setText(e.target.value)
}
// повторно отображает компонент при каждом изменении текста
return (
<div>
<input type="text" value={text} onChange={handleTextChange} />
</div>
)Использование useRef для хранения значения входного элемента не приведет к повторной визуализации компонента при обновлении значения.
const textRef = useRef('')
const handleTextChange = (e) => {
textRef.current = e.target.value
}
// нет повторной визуализации при изменении текста
return (
<div>
<input type="text" value={textRef.current} onChange={handleTextChange} />
</div>
)useRef в основном используется для:
- Сохранение предыдущего значения состояния или реквизита компонента при рендеринге компонента
- Доступ к узлам DOM в React
useRef для хранения предыдущего значения состояния или реквизита компонента
import React, { useState, useRef } from 'react'
const Slide = ({ selectedSlideIndex }) => {
const [slide, setSlide] = useState(selectedSlideIndex)
const prevSlideRef = useRef()
// обновить предыдущее значение слайда при изменении значения слайда
useEffect(() => {
prevSlideRef.current = slide
}, [slide])
const prevSlide = prevSlideRef.current
return (
<div>
<p>Current slide: {slide}</p>
<p>Previous slide: {prevSlide}</p>
<button onClick={() => setSlide(slide + 1)}>Next</button>
</div>
)
}В приведенном выше примере useRef помогает сохранить предыдущее значение переменной состояния слайда.
Некоторые из вариантов использования:
- Функция отмены/повтора
- Сохранение предыдущего значения переменной состояния для сравнения с текущим значением и выполнения какого-либо действия
- Сохранение черновика, если значение текстового поля изменено
- Отображение диалогового окна подтверждения, если значение текстовой области изменено и пользователь пытается уйти со страницы
useRef для доступа к узлам DOM
import React, { useRef, useEffect } from 'react'
const Input = () => {
const inputRef = useRef(null)
// сфокусируйте элемент ввода, когда компонент смонтирован
useEffect(() => {
inputRef.current.focus()
}, [])
return (
<div>
<input ref={inputRef} type="text" />
</div>
)
}В приведенном выше примере useRef помогает получить доступ к элементу ввода и сфокусировать его при монтировании компонента.
Некоторые из вариантов использования:
- Фокусировка или размытие элемента
- Доступ к узлу DOM для получения размера элемента
- Доступ к узлу DOM для получения положения прокрутки элемента
