React Hooks 完全指南：从 useState 到自定义 Hook

为什么使用 Hooks？

• 函数组件也能拥有状态
• 逻辑复用更简单
• 代码更简洁易读

基础 Hooks

useState

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

useEffect

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

useContext

const theme = useContext(ThemeContext);

进阶 Hooks

useReducer

适合复杂状态管理：

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

useCallback

缓存函数引用，避免子组件重复渲染：

const handleClick = useCallback(() => {
  doSomething(id);
}, [id]);

useMemo

缓存计算结果：

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

自定义 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
• 只在 React 函数中调用
• 合理设置依赖数组

Hooks 让 React 开发更加优雅高效。