高效管理 React 狀態和交互：自定義 Hooks 實踐

在 React 中，Hooks 是一種使我們能夠在函數組件中使用狀態和副作用的強大工具。隨著項目的增大，重復的邏輯可能會出現在多個組件中，這時使用自定義 Hooks 就非常合適。它們幫助我們將業務邏輯抽象成獨立的功能模塊，提升代碼的可復用性和可維護性。

本文將介紹一些常見的自定義 Hook 實踐，包括數據獲取、去抖、狀態切換、本地存儲管理和點擊外部區域關閉組件等。通過這些自定義 Hook，我們能夠高效管理應用的狀態和交互邏輯。

1. useFetch - 數據獲取 Hook

useFetch 是一個處理數據獲取請求的自定義 Hook。它封裝了 fetch 請求的邏輯，并提供了 loading 和 error 狀態，方便組件根據請求狀態渲染不同的內容。

代碼實現

import { useState, useEffect } from "react";function useFetch<T>(url: string) {const [data, setData] = useState<T | null>(null);const [loading, setLoading] = useState(true);const [error, setError] = useState<Error | null>(null);useEffect(() => {const fetchData = async () => {setLoading(true);try {const response = await fetch(url);if (!response.ok) throw new Error("Network response was not ok");const result = await response.json();setData(result);} catch (err) {setError(err as Error);} finally {setLoading(false);}};fetchData();}, [url]);return { data, loading, error };
}export default useFetch;

使用示例

const { data, loading, error } = useFetch<User[]>('/api/users');if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;return <ul>{data?.map(user => <li key={user.id}>{user.name}</li>)}</ul>;

在上述實現中，useFetch Hook 提供了一個簡潔的方式來處理 API 請求，同時通過 loading 和 error 狀態來管理加載中的 UI 和錯誤展示。它封裝了所有的異步邏輯，避免了在每個組件中重復寫 fetch 請求。

2. useDebounce - 防抖處理

防抖用于避免在用戶輸入時頻繁觸發事件，尤其是在搜索框、自動完成等場景中。useDebounce 實現了延遲值的更新，直到用戶停止輸入一段時間后才觸發。

代碼實現

import { useState, useEffect } from "react";function useDebounce<T>(value: T, delay: number): T {const [debouncedValue, setDebouncedValue] = useState(value);useEffect(() => {const handler = setTimeout(() => setDebouncedValue(value), delay);return () => clearTimeout(handler);}, [value, delay]);return debouncedValue;
}export default useDebounce;

使用示例

const [searchTerm, setSearchTerm] = useState("");
const debouncedSearchTerm = useDebounce(searchTerm, 500);useEffect(() => {// 發起 API 請求或執行其他操作console.log(debouncedSearchTerm);
}, [debouncedSearchTerm]);

在上述例子中，useDebounce 延遲了對輸入值的響應，從而避免了在用戶每次輸入時都發起請求。它的使用非常適合搜索框和過濾功能，能夠提高性能。

3. useToggle - 簡化狀態切換

useToggle 是一個簡化布爾值狀態切換的 Hook，適用于需要頻繁切換狀態的場景，如顯示/隱藏彈窗、展開/收起菜單等。

代碼實現

import { useState } from "react";function useToggle(initialState = false) {const [state, setState] = useState(initialState);const toggle = () => setState(prev => !prev);return [state, toggle] as const;
}export default useToggle;

使用示例

const [isOpen, toggle] = useToggle(false);return (<div><button onClick={toggle}>Toggle</button>{isOpen && <p>Content is visible!</p>}</div>
);

useToggle 可以非常簡潔地處理布爾類型狀態的切換，避免在組件中寫冗余的 setState 代碼。

4. useLocalStorage - 本地存儲管理

useLocalStorage 是一個與 localStorage 配合的 Hook，它能夠自動處理數據的獲取、存儲和更新，確保數據在頁面刷新后仍然保持。

代碼實現

import { useState } from "react";function useLocalStorage<T>(key: string, initialValue: T) {const [storedValue, setStoredValue] = useState<T>(() => {try {const item = window.localStorage.getItem(key);return item ? JSON.parse(item) : initialValue;} catch (error) {console.error(error);return initialValue;}});const setValue = (value: T) => {try {setStoredValue(value);window.localStorage.setItem(key, JSON.stringify(value));} catch (error) {console.error(error);}};return [storedValue, setValue] as const;
}export default useLocalStorage;

使用示例

const [name, setName] = useLocalStorage("name", "John Doe");return (<div><p>Your name is: {name}</p><button onClick={() => setName("Jane Doe")}>Change Name</button></div>
);

通過 useLocalStorage，我們不僅能夠輕松地獲取和設置 localStorage 中的數據，還能在刷新頁面后保持數據狀態，適用于保存用戶設置、主題等信息。

5. useClickOutside - 外部點擊監聽

useClickOutside 是一個幫助我們監聽用戶點擊外部區域的 Hook，常用于實現點擊外部區域關閉彈窗、菜單等交互功能。

代碼實現

import { useEffect, useRef } from "react";function useClickOutside(handler: () => void) {const ref = useRef<HTMLDivElement>(null);useEffect(() => {const handleClickOutside = (event: MouseEvent) => {if (ref.current && !ref.current.contains(event.target as Node)) {handler();}};document.addEventListener('mousedown', handleClickOutside);return () => document.removeEventListener('mousedown', handleClickOutside);}, [handler]);return ref;
}export default useClickOutside;

使用示例

const [isOpen, setIsOpen] = useState(false);
const closeDropdown = () => setIsOpen(false);
const dropdownRef = useClickOutside(closeDropdown);return (<div><button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>{isOpen && (<div ref={dropdownRef} style={{ border: '1px solid black', padding: '10px' }}><p>Dropdown content</p></div>)}</div>
);

useClickOutside 使得我們能夠簡化對點擊外部區域的監聽邏輯，減少了冗余代碼，提高了交互體驗。

總結

自定義 Hook 是 React 開發中非常強大的工具，可以幫助我們復用邏輯，減少冗余代碼，提升組件的可維護性和可讀性。通過本文介紹的幾個常見自定義 Hook（如 useFetch、useDebounce、useToggle、useLocalStorage 和 useClickOutside），我們可以輕松應對許多常見的開發需求，提高應用的性能和用戶體驗。

希望通過這些實用的自定義 Hook，你能夠更高效地管理 React 中的狀態和交互邏輯，打造更優雅的代碼結構！