在 React 中使用 useEffect 时，为什么有时会触发无限循环？如何避免？

在 React 中使用 useEffect 时，为什么有时会触发无限循环？如何避免？

回答与解析：

在 React 中，useEffect 无限循环通常是因为在依赖数组中包含了在每次渲染时都会变化的值（例如对象、数组、函数），并且 useEffect 内部又更新了某个状态，导致组件重新渲染，从而再次触发 useEffect，形成循环。

常见错误示例：

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

  useEffect(() => {
    setCount(count + 1); // 更新状态
  }, [count]); // 依赖 count，而 count 在每次更新后都会变
}

上述代码中，useEffect 依赖 count，但又在内部修改 count，每次更新都会重新触发 effect，造成无限循环。

解决方法：

1. 使用函数式更新（推荐）：如果新状态依赖于旧状态，直接使用函数式更新，避免将状态变量放入依赖数组。

useEffect(() => {
  setCount(prev => prev + 1);
}, []); // 无依赖，只执行一次

2. 避免不必要的依赖：仔细审查 useEffect 的逻辑，确认是否真的需要该依赖。如果依赖是一个对象或函数，考虑将其移到组件外部（如用 useCallback、useMemo 优化），或判断是否可以省略。

3. 使用 ESLint 插件 react-hooks/exhaustive-deps：它会提示你缺少或多余的依赖，帮助你正确管理依赖数组。

总之，理解 useEffect 的依赖机制和状态更新的时机是避免无限循环的关键。