react hooks useEffect 用法

useEffect(() => {
  // 副作用逻辑（如数据请求、事件监听、DOM操作等）
  
  return () => {
    // 清理函数（可选）：组件卸载或依赖变化前执行
  };
}, [dependencies]); // 依赖数组（可选）

useEffect(() => {
  console.log('组件挂载完成');
  // 示例：初始化数据请求
  fetchData();
}, []); // 空依赖 → 只执行一次

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

// 当 count 变化时执行
useEffect(() => {
  console.log(`count 变为: ${count}`);
  // 示例：根据 count 发送请求
  fetch(`/api/data?count=${count}`);
}, [count]); // 依赖 count → count 变化时执行

useEffect(() => {
  // 示例：添加事件监听
  const handleResize = () => console.log('窗口大小变化');
  window.addEventListener('resize', handleResize);

  // 清理函数：移除事件监听
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // 空依赖 → 组件卸载时执行清理

useEffect(() => {
  console.log('组件渲染完成（每次更新都会执行）');
}); // 无依赖 → 每次渲染后执行

const [time, setTime] = useState(0);

useEffect(() => {
  // 启动定时器
  const timer = setInterval(() => {
    setTime(prev => prev + 1);
  }, 1000);

  // 清理定时器
  return () => clearInterval(timer);
}, []); // 空依赖 → 只启动一次定时器

const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [id, setId] = useState(1);

useEffect(() => {
  // 重置加载状态
  setLoading(true);
  
  // 请求数据
  const fetchData = async () => {
    try {
      const res = await fetch(`/api/item/${id}`);
      const result = await res.json();
      setData(result);
    } catch (err) {
      console.error('请求失败:', err);
    } finally {
      setLoading(false);
    }
  };

  fetchData();

  // 清理函数：若 id 变化，取消当前请求（需配合 AbortController）
  const controller = new AbortController();
  return () => controller.abort();
}, [id]); // 依赖 id → id 变化时重新请求

   // 错误示例：依赖了 count 却未加入依赖数组
   useEffect(() => {
     console.log(count); // 可能输出旧值
   }, []); // 遗漏了 count 依赖

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

   // 危险：修改了依赖变量 count，会导致无限循环
   useEffect(() => {
     setCount(prev => prev + 1);
   }, [count]);