React Hooks 完全指南

基础 Hooks

useState：状态管理 useEffect：副作用处理 useContext：上下文消费

性能 Hooks

useMemo：缓存计算结果 useCallback：缓存函数 useRef：引用可变值

自定义 Hook

function useLocalStorage(key) { const [value, setValue] = useState( localStorage.getItem(key) ); return [value, setValue]; }

使用规则

• 只在顶层调用
• 只在 React 函数中
• 遵守依赖数组

常见陷阱

• 闭包陷阱
• 无限循环
• 状态更新异步

最佳实践

• 逻辑复用
• 关注点分离
• 测试友好

Hooks 让函数组件更强大！