React Hooks 完全指南

基础 Hooks

useState 状态管理

const [count, setCount] = useState(0);

useEffect 副作用处理

useEffect(() => {
  document.title = `Count: ${count}`;
  return () => { /* 清理函数 */ };
}, [count]);

高级 Hooks

useContext 全局状态

const theme = useContext(ThemeContext);

useReducer 复杂状态

const [state, dispatch] = useReducer(reducer, initialState);

useMemo 和 useCallback 性能优化

const memoized = useMemo(() => computeExpensive(a), [a]);
const callback = useCallback(() => doSomething(a), [a]);

自定义 Hook

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    return JSON.parse(localStorage.getItem(key)) || initialValue;
  });
  
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  
  return [value, setValue];
}

Hooks 规则

1. 只在顶层调用
2. 只在 React 函数中调用
3. 依赖数组要完整

掌握 Hooks，让函数组件更强大！