useEffect Hook 用法

已完成

React useEffect Hook 用于处理副作用，如数据获取、订阅、手动 DOM 操作等

难度：初级

预计时间：15分钟

Next.js

React

SEO

性能

核心特性：

构建时生成 HTML

性能最佳，CDN 缓存

SEO 完美

无服务器开销

返回 React 实验列表返回首页

🔄 useEffect Hook 实战示例

useEffect 用于处理副作用操作，如数据获取、订阅、定时器等

示例 1: 基础数据获取

useEffect(() => {}, [])

组件挂载时获取用户数据（空依赖数组 []）

示例 2: 定时器与清理函数

Cleanup Function

使用 useEffect 创建定时器，并在组件卸载时清理

0

当前计数

示例 3: 依赖数组监听变化

useEffect(() => {}, [userId])

当用户 ID 变化时，重新获取对应用户的数据

选择用户 ID:

获取次数: 0

📝 useEffect 基本语法

// 1️⃣ Basic Usage - Run only on mount
  useEffect(() => {
    fetchData();
  }, []); // Empty array = Run once only

  // 2️⃣ With Cleanup Function - Timer/Subscription
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);

    // 🧹 Cleanup function
    return () => clearInterval(timer);
  }, []);

  // 3️⃣ Watch Dependency Changes
  useEffect(() => {
    fetchUser(userId);
  }, [userId]); // Re-run when userId changes

  // 4️⃣ Async Operations (Recommended Approach)
  useEffect(() => {
    const fetchData = async () => {
      const result = await api.getData();
      setData(result);
    };
    fetchData();
  }, []);

🔑 关键要点

空依赖数组 [] = 仅在组件挂载时执行一次（类似 componentDidMount）
有依赖 [userId] = 依赖变化时重新执行
无依赖数组 = 每次渲染都执行（谨慎使用！）
返回清理函数 = 组件卸载或依赖变化前执行（类似 componentWillUnmount）
异步操作需要在 useEffect 内部定义 async 函数

⚠️ 常见陷阱

忘记清理定时器/订阅 → 内存泄漏
缺少必要的依赖 → 使用过期的状态
依赖数组包含对象/数组 → 无限循环
在 useEffect 中直接使用 async → 不推荐