【React 學習筆記 EP.18】useRef

什麼是 useRef？

useRef 是 React 提供的一個 Hook，讓你可以保存一個不會觸發畫面重新渲染的值。

useRef 概念

1. 不觸發重新渲染：和 useState 不同，修改 useRef 的值不會讓元件重新渲染。
2. .current 屬性：useRef 回傳一個物件 { current: 值 }，你透過 .current 來讀取或修改內容。
3. 取得 DOM 元素：把 ref 綁定到 JSX 標籤上，就能直接操作那個 DOM 節點，例如讓輸入框自動聚焦。

useRef 語法

1. useRef：內建的 Hook，需從 react 匯入。
2. initialValue：初始值，可以是任何型別，常見為 null 或 0。
3. myRef：回傳一個物件{ current: initialValue }。
4. myRef.current：用來讀取或修改儲存的值。
5. ref={myRef}：放在 JSX 標籤上，React 會自動把該 DOM 節點指派給 myRef.current。

// const myRef = useRef(initialValue);

import { useRef } from "react"; // 匯入 useRef

export default function App() {
  const inputRef = useRef(null); // 建立一個 ref，初始值為 null

  const handleClick = () => {
    inputRef.current.focus(); // 透過 .current 取得 DOM 節點，呼叫 focus()
  };

  return (
    <div>
      <input ref={inputRef} placeholder="請輸入文字" /> {/* 綁定 ref */}
      <button onClick={handleClick}>聚焦輸入框</button>
    </div>
  );
}