内存泄漏（Memory leak）指的是程序在运行过程中分配的内存没有被释放，导致内存使用不断增加，最终可能导致应用变慢、崩溃，甚至影响整个系统的性能。在前端开发中，内存泄漏通常是由以下几种常见原因造成的：
1. 未清理的事件监听器
当你为某个元素或全局对象（如 window 或 document）添加事件监听器时，如果在组件卸载时没有及时移除这些监听器，它们会继续占用内存。由于事件监听器引用了组件内的变量或方法，即使组件已经被卸载，这些变量和方法也不能被垃圾回收机制回收，造成内存泄漏。
示例：
useEffect(() => {
const handleResize = () => {
console.log('Window resized');
};
window.addEventListener('resize', handleResize);
// 忘记移除事件监听器
return () => {
// 应该移除监听器
window.removeEventListener('resize', handleResize);
};
}, []);
解决方案： 使用 useEffect 中的清理函数来移除事件监听器：
useEffect(() => {
const handleResize = () => {
console.log('Window resized');
};
window.addEventListener('resize', handleResize);
// 清理函数
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
2. 未取消的异步请求
在组件中发起异步请求（如 fetch 或 axios）时，如果在请求完成之前组件被卸载，可能会导致内存泄漏。因为请求完成后试图更新已经卸载的组件的状态，会导致 React 尝试操作已经不在 DOM 中的组件，浪费内存。
示例：
useEffect(() => {
const fetchData = async () => {
const res = await fetch('/api/data');
const data = await res.json();
setData(data); // 如果组件已卸载，这将会导致内存泄漏
};
fetchData();
}, []);
解决方案： 使用一个 isMounted 标志来检测组件是否已卸载，或者使用 AbortController 来取消请求：
useEffect(() => {
let isMounted = true; // 标记组件是否挂载
const fetchData = async () => {
const res = await fetch('/api/data');
if (isMounted) {
const data = await res.json();
setData(data);
}
};
fetchData();
return () => {
isMounted = false; // 组件卸载时标记为 false
};
}, []);
或者使用 AbortController：
useEffect(() => {
const controller = new AbortController();
const fetchData = async () => {
const res = await fetch('/api/data', { signal: controller.signal });
const data = await res.json();
setData(data);
};
fetchData();
return () => {
controller.abort(); // 取消请求
};
}, []);
3. 不恰当的定时器/回调
如果你在 React 中使用了 setInterval 或 setTimeout，并且没有在组件卸载时清理它们，那么这些定时器或回调会继续执行，直到页面关闭或浏览器崩溃，造成内存泄漏。
示例：
useEffect(() => {
const interval = setInterval(() => {
console.log('Tick');
}, 1000);
// 忘记清理定时器
}, []);
解决方案： 在 useEffect 中返回一个清理函数，清理定时器：
useEffect(() => {
const interval = setInterval(() => {
console.log('Tick');
}, 1000);
return () => clearInterval(interval); // 清理定时器
}, []);
4. 未清理的订阅或外部库的资源
如果你使用了某些外部库（例如，WebSocket、第三方动画库等），它们可能会创建订阅或资源，必须在组件卸载时清理。
示例：
useEffect(() => {
const socket = new WebSocket('ws://example.com');
socket.onmessage = (event) => {
console.log(event.data);
};
// 忘记清理 WebSocket
}, []);
解决方案： 在 useEffect 的清理函数中关闭 WebSocket 连接或取消订阅：
useEffect(() => {
const socket = new WebSocket('ws://example.com');
socket.onmessage = (event) => {
console.log(event.data);
};
// 清理 WebSocket 连接
return () => {
socket.close();
};
}, []);
5. 闭包问题
React 组件中的闭包可能会导致内存泄漏，特别是在异步操作或定时器中。如果异步回调引用了组件的状态或方法，在组件卸载后仍然持有对组件的引用，可能会阻止组件被垃圾回收。
示例：
const MyComponent = () => {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('/api/data');
setData(await response.json());
};
fetchData();
}, []);
return <div>{data}</div>;
};
在这个例子中，如果组件卸载时 fetchData 请求还没有完成，setData 仍然会尝试更新已卸载的组件，造成内存泄漏。
解决方案： 在函数内部使用 isMounted 或 AbortController，确保只有在组件挂载时才更新状态。
总结：
内存泄漏的根本原因通常是没有清理不再需要的资源。React 中常见的导致内存泄漏的原因包括：
- 没有移除事件监听器。
- 没有取消未完成的异步请求。
- 没有清理定时器、回调、WebSocket 等资源。
- 闭包问题，导致异步回调仍引用已卸载组件。
通过在组件卸载时清理这些资源，使用合适的清理函数，你可以有效避免内存泄漏问题，确保应用的性能和稳定性。
