『译』React useEffect：早知道这些调试技巧就好了

原文：Advanced React useEffect: Essential Debugging Techniques I Wish I Knew Earlier

作者：Blueprintblog

小声BB

本文在翻译过程中确保意思传达准确的前提下，会加入很多本人的个人解释和一些知识补充(使用引用块或者括号标注) ，像这样

我是一个平平无奇的知识补充块

🎊如果觉得文章内容有用，交个朋友，点个赞再走~ 🎊

为什么看这个文章

如果你觉得自己在写 useEffect 的时候，还是思路不清晰，不知道怎么正确的添加依赖项，不清楚 return 中需要做什么，又或者还被一些"闭包陷阱" 困扰，这篇文章会给你答案。

正文

那些彻底改变我 React 开发方式的解决问题模式

让我猜猜。

你可能已经写过无数次的 useEffect，但有时它仍然像黑魔法（阿瓦达啃大瓜（狗头））一样难以掌握。

组件会无限次重新渲染，API 调用触发了两次，事件监听器像一团乱麻。

是不是很熟悉？

我在学习 React 的前 6 个月里，一直以为是 useEffect 本身有问题 。结果发现，我只是缺少了一个让一切豁然开朗的核心思维模式。

今天，我会分享我在解决数百个 useEffect 问题时总结出的关键见解和调试技巧。这些思维模式，最终让我真正搞懂了 useEffect。

改变我调试思路的思维模式

以下这个思维转换解决了我 90% 的 useEffect 问题：

别再把它当作生命周期（lifecycle）的平替，而要把它当作同步（synchronization）机制。

scss 复制代码

// ❌ 不要这样想："组件挂载时获取数据"
// ✅ 要这样想："让数据始终和 userId 保持同步"

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

这种思维转变会改变一切。

你不再是管理挂载与卸载，而是确保组件和外部状态保持同步。

模式 #1：同步模式（The Synchronization Pattern）

最常见的 useEffect 用法：

scss 复制代码

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

  useEffect(() => {
    // 开始同步
    setLoading(true);

    fetchUser(userId)
      .then(userData => {
        setUser(userData);
        setLoading(false);
      });
  }, [userId]); // 每当 userId 改变时重新同步

  if (loading) return <div>Loading...</div>;
  return <div>{user.name}</div>;
}

这里发生了什么：

组件以初始状态渲染
useEffect 在渲染后运行
当 userId 改变时，effect 会重新运行
组件始终和外部数据保持同步

模式 #2：清理模式（The Cleanup Pattern）

大多数开发者最容易在这里变得混乱。

javascript 复制代码

function ChatRoom({ roomId }) {
  useEffect(() => {
    // 初始化
    const socket = new WebSocket(`ws://chat-server/${roomId}`);

    socket.onmessage = (event) => {
      console.log('Received:', event.data);
    };

    // 清理函数
    return () => {
      socket.close();
    };
  }, [roomId]);

  return <div>Connected to {roomId}</div>;
}

清理的生命周期：

组件挂载 → effect 运行 → WebSocket 打开
roomId 改变 → 先运行清理函数（关闭旧 socket） → 再运行 effect → 打开新 WebSocket
组件卸载 → 清理函数运行 → WebSocket 关闭

关键点： * 清理函数不仅在卸载时运行，还会在 effect 每次重新运行之前先执行一次*。

可以自己试着写一个 demo，观察 useEffect 的 return 语句的执行时机。有时如果 Effect 的逻辑中是在特定条件下才给某个变量赋值，那么在 return 语句中一定要先对该变量做判空再调用，否则会报错。

模式 #3：订阅模式（The Subscription Pattern）

典型场景：事件监听与订阅。

javascript 复制代码

function WindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWidth(window.innerWidth);
    };

    // 订阅
    window.addEventListener('resize', handleResize);

    // 取消订阅
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // 空依赖数组 → 只运行一次

  return <div>Window width: {width}px</div>;
}

为什么要用空依赖数组？

因为我们只需要在组件挂载时设置一次监听器，并在卸载时清理，不依赖任何 props 或 state。

依赖数组深度解析（The Dependency Array Deep Dive）

90% 的 useEffect bug 都来自这里。

scss 复制代码

// ❌ 缺少依赖 ------ 会使用过期闭包变量数据
function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      console.log(count); // 永远打印 0！
    }, 1000);

    return () => clearInterval(timer);
  }, []); // 缺少 count 依赖

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

修复方法 ------ 包含所有依赖：

scss 复制代码

// ✅ 正确依赖
useEffect(() => {
  const timer = setInterval(() => {
    console.log(count); // 打印当前 count
  }, 1000);

  return () => clearInterval(timer);
}, [count]); // 在依赖里包含 count

更好的解决方案 ------ 函数式更新：

scss 复制代码

// ✅ 最佳方案 ------ 无外部依赖
useEffect(() => {
  const timer = setInterval(() => {
    setCount(c => c + 1); // 函数式更新
  }, 1000);

  return () => clearInterval(timer);
}, []); // 不需要依赖

为什么函数式更新可以躲掉这个依赖陷阱？

因为 React 返回的 setState 本质上是一个 调度更新的函数 ，内部是通过 dispatchSetState 来实现的。这里的 action 就是你传给 setState 的东西，可能是一个值，也可能是一个函数。在 render 阶段，React 会执行更新队列，取出 action：
ini 复制代码
if (typeof action === 'function') {
  // ✅ 函数式更新：React 会调用 action(currentState)
  const updater = action;
  newState = updater(prevState);
} else {
  // 普通值更新
  newState = action;
}
如果你传的是函数，React 会在 应用更新队列时 把当前最新的 state 作为 prevState 传进去。

常见错误 #1：无限循环

scss 复制代码

// ❌ 会导致无限循环
function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers().then(setUsers);
  }, [users]); // users 改变 → effect 运行 → users 改变 → ...
  
  return <div>{users.length} users</div>;
}

修复方法：

scss 复制代码

// ✅ 只在挂载时运行
useEffect(() => {
  fetchUsers().then(setUsers);
}, []); // 空依赖数组

常见错误 #2：缺少清理

scss 复制代码

// ❌ 内存泄漏 ------ 没有清理
function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);
  }, []);

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

每次组件挂载时都会创建一个新的定时器，但永远不会清理。

scss 复制代码

// ✅ 正确的清理
useEffect(() => {
  const interval = setInterval(() => {
    setSeconds(s => s + 1);
  }, 1000);

  return () => clearInterval(interval);
}, []);

常见错误 #3：Effect 竞态问题（Effect Racing）

scss 复制代码

// ❌ 竞态问题
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]);
}

问题：如果 userId 快速变化，返回结果可能乱序。

解决方案 ------ 使用 清理 + abort：

scss 复制代码

// ✅ 防止竞态
useEffect(() => {
  const abortController = new AbortController();

  fetchUser(userId, { signal: abortController.signal })
    .then(setUser)
    .catch(error => {
      if (error.name !== 'AbortError') {
        console.error(error);
      }
    });

  return () => abortController.abort();
}, [userId]);

AbortController 是 浏览器原生提供的一个控制异步任务中止的 API，它主要用于：

取消 fetch 请求

取消定时任务、事件监听、流读取等支持 AbortSignal 的操作

它们是一对：
ini 复制代码
const controller = new AbortController();
const signal = controller.signal;
你把 signal 传给需要支持取消的 API（比如 fetch）。

当你调用 controller.abort() 时，signal 会变成 aborted: true，所有监听它的任务就会被中断。

举了栗子：
ini 复制代码
const controller = new AbortController();
const signal = controller.signal;

fetch('/long-request', { signal })
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('请求被取消');
    } else {
      console.error('请求出错', err);
    }
  });

// 2 秒后取消请求
setTimeout(() => controller.abort(), 2000);
浏览器兼容性；

进阶模式：自定义 Hooks

提取常见的 useEffect 模式：

scss 复制代码

// 用于 API 调用的自定义 Hook
function useApi(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

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

    setLoading(true);
    setError(null);

    fetch(url, { signal: abortController.signal })
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        if (error.name !== 'AbortError') {
          setError(error);
          setLoading(false);
        }
      });

    return () => abortController.abort();
  }, [url]);

  return { data, loading, error };
}

// 使用方式
function UserProfile({ userId }) {
  const { data: user, loading, error } = useApi(`/api/users/${userId}`);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <div>{user.name}</div>;
}

进阶模式：性能优化

useEffect 性能优化技巧：

scss 复制代码

// ❌ 每次渲染都执行昂贵计算
function ExpensiveComponent({ items }) {
  const [filteredItems, setFilteredItems] = useState([]);

  useEffect(() => {
    // 每次渲染后运行
    const filtered = items.filter(item => item.important);
    setFilteredItems(filtered);
  }); // 没有依赖数组
}

scss 复制代码

// ✅ 使用正确依赖优化
useEffect(() => {
  const filtered = items.filter(item => item.important);
  setFilteredItems(filtered);
}, [items]); // 仅在 items 改变时运行

ini 复制代码

// ✅ 更好的方式 ------ 对纯计算使用 useMemo
const filteredItems = useMemo(() => {
  return items.filter(item => item.important);
}, [items]);

useEffect 检查清单

在编写任何 useEffect 之前，先问自己：

我在同步什么？（外部 API、浏览器 API、订阅）
什么会触发重新同步？（依赖项）
我需要清理吗？（订阅、定时器、请求）
可能导致无限循环吗？（检查依赖）
可能导致竞态吗？（考虑清理）

真实案例：完整的数据获取

这是一个可用于生产的 demo：

javascript 复制代码

function ProductList({ category, searchTerm }) {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 如果没有 category 则不请求
    if (!category) return;

    const abortController = new AbortController();

    setLoading(true);
    setError(null);

    const fetchProducts = async () => {
      try {
        const response = await fetch(
          `/api/products?category=${category}&search=${searchTerm}`,
          { signal: abortController.signal }
        );

        if (!response.ok) {
          throw new Error('Failed to fetch products');
        }

        const data = await response.json();
        setProducts(data);
      } catch (error) {
        if (error.name !== 'AbortError') {
          setError(error.message);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchProducts();

    return () => abortController.abort();
  }, [category, searchTerm]); // category 或 searchTerm 变化时重新请求

  return (
    <div>
      {loading && <div>Loading products...</div>}
      {error && <div>Error: {error}</div>}
      {products.map(product => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  );
}

什么时候不该使用 useEffect

有时候 useEffect 并不是正确的工具：

javascript 复制代码

// ❌ 不要用 useEffect 来计算派生状态
function CartTotal({ items }) {
  const [total, setTotal] = useState(0);

  useEffect(() => {
    const newTotal = items.reduce((sum, item) => sum + item.price, 0);
    setTotal(newTotal);
  }, [items]);

  return <div>Total: ${total}</div>;
}

// ✅ 在渲染阶段直接计算
function CartTotal({ items }) {
  const total = items.reduce((sum, item) => sum + item.price, 0);
  return <div>Total: ${total}</div>;
}

useEffect 应该用于副作用，而不是计算值。

我辛苦学到的问题解决技巧

以下是一些调试策略，帮我节省了大量时间：

先检查清理函数------大多数 bug 都是缺少清理函数
跟踪依赖数组------是否包含了内部引用的所有变量？
查看 effect 中的状态更新------通常是无限循环的根源
测试竞态条件------快速改变 props 看看会出什么问题
使用带时间戳的 console.log------精确追踪 effect 的运行时机

选择一种技巧，应用到你当前的 useEffect 问题上，能直接秒。

改变一切的调试思维方式

这些技巧让我明白，useEffect 问题通常归结为一个核心：没有理解你是在将组件与外部系统同步。

一旦用这种思维去调试，依赖数组就能理解，清理函数也变得显而易见，竞态条件也能被预防。

你现在正在困扰哪个 useEffect 问题？在评论里分享------我很可能调试过类似的问题，可以分享解决方案。