02-Hooks完全指南——12-Hooks 最佳实践总结

Hooks 最佳实践总结

一、Hooks 设计原则

1.1 单一职责

每个 Hook 应该只做一件事：

// ❌ 不好的设计：一个 Hook 做太多事 function useUserAndPosts(userId) { const [user, setUser] = useState(null); const [posts, setPosts] = useState([]); // ... return { user, posts }; } // ✅ 好的设计：拆分为两个 Hook function useUser(userId) { ... } function usePosts(userId) { ... } // 在组件中组合 const user = useUser(userId); const posts = usePosts(userId);

1.2 可组合性

// 自定义 Hook 可以组合其他 Hooks function useUserProfile(userId) { const user = useUser(userId); const posts = usePosts(userId); const isOnline = useOnlineStatus(userId); return { user, posts, isOnline }; }

1.3 可测试性

// 独立的 Hook 更容易测试 function useCounter(initial = 0) { const [count, setCount] = useState(initial); const increment = useCallback(() => setCount(prev => prev + 1), []); const decrement = useCallback(() => setCount(prev => prev - 1), []); const reset = useCallback(() => setCount(initial), [initial]); return { count, increment, decrement, reset }; } // 测试 it('should increment counter', () => { const { result } = renderHook(() => useCounter(0)); act(() => result.current.increment()); expect(result.current.count).toBe(1); });

二、Hook 选择指南

2.1 状态管理选择

2.2 副作用处理

2.3 性能优化选择

三、项目结构建议

3.1 文件夹组织

src/ ├── hooks/ │ ├── index.js # 导出所有 hooks │ ├── useAuth.js # 认证相关 │ ├── useFetch.js # 数据获取 │ ├── useLocalStorage.js # 本地存储 │ └── useDebounce.js # 防抖 ├── components/ │ ├── UserProfile/ │ │ ├── UserProfile.js │ │ ├── useUserData.js # 组件专用 Hook │ │ └── UserProfile.css │ └── ... └── ...

3.2 通用 Hooks 库

// hooks/index.js export { useAuth } from './useAuth'; export { useFetch } from './useFetch'; export { useLocalStorage } from './useLocalStorage'; export { useDebounce } from './useDebounce'; export { useToggle } from './useToggle'; export { usePrevious } from './usePrevious';

四、性能优化策略

4.1 减少不必要的渲染

// 1. 使用 React.memo 包裹组件 const TodoItem = React.memo(({ todo, onToggle }) => { return <li onClick={() => onToggle(todo.id)}>{todo.text}</li>; }); // 2. 使用 useCallback 稳定回调 const handleToggle = useCallback((id) => { setTodos(prev => prev.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo )); }, []); // 3. 使用 useMemo 缓存计算结果 const completedCount = useMemo(() => { return todos.filter(todo => todo.completed).length; }, [todos]);

4.2 懒加载和代码分割

const HeavyComponent = lazy(() => import('./HeavyComponent')); function App() { const [show, setShow] = useState(false); return ( <div> <button onClick={() => setShow(true)}>加载</button> {show && ( <Suspense fallback={<div>加载中...</div>}> <HeavyComponent /> </Suspense> )} </div> ); }

五、代码质量

5.1 TypeScript 支持

// 带类型的自定义 Hook function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((prev: T) => T)) => void] { const [storedValue, setStoredValue] = useState<T>(() => { try { const item = localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch { return initialValue; } }); const setValue = useCallback((value: T | ((prev: T) => T)) => { try { const valueToStore = value instanceof Function ? value(storedValue) : value; setStoredValue(valueToStore); localStorage.setItem(key, JSON.stringify(valueToStore)); } catch (error) { console.error(error); } }, [key, storedValue]); return [storedValue, setValue]; }

5.2 错误处理

function useFetch(url) { const [data, setData] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { let isMounted = true; const fetchData = async () => { try { setLoading(true); const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP ${response.status}`); } const result = await response.json(); if (isMounted) { setData(result); setError(null); } } catch (err) { if (isMounted) { setError(err.message); } } finally { if (isMounted) { setLoading(false); } } }; fetchData(); return () => { isMounted = false; }; }, [url]); return { data, error, loading }; }

六、团队协作规范

6.1 命名规范

// ✅ 好的命名 useLocalStorage // 清晰表达用途 useUserData // 返回用户数据 useToggle // 返回切换函数 // ❌ 不好的命名 useStuff // 太模糊 getData // 不以 use 开头 use1 // 无意义

6.2 文档注释

/** * 获取用户数据的自定义 Hook * @param {string} userId - 用户 ID * @param {Object} options - 配置选项 * @param {boolean} options.autoFetch - 是否自动获取 * @returns {Object} { user, loading, error, refetch } */ function useUser(userId, options = { autoFetch: true }) { // ... }

6.3 Code Review 检查点

• 是否遵守 Hooks 规则
• 依赖数组是否正确
• 是否有内存泄漏风险
• 是否过度使用 useMemo/useCallback
• 是否有无限循环风险

七、常见模式总结

7.1 状态模式

// 单个状态 const [count, setCount] = useState(0); // 多个相关状态 const [form, setForm] = useState({ name: '', email: '' }); // 复杂状态 const [state, dispatch] = useReducer(reducer, initialState);

7.2 副作用模式

// 挂载时执行 useEffect(() => { doSomething(); }, []); // 依赖变化时执行 useEffect(() => { doSomething(dep); }, [dep]); // 需要清理 useEffect(() => { const subscription = subscribe(); return () => subscription.unsubscribe(); }, []);

7.3 性能优化模式

// 缓存计算 const result = useMemo(() => expensive(a, b), [a, b]); // 缓存函数 const handler = useCallback(() => doSomething(a), [a]); // 记忆化组件 const MemoChild = React.memo(Child);

八、快速参考卡

九、小结

核心要点：

• Hooks 是现代 React 的核心
• 合理选择和使用 Hooks
• 注重代码质量和性能
• 建立团队最佳实践