useRef：掌握 React 的「儲物櫃」與 DOM 操控

什麼是 useRef？

useRef 回傳一個帶有 current 屬性的物件。它有兩個最主要的用途：

1. 存取 DOM 元素：直接抓取網頁上的 HTML 標籤（例如讓輸入框聚焦）。
2. 儲存「不需要渲染」的資料：存放在裡面的資料改變時，不會觸發組件重新渲染。

核心觀念：

• 如果您希望改了某個值，畫面要跟著變，請用 useState；
• 如果您只是想偷偷記住一個值，或是要直接控制 HTML 標籤，請用 useRef。

語法拆解

javascript source case
javascriptCopy
const myRef = useRef(initialValue);

// 取值或改值
console.log(myRef.current);
myRef.current = "新資料";

您可以把 useRef 想像成一個**「掛在組件身上的儲物櫃」**。

1. 為什麼是 .current？

當您執行 const myRef = useRef(0); 時，React 實際上是幫您建立了一個像這樣的物件：

javascript source case
javascriptCopy
{
  current: 0  // 這是您傳進去的 initialValue
}

為什麼非要包成物件？因為在 JavaScript 中，物件是傳址（Pass by Reference）。這能保證 React 在多次重新渲染組件時，手上拿到的始終是同一個「儲物櫃」，所以裡面的 current 才能一直保存著。

2. 取值與修改

• 取值：myRef.current (單純讀取，不會觸發渲染)
• 改值：myRef.current = "新資料" (靜悄悄地換掉內容，React 不會被驚動)

使用 useRef 的常見情境

• 管理焦點、文字選取或媒體播放
• 整合第三方 DOM 函式庫 (如 D3.js 或 jQuery)
• 儲存「前一個狀態」 (Previous State)

範例：直接操控 DOM

我們常希望使用者點開頁面時，游標自動停在「訂單編號」輸入框。
codepen 範例

範例：儲存不觸發渲染的變數

假設您要記錄使用者「點擊了幾次按鈕」，但不希望每次點擊都重新渲染。
codepen 範例

useRef vs useState