React Hooks 最佳实践与常见陷阱

Hooks 让函数组件具备状态和副作用能力，但使用不当容易引发 bug。本文总结常见实践与避坑指南。

一、useState 使用要点

1. 函数式更新

依赖前一次状态时，使用函数形式：

setCount((prev) => prev + 1);

2. 复杂状态考虑 useReducer

状态逻辑复杂、多子状态联动时，useReducer 更清晰。

二、useEffect 依赖与清理

1. 依赖数组要完整

useEffect(() => {
  fetchData(userId);
}, [userId]); // 用到的变量都要列入

缺少依赖可能导致闭包拿到旧值。

2. 清理副作用

useEffect(() => {
  const timer = setInterval(() => {}, 1000);
  return () => clearInterval(timer);
}, []);

订阅、定时器、事件监听等务必在 return 中清理。

三、useCallback 与 useMemo

何时使用

• useCallback：将函数引用传给依赖引用相等的子组件或 useEffect 时
• useMemo：昂贵计算需要缓存时

避免过度优化

简单计算、普通函数不必包一层，否则反而增加心智负担。

四、自定义 Hooks 封装

将可复用逻辑抽成自定义 Hook：

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);
  return debouncedValue;
}

五、常见陷阱

1. 条件调用 Hooks：Hooks 必须在组件顶层调用，不可放在条件、循环中
2. 闭包陈旧：useEffect 内使用 state 时，依赖数组要包含该 state
3. 对象依赖：依赖对象时注意引用变化，必要时用 useMemo 稳定引用

掌握这些要点，能写出更稳定、可维护的 React 代码。