React组件卸载后异步循环未停止：useEffect清理机制详解

在React组件中，异步循环（如while循环的API轮询）在组件卸载后可能继续执行，需通过useEffect清理机制结合useRef手动终止，以避免内存泄漏和资源浪费。

• React生命周期与JS异步独立：React卸载组件时仅清理渲染和状态，不会自动终止已启动的JS异步任务（如setTimeout、Promise、while循环等）。
• 示例场景：Modal组件卸载后，其内部的while循环仍会执行至条件结束（如count < 100），导致控制台持续输出日志。

通过useRef跟踪组件挂载状态，并在useEffect的清理函数中更新状态，使异步循环在组件卸载时主动退出。

1. 创建挂载状态引用使用useRef定义一个布尔值（如mounted.current），初始值为false，表示组件未挂载。

   const mounted = React.useRef(false);

2. 在useEffect中设置和清理状态

   挂载时：在useEffect回调中将mounted.current设为true，表示组件已挂载。

   卸载时：返回的清理函数中将mounted.current设为false，触发循环终止。

   React.useEffect(() => { mounted.current = true; // 挂载时标记 pollIncrement(); // 启动异步任务 return () => { mounted.current = false; // 卸载时清理 };}, []);

3. 在异步循环中检查挂载状态修改循环条件，加入对mounted.current的检查。若组件已卸载，则退出循环。

   const pollIncrement = async () => { while (count < 100 && mounted.current) { // 关键修改 await wait(2000); console.log(++count); }};

1. 状态管理优化若需实时更新UI，应将count转为useState，并通过setCount更新值以触发重新渲染。

   const [count, setCount] = React.useState(0);// 在循环中替换console.log为：setCount(prev => { const newCount = prev + 1; if (newCount >= 100 || !mounted.current) return prev; // 额外安全检查 return newCount;});

2. 其他异步操作的清理

   定时器：在清理函数中调用clearTimeout或clearInterval。

   网络请求：使用AbortController取消未完成的请求。React.useEffect(() => { const abortController = new AbortController(); fetch(url, { signal: abortController.signal }) .then(/* ... */); return () => abortController.abort(); // 卸载时取消请求}, []);

3. 避免渲染阶段执行副作用所有副作用（如数据请求、订阅）应放在useEffect或事件处理器中，而非组件顶层。

4. 依赖项正确使用

   若useEffect依赖外部变量（如props、state），需将其加入依赖数组，避免闭包问题。

   空数组[]表示仅在挂载/卸载时执行一次。

通过结合useEffect的清理函数和useRef的挂载状态跟踪，可安全终止组件卸载时的异步任务。此模式适用于所有需要清理的副作用（如轮询、定时器、网络请求），是React中处理异步操作的推荐方法，能有效防止内存泄漏和资源浪费。