揭开 5 种有趣且富有教育意义的 useEffect 无限循环类型

2023-09-04 08:59:42

无限循环通常被视为编程中的禁忌，但在 React 的世界中，它们有时是无法避免的。理解这些无限循环模式可以帮助我们深入了解 React 的工作原理，并更有效地避免或管理它们。在这篇文章中，我们将探讨五种有趣的 useEffect 无限循环类型，了解它们的成因、后果以及最佳实践。

1. 未提供依赖项数组

当我们使用 useEffect 时，我们必须指定一个依赖项数组，列出组件状态或属性中所有可能会导致该效果重新运行的值。如果没有指定依赖项数组，useEffect 将在每次渲染时运行，导致无限循环。

useEffect(() => {
  // 由于没有提供依赖项数组，此效果将在每次渲染时重新运行
  console.log("无限循环！");
});

2. 依赖项数组中包含自身

另一个导致无限循环的原因是将 useEffect 本身包含在依赖项数组中。这是因为当 useEffect 运行时，它会触发重新渲染，从而导致 useEffect 再次运行。

useEffect(() => {
  // 将 useEffect 本身包含在依赖项数组中，导致无限循环
  console.log("无限循环！");
}, [useEffect]);

3. 状态更新不带回调

useEffect 可以接受一个可选的回调函数，在状态更新后运行。如果没有提供回调，useEffect 将在状态更新后立即重新运行，导致无限循环。

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

useEffect(() => {
  // 没有提供回调，因此此效果将在每次状态更新后重新运行
  console.log(`count 是 ${count}`);
});

// 每次调用此函数都会导致无限循环
setCount(count + 1);

4. 异步操作导致状态更新

当我们使用 async/await 或 Promise 在 useEffect 中执行异步操作时，我们需要格外小心。如果我们不处理好状态更新，可能会导致无限循环。

useEffect(() => {
  // 异步操作可能导致无限循环
  (async () => {
    const data = await fetch("https://example.com/data");
    setCount(data.count);
  })();
}, []);