1. 介紹
當學習 React Hooks 時，大多數開發者會立即專注於 useState 和 useEffect 這些 Hooks。雖然這些 Hooks 非常重要，但另外一個強大的 Hooks — useRef，卻常常被忽略。
乍看之下，useRef 可能會讓人感到困惑，因為與 useState 不同，更新 useRef 的值不會重新渲染組件。但一旦你了解它是如何工作的，你會發現 useRef 是用於處理 DOM 互動、存儲可變值以及提高 React 應用程式性能的最有用 Hooks 之一。
useRef Hook 允許開發者：
直接存取 DOM 元素
專注輸入欄位
在渲染之間儲存值
管理計時器和間隔
避免不必要的重新渲染
在現代 React 應用程式中，useRef 通常在背景中用於表單處理、視頻控制、滾動追蹤和性能優化等。
在本篇部落格中，我們將探討 useRef 的實際用途、它是如何運作
內部，並在實際的 React 專案中使用，並提供實際範例和對初學者友善的解釋.
2. useRef 在 React 中是什麼？
useRef 是一個 React Hook，讓你參考不需要用於渲染的值.
簡單來說，useRef 提供了你以下的方法：
直接存取 DOM 元素
儲存可變值
保留渲染之間的值
與useState不同，更新useRef的值不會重新渲染組件
3.為何需要useRef?
有時在React中，我們需要：
聚焦輸入欄位
直接訪問按鈕
儲存計時器ID
記住先前值
與DOM元素互動
這裡就是useRef變得有用的地方.
把useRef想像成一個特殊的儲存盒，React會在渲染之間記住它.
4(Syntax of useRef)
const ref = useRef(initialValue);
範例:
const inputRef = useRef(null);
這裡：
inputRef → 參考物件
null → 初始值
5. 理解如何使用useRef
useRef 回傳一個像這樣的物件：
{
current: value
}
範例：
const myRef = useRef(0);
console.log(myRef);
輸出：
{
current: 0
}
實際值儲存於內部：
myRef.current
6.透過useRef存取DOM元素
其中一種最常見的應用場景.
範例：
import { useRef } from "react";
function App() {
const inputRef = useRef();
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>
Focus Input
</button>
</div>
);
}
此功能運作方式：
inputRef 連接到輸入元素
React 將 DOM 元素儲存於 inputRef.current
當按鈕被點擊時：
inputRef.current.focus()
- 輸入欄位獲得焦點
7.useRef vs useState
這是最重要的概念之一。
| useState | useRef |
|---|---|
| 會導致重新渲染 | 不會導致重新渲染 |
| 用於UI更新 | 用於儲存可變值 |
| 更新可見數據 | 靜靜地儲存值 |
8.示例差異
使用useState:
const [count, setCount] = useState(0);
更改狀態會更新UI
使用useRef:
const countRef = useRef(0);
更改:
countRef.current++;
不會重新渲染組件.
9.用useRef儲存先前值
useRef 很有用於記住舊值.
範例:
import { useEffect, useRef, useState } from "react";
function App() {
const [count, setCount] = useState(0);
const previousCount = useRef();
useEffect(() => {
previousCount.current = count;
}, [count]);
return (
<div>
<h1>Current: {count}</h1>
<h2>Previous: {previousCount.current}</h2>
<button onClick={() => setCount(count + 1)}>
Increase
</button>
</div>
);
}
這裡:
count 存儲當前值
previousCount.current 存儲舊值
10. useRef 的實際應用場景
你通常會用 useRef 來:
專注輸入欄位
存取DOM元素
管理計時器
儲存先前值
防止不必要的重新渲染
影音控制
捲動位置追蹤
11.簡單類比理解useRef
將useRef想像成組件內的一本隱藏筆記本。
React 會記住渲染之間的筆記本，但更改筆記本不會更新螢幕.
範例：
useState → updates UI
useRef → stores values silently
12.最終心得
useRef 是一個強大的 Hook，允許 React 開發者直接訪問 DOM 元素並存儲可變值，而無需引起不必要的重新渲染。
雖然useState用於更新UI，useRef主要用於在背景儲存值並高效地與DOM互動.
了解何時使用useRef而不是useState是成為更好React開發者的關鍵一步，因為它有助於提高性能和代碼組織。