React Hooks 深度解析

useEffect 基础

useEffect(() => {
  // 副作用逻辑
  return () => {
    // 清理函数
  };
}, [dependencies]);

常见陷阱

1. 遗漏依赖

// ❌ 错误
useEffect(() => {
  fetchData(userId);
}, []); // userId 变化不会重新请求

// ✅ 正确
useEffect(() => {
  fetchData(userId);
}, [userId]);

2. 对象引用陷阱

// ❌ 每次渲染都触发
useEffect(() => {
  doSomething(config);
}, [config]); // config 是新对象

// ✅ 使用 useMemo
const config = useMemo(() => ({ key: value }), [value]);

3. 无限循环

// ❌ 死循环
useEffect(() => {
  setState(count + 1);
}, [count]);

最佳实践

自定义 Hooks

function useFetch(url) {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch(url).then(setData);
  }, [url]);
  
  return data;
}

依赖数组规则

• 包含所有使用的响应式值
• 使用 ESLint 插件检查
• 必要时使用函数式更新

理解 Hooks 规则能避免 90% 的 React bug。