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

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

回答：
useEffect 触发无限循环的常见原因是：其依赖数组中包含了一个在每次渲染时都会变化的值（例如对象、数组、函数），而该 effect 内部又会更新状态，导致组件重新渲染，进而再次触发 effect，形成循环。

解析：
例如以下代码会导致无限循环：

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

  useEffect(() => {
    setCount(count + 1);
  }, [count]); // 依赖 count，每次 count 变化都会触发 effect
}

虽然上面的例子是明显错误的，但在更复杂的情况下，比如依赖一个对象：

useEffect(() => {
  fetchData();
}, [{ id: 1 }]); // 每次渲染都创建新对象，引用不同，导致 effect 重复执行

解决方法：

1. 正确管理依赖项：只将真正需要响应变化的值加入依赖数组。
2. 使用函数式更新：如果新状态基于前一个状态计算，使用函数式 setState 避免依赖旧状态：

   setCount(prev => prev + 1);
   

3. 使用 useCallback / useMemo 缓存函数或对象，避免每次渲染生成新引用：

   const config = useMemo(() => ({ id: 1 }), []);
   useEffect(() => { fetchData(config); }, [config]);
   

4. 检查是否真的需要依赖：有时候可以移除不必要的依赖，或者使用 ref 来保存不触发重渲染的可变值。

通过合理使用依赖数组和状态更新策略，可有效避免 useEffect 引发的无限循环。