Реагировать на useRef
крючок
Хук useRef
позволяет сохранять значения между рендерингами.
Его можно использовать для хранения изменяемого значения, которое не вызывает повторного рендеринга при обновлении.
Его можно использовать для прямого доступа к элементу DOM.
Не вызывает повторного рендеринга
Если бы мы попытались подсчитать, сколько раз наше приложение отрисовывается с использованием useState
хука, мы бы застряли в бесконечном цикле, поскольку сам этот хук вызывает повторный рендеринг.
Чтобы избежать этого, мы можем использовать useRef
хук.
Пример:
Используйте useRef
для отслеживания рендеринга приложений.
import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";
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>Render Count: {count.current}</h1>
</>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
useRef()
возвращает только один элемент. Он возвращает объект с именем current
.
При инициализации useRef
мы устанавливаем начальное значение: useRef(0)
.
Это как сделать это: const count = {current: 0}
. Мы можем получить доступ к подсчету, используя count.current
.
Запустите это на своем компьютере и попробуйте ввести ввод, чтобы увидеть увеличение количества рендеринга приложения.
Получите сертификат!
ЗАПИСАТЬСЯ НА 95 $
Доступ к элементам DOM
В общем, мы хотим, чтобы React справился со всеми манипуляциями с DOM.
Но есть несколько случаев, когда useRef
их можно использовать, не вызывая проблем.
В React мы можем добавить ref
атрибут к элементу, чтобы получить к нему доступ непосредственно в DOM.
Пример:
Используйте useRef
, чтобы сфокусировать ввод:
import { useRef } from "react";
import ReactDOM from "react-dom";
function App() {
const inputElement = useRef();
const focusInput = () => {
inputElement.current.focus();
};
return (
<>
<input type="text" ref={inputElement} />
<button onClick={focusInput}>Focus Input</button>
</>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
Отслеживание изменений состояния
Крюк useRef
также можно использовать для отслеживания предыдущих значений состояния.
Это потому, что мы можем сохранять useRef
значения между рендерами.
Пример:
Используйте useRef
для отслеживания предыдущих значений состояния:
import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";
function App() {
const [inputValue, setInputValue] = useState("");
const previousInputValue = useRef("");
useEffect(() => {
previousInputValue.current = inputValue;
}, [inputValue]);
return (
<>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<h2>Current Value: {inputValue}</h2>
<h2>Previous Value: {previousInputValue.current}</h2>
</>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
На этот раз мы используем комбинацию useState
, useEffect
и useRef
для отслеживания предыдущего состояния.
В useEffect
, мы обновляем useRef
текущее значение каждый раз inputValue
, когда обновляется, вводя текст в поле ввода.