[TOC] ## 概述 當你希望組件“記住”某些信息，但又不想讓這些信息 觸發新的渲染 時，你可以使用 ref 。 由于當數據變動時, 組件會進行刷新如果需要在刷新當前組件時,保留某些變量,可以使用ref ## 區別 | ref | state | | --- | --- | | `useRef(initialValue)`返回`{ current: initialValue }` | `useState(initialValue)`返回 state 變量的當前值和一個 state 設置函數 (`[value, setValue]`) | | 更改時不會觸發重新渲染 | 更改時觸發重新渲染。 | | 可變 —— 你可以在渲染過程之外修改和更新`current`的值。 | “不可變” —— 你必須使用 state 設置函數來修改 state 變量，從而排隊重新渲染。 | | 你不應在渲染期間讀取（或寫入）`current`值。 | 你可以隨時讀取 state。但是，每次渲染都有自己不變的 state[快照](https://zh-hans.react.dev/learn/state-as-a-snapshot)。 | ## 場景 通常，當你的組件需要“跳出” React 并與外部 API 通信時，你會用到 ref —— 通常是不會影響組件外觀的瀏覽器 API。以下是這些罕見情況中的幾個： * 存儲[timeout ID](https://developer.mozilla.org/docs/Web/API/setTimeout) * 存儲和操作[DOM 元素](https://developer.mozilla.org/docs/Web/API/Element)， * 存儲不需要被用來計算 JSX 的其他對象。 如果你的組件需要存儲一些值，但不影響渲染邏輯，請選擇 ref。 ## 示例 bad ``` import { useState, useRef } from 'react'; export default function Stopwatch() { const [startTime, setStartTime] = useState<number | null>(null); const [now, setNow] = useState<number | null>(null); let interval: NodeJS.Timeout | null = null; // 無法保留 值 console.log("刷新") // 控制臺會一直打印 "刷新",因為數據變量導致了刷新組件 function handleStart() { setStartTime(Date.now()); setNow(Date.now()); clearInterval(interval); interval = setInterval(() => { setNow(Date.now()); }, 10); console.log(interval) } function handleStop() { clearInterval(interval); // 當需要停止時, intervalRef 值為null,因為組件已經刷新過 } let secondsPassed = 0; if (startTime != null && now != null) { secondsPassed = (now - startTime) / 1000; } return ( <> <h1>時間過去了： {secondsPassed.toFixed(3)}</h1> <button onClick={handleStart}> 開始 </button> <button onClick={handleStop}> 停止 </button> </> ); } ``` good ``` import { useState, useRef } from 'react'; export default function Stopwatch() { const [startTime, setStartTime] = useState<number | null>(null); const [now, setNow] = useState<number | null>(null); const intervalRef = useRef<NodeJS.Timeout | null>(null); function handleStart() { setStartTime(Date.now()); setNow(Date.now()); clearInterval(intervalRef.current!); intervalRef.current = setInterval(() => { setNow(Date.now()); }, 10); } function handleStop() { clearInterval(intervalRef.current!); } let secondsPassed = 0; if (startTime != null && now != null) { secondsPassed = (now - startTime) / 1000; } return ( <> <h1>時間過去了： {secondsPassed.toFixed(3)}</h1> <button onClick={handleStart}> 開始 </button> <button onClick={handleStop}> 停止 </button> </> ); } ```