useEffect(setup: () => void | (() => void), dependencies?: DependencyList);

() => void | (() => void)

useEffect(() => {
  // 这里是副作用逻辑 —— 相当于 "挂载" + "更新"
  console.log("副作用执行了");

  return () => {
    // 这里是清理逻辑 —— 相当于 "卸载前清理"
    console.log("清理上一次的副作用");
  };
});

dependencies?: DependencyList

// 开发环境 + StrictMode 下的执行顺序：
// 1. 组件渲染
// 2. setup 执行（第一次）
// 3. cleanup 执行（模拟卸载）
// 4. setup 执行（第二次，模拟重新挂载）
// 5. 组件正常展示

// 生产环境下的执行顺序：
// 1. 组件渲染
// 2. setup 执行（只执行一次）
// 3. 组件正常展示

import { useState, useEffect } from "react";

interface Article {
  id: number;
  title: string;
  content: string;
}

function ArticleList() {
  // 状态管理：文章列表、加载状态、错误信息
  const [articles, setArticles] = useState<Article[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    // 标记组件是否已卸载，用于避免在卸载后更新状态
    let cancelled = false;

    // 定义异步获取数据的函数
    async function fetchArticles() {
      try {
        setLoading(true);
        setError(null);

        // 发起网络请求
        const response = await fetch("/api/articles");

        // 检查响应状态
        if (!response.ok) {
          throw new Error(`请求失败，状态码：${response.status}`);
        }

        const data: Article[] = await response.json();

        // 只在组件未卸载时更新状态（避免内存泄漏警告）
        if (!cancelled) {
          setArticles(data);
        }
      } catch (err) {
        // 捕获网络异常、JSON 解析异常等
        if (!cancelled) {
          setError(err instanceof Error ? err.message : "未知错误");
        }
      } finally {
        // 无论成功或失败，都结束 loading
        if (!cancelled) {
          setLoading(false);
        }
      }
    }

    fetchArticles();

    // 清理函数：组件卸载时将 cancelled 置为 true
    return () => {
      cancelled = true;
    };
  }, []); // 空依赖数组 → 只在首次渲染后执行一次

  // 渲染逻辑：根据状态展示不同 UI
  if (loading) {
    return <div className="loading">加载中...</div>;
  }

  if (error) {
    return <div className="error">出错了：{error}</div>;
  }

  return (
    <ul className="article-list">
      {articles.map((article) => (
        <li key={article.id}>
          <h3>{article.title}</h3>
          <p>{article.content}</p>
        </li>
      ))}
    </ul>
  );
}

import { useState, useEffect } from "react";

interface Suggestion {
  id: number;
  text: string;
}

function SearchBox() {
  // 用户输入的关键词
  const [keyword, setKeyword] = useState<string>("");
  // 防抖后的关键词（真正用于请求的）
  const [debouncedKeyword, setDebouncedKeyword] = useState<string>("");
  // 联想结果
  const [suggestions, setSuggestions] = useState<Suggestion[]>([]);
  // 加载状态
  const [loading, setLoading] = useState<boolean>(false);

  // ---- 副作用 1：防抖逻辑 ----
  // 当用户输入变化时，延迟 300ms 再更新 debouncedKeyword
  useEffect(() => {
    // 如果关键词为空，立即清空联想结果
    if (keyword.trim() === "") {
      setDebouncedKeyword("");
      setSuggestions([]);
      return;
    }

    // 设置 300ms 防抖定时器
    const timer = setTimeout(() => {
      setDebouncedKeyword(keyword);
    }, 300);

    // 清理函数：用户在新 300ms 内继续输入，清除上一个定时器
    return () => {
      clearTimeout(timer);
    };
  }, [keyword]); // 依赖 keyword 变化 → 每次输入都重新执行

  // ---- 副作用 2：发起搜索请求 ----
  // 当 debouncedKeyword 变化时，向后端请求联想词
  useEffect(() => {
    // 空关键词不请求
    if (debouncedKeyword.trim() === "") {
      return;
    }

    let cancelled = false;

    async function fetchSuggestions() {
      try {
        setLoading(true);
        const response = await fetch(
          `/api/suggestions?q=${encodeURIComponent(debouncedKeyword)}`,
        );

        if (!response.ok) {
          throw new Error("请求失败");
        }

        const data: Suggestion[] = await response.json();

        if (!cancelled) {
          setSuggestions(data);
        }
      } catch (err) {
        if (!cancelled) {
          setSuggestions([]);
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    }

    fetchSuggestions();

    return () => {
      cancelled = true;
    };
  }, [debouncedKeyword]); // 依赖防抖后的关键词 → 防抖结束后才请求

  return (
    <div className="search-box">
      <input
        type="text"
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
        placeholder="请输入关键词搜索..."
      />
      {loading && <span className="loading">搜索中...</span>}
      <ul className="suggestions">
        {suggestions.map((item) => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    </div>
  );
}

import { useState, useEffect } from "react";

function WindowSizeMonitor() {
  // 存储窗口尺寸
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  // 存储最新一条 WebSocket 消息
  const [lastMessage, setLastMessage] = useState<string>("暂无消息");

  useEffect(() => {
    // ==================== 场景 A：监听窗口 resize 事件 ====================

    // 定义事件处理函数（抽成具名函数，方便后续移除）
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    // 绑定事件监听
    window.addEventListener("resize", handleResize);

    // ==================== 场景 B：订阅 WebSocket 消息 ====================

    // 创建 WebSocket 连接
    const socket = new WebSocket("wss://example.com/socket");

    // 连接建立成功的回调
    socket.onopen = () => {
      console.log("WebSocket 连接已建立");
    };

    // 收到消息的回调
    socket.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data);
        setLastMessage(data.content);
      } catch {
        setLastMessage(event.data);
      }
    };

    // 连接发生错误的回调
    socket.onerror = (error) => {
      console.error("WebSocket 错误：", error);
    };

    // ==================== 清理函数：组件卸载时执行 ====================
    return () => {
      // 移除 resize 事件监听 → 防止内存泄漏
      window.removeEventListener("resize", handleResize);

      // 关闭 WebSocket 连接 → 释放网络资源
      // readyState 检查：如果连接未关闭才调用 close()
      if (
        socket.readyState === WebSocket.OPEN ||
        socket.readyState === WebSocket.CONNECTING
      ) {
        socket.close();
        console.log("WebSocket 连接已关闭");
      }
    };
  }, []); // 空依赖数组 → setup 只在挂载时执行，cleanup 只在卸载时执行

  return (
    <div className="monitor">
      <h3>窗口尺寸监听</h3>
      <p>宽度：{windowSize.width}px</p>
      <p>高度：{windowSize.height}px</p>

      <hr />

      <h3>WebSocket 最新消息</h3>
      <p>{lastMessage}</p>

      <p className="hint">
        💡 尝试缩放浏览器窗口，观察数值变化；组件卸载后事件和连接会自动清理。
      </p>
    </div>
  );
}

import { useState, useEffect } from "react";

interface ServerStatus {
  cpu: number;
  memory: number;
  uptime: string;
}

function ServerStatusPolling() {
  const [status, setStatus] = useState<ServerStatus | null>(null);
  // 轮询间隔（单位：毫秒），默认 3000ms
  const [pollInterval, setPollInterval] = useState<number>(3000);
  const [lastUpdate, setLastUpdate] = useState<string>("");

  useEffect(() => {
    // 标记组件是否已卸载
    let cancelled = false;

    // 定义轮询函数
    async function poll() {
      try {
        const response = await fetch("/api/server-status");
        if (!response.ok) throw new Error("获取状态失败");
        const data: ServerStatus = await response.json();

        if (!cancelled) {
          setStatus(data);
          setLastUpdate(new Date().toLocaleTimeString());
        }
      } catch (err) {
        if (!cancelled) {
          console.error("轮询出错：", err);
        }
      }
    }

    // 立即执行一次拉取（避免等待第一个间隔）
    poll();

    // 启动定时轮询
    const timerId = setInterval(poll, pollInterval);

    // 清理函数：组件卸载 或 pollInterval 变化时执行
    return () => {
      cancelled = true;
      clearInterval(timerId); // 清除旧定时器，避免多个定时器叠加
      console.log(`已清除 ${pollInterval}ms 的轮询定时器`);
    };
  }, [pollInterval]); // 依赖 pollInterval → 间隔变化时重新执行整个流程

  return (
    <div className="server-monitor">
      <h3>服务器状态监控（轮询）</h3>

      {/* 间隔选择器 */}
      <div className="interval-selector">
        <span>轮询间隔：</span>
        {[1000, 3000, 5000, 10000].map((ms) => (
          <button
            key={ms}
            onClick={() => setPollInterval(ms)}
            disabled={pollInterval === ms}
            style={{
              fontWeight: pollInterval === ms ? "bold" : "normal",
              marginRight: 8,
            }}
          >
            {ms / 1000}秒
          </button>
        ))}
      </div>

      {/* 状态展示 */}
      {status ? (
        <div className="status-card">
          <p>CPU 使用率：{status.cpu}%</p>
          <p>内存使用率：{status.memory}%</p>
          <p>运行时长：{status.uptime}</p>
          <p className="update-time">最后更新：{lastUpdate}</p>
        </div>
      ) : (
        <p>正在获取服务器状态...</p>
      )}
    </div>
  );
}

          ┌──────────────┐
          │  组件渲染完成  │
          └──────┬───────┘
                 │
          ┌──────▼──────────────────────────┐
          │  依赖数组是空数组 [] ？           │
          └──┬──────────────────┬───────────┘
             │ 是               │ 否
     ┌───────▼──────┐   ┌──────▼───────────────────┐
     │ 首次渲染？    │   │ 依赖数组未传？              │
     └──┬──────┬────┘   └──┬────────────────┬───────┘
        │ 是   │ 否       │ 是              │ 否（有依赖数组）
   ┌────▼──┐ ┌─▼──┐  ┌───▼────┐     ┌──────▼──────────────┐
   │ 执行   │ │跳过 │  │ 每次执行│     │ 依赖项与上次不同？    │
   │ setup  │ │     │  │ setup  │     └──┬──────────────┬───┘
   └────────┘ └────┘  └────────┘        │ 是           │ 否
                                    ┌────▼────┐    ┌───▼──┐
                                    │ 先 cleanup│    │ 跳过  │
                                    │ 再 setup │    └──────┘
                                    └──────────┘

function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetch(`/api/users/${userId}`) // 使用了外部的 userId
      .then((res) => res.json())
      .then((data) => {
        setUser(data);
        setLoading(false);
      });
  }, []); // BUG：依赖数组为空，但内部用到了 userId

  // 问题：当 userId prop 从 "1" 变成 "2" 时，
  //       因为依赖数组是 []，useEffect 不会重新执行，
  //       页面仍然显示 userId=1 的数据
  return <div>{/* 渲染用户信息 */}</div>;
}

function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    let cancelled = false;
    setLoading(true);

    fetch(`/api/users/${userId}`)
      .then((res) => res.json())
      .then((data) => {
        if (!cancelled) {
          setUser(data);
          setLoading(false);
        }
      });

    return () => {
      cancelled = true;
    };
  }, [userId]); // ✅ 把 userId 加入依赖数组

  return <div>{/* 渲染用户信息 */}</div>;
}

import { useState, useEffect, useCallback, useMemo } from "react";

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

  // ❌ 不用 useCallback：fetchData 每次渲染都是新引用
  // 会导致下面 useEffect 每次渲染都重新执行
  // async function fetchData() { ... }

  // ✅ 用 useCallback 稳定函数引用
  const fetchData = useCallback(async () => {
    console.log("fetching...", count); // count 也需要作为 useCallback 的依赖
  }, [count]);

  useEffect(() => {
    fetchData();
  }, [fetchData]); // fetchData 引用稳定，只在 count 真正变化时才执行

  // ✅ 用 useMemo 稳定对象引用（类似原理）
  const config = useMemo(
    () => ({ pageSize: 20, sortBy: "date" }),
    [], // 如果对象内部没有响应式依赖，传空数组
  );

  useEffect(() => {
    console.log("配置更新：", config);
  }, [config]);

  return <button onClick={() => setCount((c) => c + 1)}>+1</button>;
}

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

  useEffect(() => {
    setCount(count + 1); // 修改了 count
  }, [count]); // count 是依赖 → 修改后触发重新渲染 → 再执行 useEffect → 再修改 → 死循环

  // 这会导致：
  // 渲染 → useEffect → setCount(1) → 渲染 → useEffect → setCount(2) → 渲染 → ...
  // 无限循环，页面卡死！

  return <div>{count}</div>;
}

count = 0 → 渲染 → useEffect 检测到 count = 0 → setCount(1)
→ count = 1 → 渲染 → useEffect 检测到 count 从 0 变 1 → setCount(2)
→ count = 2 → 渲染 → useEffect 检测到 count 从 1 变 2 → setCount(3)
→ ... 无穷无尽

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

  useEffect(() => {
    // ✅ 使用 setCount((prev) => prev + 1)，不依赖外部的 count
    const timer = setInterval(() => {
      setCount((prev) => prev + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, []); // ✅ 依赖数组为空，只执行一次

  return <div>{count}</div>;
}

function ConditionalUpdate() {
  const [data, setData] = useState(null);
  const [id, setId] = useState(1);

  useEffect(() => {
    async function loadData() {
      const response = await fetch(`/api/data/${id}`);
      const result = await response.json();

      // ✅ 添加条件判断：只在数据真正不同时才更新
      setData((prevData) => {
        // 如果新旧数据相同，返回旧数据避免不必要的渲染
        if (JSON.stringify(prevData) === JSON.stringify(result)) {
          return prevData;
        }
        return result;
      });
    }

    loadData();
  }, [id]); // 依赖 id，但不依赖 data → 不会循环

  return <div>{/* 渲染 */}</div>;
}

// ❌ 这是错误的！async 函数的返回值总是一个 Promise，
// 而 useEffect 期望的是 void 或 cleanup 函数，不是 Promise
useEffect(async () => {
  const response = await fetch("/api/data");
  const data = await response.json();
  setData(data);
}, []);
// React 控制台会警告：Effect callbacks are synchronous to prevent race conditions

useEffect(() => {
  // ✅ 在 setup 内部定义一个 async 函数
  async function fetchData() {
    try {
      const response = await fetch("/api/data");
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }
      const data = await response.json();
      setData(data);
    } catch (err) {
      setError(err instanceof Error ? err.message : "请求失败");
    } finally {
      setLoading(false);
    }
  }

  // ✅ 然后在 setup 内部调用它
  fetchData();

  // ✅ 清理函数可以正常返回（同步）
  return () => {
    // 清理逻辑，比如取消请求
  };
}, []);

useEffect(() => {
  const controller = new AbortController();

  async function fetchData() {
    try {
      const response = await fetch("/api/data", {
        signal: controller.signal, // 传入信号
      });
      const data = await response.json();
      setData(data);
    } catch (err) {
      // AbortError 是正常取消，不需要报错
      if (err instanceof DOMException && err.name === "AbortError") {
        return;
      }
      setError("请求失败");
    }
  }

  fetchData();

  return () => {
    controller.abort(); // 组件卸载或依赖变化时取消请求
  };
}, []);

import { useEffect } from "react";

function LeakyComponent() {
  useEffect(() => {
    // 场景：连接 WebSocket
    const socket = new WebSocket("wss://example.com/socket");
    console.log("WebSocket 连接已创建");

    socket.onmessage = (event) => {
      console.log("收到消息：", event.data);
    };

    // ❌ 没有返回清理函数！没有 socket.close()
    // React 19 开发环境会：创建连接 → 不关闭 → 再创建连接
    // 结果：两个 WebSocket 连接同时存在 → 内存泄漏！
  }, []);

  return <div>Leaky Component</div>;
}

function CleanComponent() {
  useEffect(() => {
    const socket = new WebSocket("wss://example.com/socket");
    console.log("WebSocket 连接已创建");

    socket.onmessage = (event) => {
      console.log("收到消息：", event.data);
    };

    // ✅ 提供清理函数
    return () => {
      console.log("正在关闭 WebSocket 连接");
      socket.close();
    };
  }, []);

  // React 19 开发环境下会执行：
  // 1. "WebSocket 连接已创建"
  // 2. "正在关闭 WebSocket 连接"    ← StrictMode 模拟卸载
  // 3. "WebSocket 连接已创建"      ← StrictMode 模拟重新挂载
  // 最终只有一个连接，不会泄漏！

  return <div>Clean Component</div>;
}

function Component({
  shouldFetch,
  userId,
}: {
  shouldFetch: boolean;
  userId: string;
}) {
  // ❌ 错误 1：在条件判断中调用 useEffect
  if (shouldFetch) {
    useEffect(() => {
      fetch(`/api/users/${userId}`);
    }, [userId]);
  }
  // React 规则：每次渲染时 Hooks 的调用顺序必须完全一致。
  // 当 shouldFetch 从 true 变成 false 时，这个 useEffect 不见了，
  // React 内部的 hooks 链表就会错乱。

  // ❌ 错误 2：在循环中调用 useEffect
  const items = [1, 2, 3];
  items.forEach((item) => {
    useEffect(() => {
      // 这是不允许的！
    }, [item]);
  });

  // ❌ 错误 3：在嵌套函数中调用 useEffect
  function handleClick() {
    useEffect(() => {
      // 这是不允许的！
    }, []);
  }

  return <div>...</div>;
}

第一次渲染：useState(A) → useState(B) → useEffect(C)
第二次渲染：useState(A) → (被跳过)  → useEffect(C)  ← 顺序乱了！React 无法匹配

function Component({
  shouldFetch,
  userId,
}: {
  shouldFetch: boolean;
  userId: string;
}) {
  useEffect(() => {
    // ✅ 把条件判断写在 useEffect 里面
    if (!shouldFetch) {
      return; // 不能满足条件就提前返回，但 useEffect 本身始终被调用
    }

    let cancelled = false;
    fetch(`/api/users/${userId}`)
      .then((res) => res.json())
      .then((data) => {
        if (!cancelled) {
          // 处理数据
        }
      });

    return () => {
      cancelled = true;
    };
  }, [shouldFetch, userId]); // ✅ 依赖数组包含所有相关变量

  // ✅ 对于多个独立条件，用多个 useEffect 分别处理
  useEffect(() => {
    if (userId) {
      // 处理 userId 相关的副作用
    }
  }, [userId]);

  useEffect(() => {
    if (shouldFetch) {
      // 处理 shouldFetch 相关的副作用
    }
  }, [shouldFetch]);

  return <div>...</div>;
}

const latestValue = useRef(value);
latestValue.current = value; // 始终保持最新

useEffect(() => {
  // 通过 latestValue.current 获取最新值，不会触发重执行
}, []);