[TOC] ## 自定義 hook 創建自定義 Hook 的幾個重要原則： * 命名規則：必須以 "use" 開頭 * 組合性：可以在自定義 Hook中使用其他的 Hook * 狀態隔離：每個組件調用同一個Hook 時會獲得獨立的狀態 * 參數傳遞：可以接收參數來自定義行為 * 返回值靈活：可以返回任何值（對象、數組等） ## 示例 ### 自增示例 ``` import { useState, useCallback } from 'react'; interface UseCounterProps { initialValue?: number; step?: number; } const useCounter = ({ initialValue = 0, step = 1 }: UseCounterProps = {}) => { const [count, setCount] = useState(initialValue); const increment = useCallback(() => { setCount(prev => prev + step); }, [step]); const decrement = useCallback(() => { setCount(prev => prev - step); }, [step]); const reset = useCallback(() => { setCount(initialValue); }, [initialValue]); return { count, increment, decrement, reset }; }; export default useCounter; ``` > useCallback 主要用于性能優化，它可以緩存函數引用，避免在組件重新渲染時重復創建函數。 使用 ``` import useCounter from '../hooks/useCounter'; const Counter = () => { const { count, increment, decrement, reset } = useCounter({ initialValue: 0, step: 2 }); return ( <div> <p>當前計數：{count}</p> <button onClick={increment}>增加</button> <button onClick={decrement}>減少</button> <button onClick={reset}>重置</button> </div> ); }; ``` ### 封裝localStorage ``` import { useState, useEffect } from 'react'; const 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) { return initialValue; } }); // 監聽變化并更新 localStorage useEffect(() => { try { window.localStorage.setItem(key, JSON.stringify(storedValue)); } catch (error) { console.error(error); } }, [key, storedValue]); return [storedValue, setStoredValue] as const; }; export default useLocalStorage; ``` ### hook 使用擴展函數 useFormInput.js ``` import { useState } from 'react'; export function useFormInput(initialValue) { const [value, setValue] = useState(initialValue); function handleChange(e) { setValue(e.target.value); } const inputProps = { value: value, onChange: handleChange }; return inputProps; } ``` 使用 ``` import { useFormInput } from './useFormInput.js'; export default function Form() { const firstNameProps = useFormInput('Mary'); const lastNameProps = useFormInput('Poppins'); return ( <> <label> First name: <input {...firstNameProps} /> </label> <label> Last name: <input {...lastNameProps} /> </label> <p><b>Good morning, {firstNameProps.value} {lastNameProps.value}.</b></p> </> ); } ```