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>
</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中文網其他相關文章！
