在使用 React 的 useEffect 时，为什么有时会出现无限循环？

在使用 React 的 useEffect 时，为什么有时会出现无限循环？

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

解析：
React 的 useEffect 在其依赖项变化时会重新执行。如果 effect 中调用了 setState，并且依赖项是一个在每次渲染时都重新创建的引用类型（如 {}、[]、箭头函数等），那么每次渲染都会产生新的引用，useEffect 就会认为依赖项发生了变化，于是再次执行，进而再次调用 setState，导致无限循环。

示例错误代码：

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

  useEffect(() => {
    setCount(count + 1); // 修改状态
  }, [{}]); // 每次渲染 {} 都是新对象，依赖项始终变化

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

解决方案：

1. 避免在依赖数组中使用每次都会变化的字面量：如 {}、[]、() => {} 等。
2. 使用 useCallback 或 useMemo 缓存函数或对象，确保引用稳定。
3. 若 effect 不依赖任何外部变量但需状态更新，考虑使用函数式更新或省略依赖项并添加 eslint-disable 注释（慎用）。
4. 合理设计逻辑，确保状态更新不会无条件触发 effect 重复执行。

正确写法示例：

const obj = useMemo(() => ({}), []); // 引用稳定
useEffect(() => {
  setCount(c => c + 1);
}, [obj]);

或更常见的是，仅在真正需要时才更新状态，并确保依赖项稳定。