【React Hooks】封裝的藝術：如何編寫高質量的 React 自-定義 Hooks

所屬專欄： 《前端小技巧集合：讓你的代碼更優雅高效》
上一篇： 【React State】告別 useState 濫用：何時應該選擇 useReducer
作者： 碼力無邊

? 引言：你的組件里，是否藏著一個“代碼克隆人”？

嘿，各位在 React 世界里追求代碼之美的道友們，我是碼力無邊！

隨著我們對 useState、useEffect、useReducer 等基礎 Hooks 的運用日漸純熟，我們的組件功能也變得越來越強大。但與此同時，一個新的“心魔”開始悄然滋生——重復的邏輯。

請審視一下你寫的組件，是否也曾遇到過這樣的場景：

組件 A：需要從 localStorage 讀取一個值，并在用戶修改時寫回。
組件 B：也需要從 localStorage 讀取另一個值，并在用戶修改時寫回。
于是你把那段包含 useState 和 useEffect 的邏輯，在 A 和 B 中復制粘貼了一遍。

又或者：

組件 C：需要監聽窗口的寬度變化，以實現響應式布局。
組件 D：也需要監聽窗口的寬度，來決定顯示不同的內容。
于是你又把那段包含 useState 和 useEffect 來綁定 resize 事件的邏輯，在 C 和 D 中又復制粘貼了一遍。

這種“代碼克隆”的行為，就像在你的項目中制造了一堆長得一模一樣的“克隆人”。他們分散在各個角落，一旦你需要修改他們的行為邏輯（比如，給 localStorage 加上異常處理），你就必須找到所有的“克隆人”，逐一進行修改，極其繁瑣且容易遺漏，是 bug 的溫床。

在 Class Component 時代，我們用高階組件 (HOC) 和渲染屬性 (Render Props) 這些模式來解決邏輯復用問題。它們很強大，但也帶來了“包裝地獄 (Wrapper Hell)”和代碼可讀性下降等問題。

而 Hooks 的出現，為我們帶來了一種更優雅、更直觀、更強大的邏輯復用范式——自定義 Hooks (Custom Hooks)。

自定義 Hook 不是什么新奇的魔法，它就是一個普通的 JavaScript 函數，其名稱以 use 開頭，函數內部可以調用其他的 Hooks (如 useState, useEffect 等)。它的出現，讓我們能夠將組件的狀態邏輯從 UI 中抽離出來，變成一個獨立的、可復用的單元。

今天，碼力無邊就將帶你進入 Hooks 的封裝藝術殿-堂，手把手教你如何編寫高質量的自定義 Hooks，將你項目中的那些“代碼克隆人”徹底消滅，讓你的代碼庫變得干凈、優雅、且充滿“智慧”。

一、自定義 Hook 的“開光儀式”：命名與規則

在開始創造之前，我們必須先了解自定義 Hook 的兩條“天規”：

名稱必須以 use 開頭：比如 useLocalStorage, useWindowSize。這不是一個隨意的約定，而是 React Linter 用來檢查 Hooks 規則（比如，不能在條件語句中調用 Hooks）的重要依據。不遵守這個規則，React 就無法判斷你的函數是否是一個 Hook。
只能在 React 函數組件或其他的自定義 Hook 中調用：你不能在普通的 JavaScript 函數（非組件或非 Hook）中調用它。

好了，“開光儀式”結束，讓我們開始創造第一個屬于自己的 Hook！

二、實戰一：打造你的“本地存儲神器”——`useLocalStorage`

這是最經典、最實用的自定義 Hook 之一。

需求： 創建一個 Hook，它的用法和 useState 幾乎一樣，但它能自動將狀態持久化到 localStorage 中。

第一步：識別重復邏輯
在沒有自定義 Hook 之前，我們的組件可能是這樣寫的：

function UserProfile() {const [name, setName] = useState(() => {// 從 localStorage 初始化 stateconst savedName = window.localStorage.getItem('username');return savedName || 'Guest';});// 當 name 變化時，同步到 localStorageuseEffect(() => {window.localStorage.setItem('username', name);}, [name]);// ... render logic
}

這段“從 localStorage 初始化，并用 useEffect 同步回去”的邏輯，就是我們要抽離的“重復基因”。

第二步：創建自定義 Hook
我們來創建一個 useLocalStorage.js 文件：

import { useState, useEffect } from 'react';function useLocalStorage(key, initialValue) {// 1. 創建一個 state，其初始化邏輯和之前組件里的一樣const [storedValue, setStoredValue] = useState(() => {try {const item = window.localStorage.getItem(key);// 如果 localStorage 中有值，就用它；否則，用初始值return item ? JSON.parse(item) : initialValue;} catch (error) {// 如果解析出錯，也返回初始值console.error(error);return initialValue;}});// 2. 使用 useEffect 來監聽 storedValue 的變化useEffect(() => {try {// 當 storedValue 變化時，將其序列化并存入 localStoragewindow.localStorage.setItem(key, JSON.stringify(storedValue));} catch (error) {console.error(error);}}, [key, storedValue]); // 依賴項是 key 和 value// 3. 返回一個和 useState 簽名一樣的數組return [storedValue, setStoredValue];
}export default useLocalStorage;

第三步：在組件中使用
現在，我們的組件可以變得極其簡潔：

import useLocalStorage from './useLocalStorage';function UserProfile() {// 一行代碼，搞定狀態和持久化！const [name, setName] = useLocalStorage('username', 'Guest');return (<div><input type="text" value={name} onChange={e => setName(e.target.value)} /><p>Hello, {name}!</p></div>);
}function ThemeSwitcher() {// 在另一個組件中復用！const [theme, setTheme] = useLocalStorage('theme', 'light');return (<div className={theme}><button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Switch to {theme === 'light' ? 'dark' : 'light'} mode</button></div>);
}

看到了嗎？ 我們成功地將狀態管理的復雜邏輯（初始化、try...catch、useEffect 同步）封裝進了 useLocalStorage 這個黑盒子里。組件的使用者，只需要像使用 useState 一樣，簡單地調用它，就能獲得“狀態 + 持久化”的超能力。這就是自定義 Hook 的魔力！

三、實戰二：你的“響應式布局之眼”——`useWindowSize`

需求： 創建一個 Hook，實時返回當前瀏覽器窗口的寬度和高度。

第一步：識別重復邏輯
獲取窗口尺寸的邏輯通常是：

用 useState 存儲 width 和 height。
用 useEffect 在組件掛載時綁定 window.resize 事件監聽。
在事件處理函數中，用 setState 更新尺寸。
非常重要：在 useEffect 的清理函數中，移除事件監聽，防止內存泄漏。

第二步：創建自定義 Hook
我們來創建一個 useWindowSize.js 文件：

import { useState, useEffect } from 'react';function useWindowSize() {const [windowSize, setWindowSize] = useState({width: undefined,height: undefined,});useEffect(() => {// 1. 定義事件處理函數function handleResize() {setWindowSize({width: window.innerWidth,height: window.innerHeight,});}// 2. 添加事件監聽window.addEventListener('resize', handleResize);// 3. 首次調用，以獲取初始尺寸handleResize();// 4. 返回一個清理函數，在組件卸載時移除監聽return () => window.removeEventListener('resize', handleResize);}, []); // 空依賴數組，確保 effect 只在掛載和卸載時運行return windowSize;
}export default useWindowSize;

第三步：在組件中使用

import useWindowSize from './useWindowSize';function ResponsiveComponent() {// 一行代碼，獲得響應式的窗口尺寸！const { width, height } = useWindowSize();if (width < 768) {return <div>我是移動端布局</div>;}return (<div><h1>我是桌面端布局</h1><p>當前窗口尺寸: {width} x {height}</p></div>);
}

這個 Hook 將所有關于事件監聽、狀態更新和內存清理的底層細節都封裝了起來，讓組件可以專注于如何使用這些數據，而不是如何獲取它們。這完美體現了“關注點分離”的原則。

四、編寫高質量自定義 Hook 的“心法”

一個好的自定義 Hook，應該像 React 內置的 Hook 一樣，具備良好的設計和DX (開發者體驗)。

明確的輸入和輸出：
- 輸入 (參數): 參數應該清晰明了，就像 useLocalStorage 的 key 和 initialValue。
- 輸出 (返回值): 返回值的設計很重要。
  - 如果你的 Hook 像 useState 一樣，返回一個狀態值和一個更新函數，那么返回一個數組 [value, setValue] 是一個很好的約定，因為它允許調用者自由命名。
  - 如果你的 Hook 返回多個獨立的值（比如 useWindowSize 的 width 和 height），那么返回一個對象 { width, height } 更具可讀性，并且未來更容易擴展（增加新返回值而不會破壞現有用法）。
保持純粹和可預測：
- Hook 內部的邏輯應該主要圍繞著 React 的狀態和生命周期。避免在 Hook 內部執行一些不可預測的、與組件狀態無關的副作用。
- 遵循 Hooks 的規則，不要在循環或條件中調用其他 Hooks。
通用性和可配置性：
- 設計 Hook 時，思考它是否能被用在更多場景。比如，我們的 useLocalStorage 就可以處理任何可序列化的數據，而不僅限于字符串。
- 適時地提供配置選項作為參數，讓 Hook 更靈活。
自給自足，不暴露實現細節：
- 一個好的 Hook 應該是一個“黑盒子”。它管理自己的所有內部狀態和副作用（比如事件監聽的清理）。調用者無需關心其內部實現。

寫在最后：自定義 Hook 是你的“超能力工廠”

自定義 Hooks 是 React 賦予我們開發者的一項“超能力”。它讓我們能夠超越組件的界限，去創造、組合和分享我們自己的“狀態邏輯積木”。

當你下一次在不同的組件間復制粘貼一段 useState + useEffect 的代碼時，請停下來。這正是你創造一個新 Hook 的信號！

將重復的邏輯封裝成一個自定義 Hook，就像是建立了一座“超能力工廠”。從此以后，任何組件想要獲得這項“超能力”，只需要去工廠里“領取”(import) 一下即可。你的代碼庫將因此變得更加模塊化、可維護性更高，你的開發效率也會得到質的飛躍。

這，就是封裝的藝術，也是 React Hooks 設計哲學的精髓所在。

專欄預告與互動：

我們已經學會了封裝可復用的邏輯。但在大型應用中，我們還需要在組件樹的“遠房親戚”之間共享狀態。一層層地 props drilling (屬性鉆孔) 顯然不是個好主意。

下一篇，我們將深入探討 React 的官方“跨層傳功”解決方案——Context API。你將學習如何使用它來避免 props drilling，并探討一個經典問題：Context API 是性能殺手嗎？我們又該如何正確地優化它？

感覺碼力無邊的“封裝藝術”讓你對 Hooks 有了全新的認識？別忘了點贊、收藏、關注，你的每一次支持，都是我建造下一座“超能力工廠”的圖紙和動力！

今日挑戰： 我們可以結合之前學過的知識，創造一個 useDebounce Hook 嗎？這個 Hook 接收一個值和一個延遲時間，返回一個經過防抖處理后的值。把你的實現思路或代碼片段分享在評論區，讓我們一起打造這個非常實用的 Hook！