👋 歡迎回到《前端達人 · React 播客書單》第 16 期（正文內容為學習筆記摘要，音頻內容是詳細的解讀，方便你理解），請點擊下方收聽

視頻版

🎙 歡迎來到《前端達人 · 播客書單》第 16 期。

今天我們來聊聊兩個非常實用但經常被誤解的 React Hook：useRef?和?useMemo。

你可能在項目里“見過但沒用過”，或者“不太確定場景”，這節課我們用簡單示例和對比講清楚：

• 它們分別在做什么？

• 什么時候該用它們？

• 它們和?useState?有啥不同？

? Hook 是什么來頭？

自 React 16.8 起，Hook 正式成為函數組件的第一公民，賦予它們類似類組件的能力：狀態、生命周期、副作用……

Hook 的使用有兩個前提記住：

🚫 不能寫在 if / for / 內層函數中?

? 只能寫在函數組件的“頂層作用域”

🔍 useRef 是什么？（1/3）

useRef?是用來存儲“不會引起渲染”的可變值容器。

const countRef = useRef(0);console.log(countRef.current); // 訪問值
countRef.current = 100; // 修改值，不會觸發組件更新

🧠 小知識點：

• 跟?useState?不一樣，它不會觸發渲染

• .current?才是真正存放的值

• 適合存儲：定時器 ID、上一次的 prop、一些中間狀態

💡 useRef 最典型用法：操作 DOM（2/3）

你可能已經遇到這個場景：

頁面加載后自動聚焦一個 input 輸入框，怎么辦？

👀 用?useRef?+?useEffect?就搞定：

function MyComponent() {const inputRef = useRef<HTMLInputElement>(null);useEffect(() => {inputRef.current?.focus(); // 聚焦 input}, []);return <input ref={inputRef} />;
}

除此之外，還可以保存：

• 防抖 / 節流計時器

• 頁面滾動位置

• WebSocket 實例對象

🧱 TypeScript 下的 useRef（3/3）

在 TS 中使用?useRef?時，強烈推薦加類型標注！

const inputRef = useRef<HTMLInputElement>(null);
const buttonRef = useRef<HTMLButtonElement>(null);

📌 如果初始值非 null，比如數字：

const countRef = useRef(0); // 自動推斷為 number 類型

🎁 實用小表：

DOM 元素類型	對應 TS 類型
input	HTMLInputElement
button	HTMLButtonElement
div	HTMLDivElement

🧮 useMemo 是什么？（1/2）

useMemo?用來做一件事：緩存復雜計算的結果。

const memoizedValue = useMemo(() => {return expensiveCalculation(a, b);
}, [a, b]);

?? 它接受兩個參數：

1?? 一個返回值的函數 2?? 一個依賴項數組（變化才會重新執行函數）

📌 如果依賴項不變，它就會“拿緩存值”，而不是重新計算。

?? useMemo 的優點和坑點（2/2）

? 優點：

• 減少復雜計算的頻率

• 和?React.memo?配合，減少子組件重渲染

?? 使用注意：

不要濫用 useMemo 的幾種情況
簡單的計算，沒必要緩存
每次都變化的依賴項，等于沒緩存
想“預優化”而不是“真實遇到性能問題”

📌 小貼士：先量化，再優化。性能瓶頸是真實的，才需要 useMemo。

🧩 useRef vs useMemo 到底有啥不同？

來個表格對比最直觀👇

特性	useRef	useMemo
功能	存儲值 / 獲取 DOM 引用	緩存復雜計算結果
是否觸發渲染	? 不會觸發	? 自身不觸發，僅在依賴變動時重新計算
常見用途	input 聚焦、定時器 ID、外部狀態	大數組計算、過濾、排序等性能敏感操作

🧪 推薦實戰練習

👨?💻 練習 1：

用?useRef?實現一個自動聚焦的登錄框

👨?💻 練習 2：

用?useMemo?模擬一個耗時計算（比如 10000 項數據過濾）

🔍 bonus：

用 Chrome DevTools 看組件是否重新渲染，對比?useMemo?使用前后性能差異

如果你喜歡這種講解風格，歡迎關注《前端達人 · React播客書單》，我們一起用 40 天搞懂 React + TypeScript 的核心能力 💪

#React???#React播客???#前端播客???#前端達人???#TypeScript? ?