在 React 中使用 useEffect 时，为什么有时会遇到无限循环的问题？如何避免？

在 React 中使用 useEffect 时，为什么有时会遇到无限循环的问题？如何避免？

答：
useEffect 中出现无限循环通常是因为在依赖数组中包含了在每次渲染时都会变化的值（例如对象、函数或状态更新），而 useEffect 的回调又会触发状态更新，从而导致组件重新渲染，进而再次触发 useEffect，形成闭环。

常见场景示例：

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

  useEffect(() => {
    setCount(count + 1); // 每次执行都会更新状态
  }, [count]); // 依赖 count，而 count 更新会触发重新渲染，进而再次触发 effect
}

解析与解决方法：

1. 正确使用依赖数组：确保 useEffect 的依赖项确实是必要的。如果 effect 不依赖任何响应式值，可使用空数组 []。

2. 使用函数式更新：如果状态更新仅依赖于前一个状态，可以使用函数式更新方式，避免将状态变量加入依赖项：

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

3. 使用 useCallback 或 useMemo：对于在渲染中创建的函数或对象，用 useCallback 或 useMemo 稳定其引用，防止因引用变化触发不必要的 effect：

   const fetchData = useCallback(async () => { ... }, []);
   useEffect(() => {
     fetchData();
   }, [fetchData]);
   

4. 避免不必要的状态更新：在 effect 内部做条件判断，仅在必要时更新状态。

通过合理管理依赖项和状态更新逻辑，即可有效避免 useEffect 引发的无限循环问题。