React Hooks 完全指南

Hooks 简介

Hooks 是 React 16.8 引入的新特性，让函数组件拥有状态管理能力。

基础 Hooks

useState

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

useEffect

useEffect(() => {
  document.title = `Count: ${count}`;
  return () => { console.log("cleanup"); };
}, [count]);

useContext

const theme = useContext(ThemeContext);

进阶 Hooks

useReducer

适合复杂状态管理：

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

useMemo & useCallback

性能优化利器：

const memoized = useMemo(() => compute(a, b), [a, b]);
const callback = useCallback(() => doSomething(), [deps]);

自定义 Hook

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

最佳实践

1. 只在顶层调用 Hooks
2. 只在 React 函数中调用
3. 正确设置依赖数组
4. 自定义 Hook 复用逻辑