useRef 钩子是一个内置的 React 钩子，用于在渲染之间保留值而不导致重新渲染。它通常用于直接与 DOM 元素 交互，并存储需要在渲染之间保留但不一定需要触发重新渲染的值。
useRef 钩子主要用于两个目的：
const myRef = useRef(initialValue);
useRef 返回的引用对象有一个 current 属性，它是实际值存储的位置。
const MyComponent = () => {
const inputRef = useRef(null);
const focusInput = () => {
// Access the DOM node and focus it
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} />
<button onClick={focusInput}>Focus Input</button>
</div>
);
};
const TimerComponent = () => {
const countRef = useRef(0);
const increment = () => {
countRef.current++;
console.log(countRef.current); // This will log the updated value
};
return (
<div>
<p>Current count (does not trigger re-render): {countRef.current}</p>
<button onClick={increment}>Increment</button>
</div>
);
};
const ScrollToTop = () => {
const topRef = useRef(null);
const scrollToTop = () => {
topRef.current.scrollIntoView({ behavior: 'smooth' });
};
return (
<div>
<div ref={topRef}>
<ol>
<li>
<strong>Storing Previous State</strong>: If you need to track the previous value of a prop or state value.
</li>
</ol>
<pre class="brush:php;toolbar:false"> const PreviousState = ({ count }) => {
const prevCountRef = useRef();
useEffect(() => {
prevCountRef.current = count; // Store the current value in the ref
}, [count]);
return (
<div>
<p>Current Count: {count}</p>
<p>Previous Count: {prevCountRef.current}</p>
</div>
);
};
避免复杂值的重新渲染：如果你有一个不需要触发重新渲染的大型对象或复杂数据结构，useRef 可以存储它而不影响组件的表演。
跟踪间隔或超时：您可以存储超时或间隔的 ID，以便稍后清除它们。
const myRef = useRef(initialValue);
| Feature | useRef | useState |
|---|---|---|
| Triggers re-render | No (does not trigger a re-render) | Yes (triggers a re-render when state changes) |
| Use Case | Storing mutable values or DOM references | Storing state that affects rendering |
| Value storage | Stored in current property | Stored in state variable |
| Persistence across renders | Yes (keeps value across renders without triggering re-render) | Yes (but triggers re-render when updated) |
这是一个使用 useRef 进行表单验证的示例，重点关注无效时的输入字段。
从 'react' 导入 React, { useRef, useState };
const FormComponent = () =>; {
const inputRef = useRef();
const [inputValue, setInputValue] = useState('');
const [错误，setError] = useState('');
const validateInput = () =>; {
如果（输入值===''）{
setError('输入不能为空');
inputRef.current.focus(); // 聚焦输入元素
} 别的 {
设置错误('');
}
};
返回 （
<div>
; setInputValue(e.target.value)}
>>
{错误&<p>
<ul>
<li>
<strong>说明</strong>：
<ul>
<li>inputRef 用于在输入值为空时聚焦于输入元素。</li>
<li>使用 useState 无法实现此功能，因为关注 DOM 元素需要直接访问该元素，而 useState 无法提供这一点。</li>
</ul>
</li>
</ul>
<hr>
<h3>
<strong>使用总结Ref Hook</strong>
</h3>
<ul>
<li>
<strong>useRef</strong> 用于存储对 DOM 元素和可变值的引用，更新时不会触发重新渲染。</li>
<li>它对于直接访问 DOM 节点很有用（例如，用于聚焦、滚动或动画）。</li>
<li>
<strong>useRef</strong> 还可以方便地存储跨渲染持续存在的值，而无需触发重新渲染，例如跟踪先前的值或存储超时/间隔 ID。</li>
<li>
<strong>主要区别</strong>：与 useState 不同，更新 useRef 不会触发重新渲染。</li>
</ul>
<hr>
<h3>
<strong>结论</strong>
</h3>
<p><strong>useRef</strong> 钩子对于处理 React 中的可变值和直接 DOM 操作非常有用。无论您是使用表单元素、跟踪先前的状态还是与第三方库交互，useRef 都提供了一个干净、高效的解决方案。通过使用 useRef，您可以保持持久性，而不会触发不必要的重新渲染，这使其成为性能敏感操作的绝佳选择。</p>
<hr>
</div>
以上是掌握 React 的 useRef Hook：使用 DOM 和可变值的详细内容。更多信息请关注PHP中文网其他相关文章！
