DevGang
Авторизоваться

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 для получения положения прокрутки элемента

Источник:

#JavaScript #React
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться