React useRef
Hook
The useRef
Hook 允许你在渲染之间持久化值。
它可以用来存储一个可变值,该值在更新时不会导致重新渲染。
它可以用来直接访问 DOM 元素。
不引起重新渲染
如果我们尝试使用 useState
Hook 来计算我们的应用程序渲染了多少次,我们将陷入无限循环,因为这个 Hook 本身就会导致重新渲染。
为了避免这种情况,我们可以使用 useRef
Hook。
示例
使用 useRef
来跟踪应用程序渲染。
import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom/client";
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>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
useRef()
只返回一个项。它返回一个名为 current
的对象。
当我们初始化 useRef
时,我们设置初始值:useRef(0)
。
这就像这样做:const count = {current: 0}
。我们可以通过使用 count.current
来访问 count。
在你的电脑上运行此代码,尝试输入内容,看看应用程序的渲染计数如何增加。
访问 DOM 元素
通常,我们希望让 React 处理所有 DOM 操作。
但是,在某些情况下,useRef
可以使用而不会引起问题。
在 React 中,我们可以在元素上添加一个 ref
属性来直接在 DOM 中访问它。
示例
使用 useRef
来聚焦输入框
import { useRef } from "react";
import ReactDOM from "react-dom/client";
function App() {
const inputElement = useRef();
const focusInput = () => {
inputElement.current.focus();
};
return (
<>
<input type="text" ref={inputElement} />
<button onClick={focusInput}>Focus Input</button>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
跟踪状态更改
useRef
Hook 还可以用来跟踪前一个状态值。
这是因为我们可以在渲染之间持久化 useRef
值。
示例
使用 useRef
来跟踪前一个状态值
import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom/client";
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>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
这次我们结合使用 useState
、useEffect
和 useRef
来跟踪前一个状态。
在 useEffect
中,每次通过在输入框中输入文本来更新 inputValue
时,我们都在更新 useRef
的当前值。