在 React 应用程序中，内存泄漏通常是由于组件在卸载后仍然保留了引用，从而导致无法被垃圾回收器清理。这种问题可能会导致应用程序性能下降或资源耗尽。以下是检查和修复 React 应用中内存泄漏的方法。

---

一、检查内存泄漏

1. 使用浏览器开发工具

现代浏览器的开发者工具（如 Chrome DevTools）可以帮助检测内存泄漏：

• Memory 面板：记录内存快照（Heap Snapshot），查看内存使用情况和未释放的对象。
• Performance 面板：记录性能分析，观察内存使用曲线。如果内存持续增长并且没有下降，可能存在内存泄漏。
• Allocation Profiler：跟踪对象分配，发现未释放的对象。

2. 使用 React DevTools

React DevTools 可以帮助识别哪些组件在渲染后没有被卸载，尤其是可能存在未清理的副作用。

3. 分析常见模式

通过代码检查以下常见内存泄漏模式：

• 未清理的 setTimeout 或 setInterval
• 未取消的网络请求或订阅
• 保留引用的闭包

---

二、修复内存泄漏

1. 清理副作用

使用 useEffect 时，确保在组件卸载时清理所有副作用：

useEffect(() => {
  const intervalId = setInterval(() => {
    console.log('Interval running');
  }, 1000);

  // 清理副作用
  return () => clearInterval(intervalId);
}, []);

2. 避免未取消的网络请求

在组件卸载时取消网络请求，例如使用 AbortController：

useEffect(() => {
  const controller = new AbortController();

  fetch('/api/data', { signal: controller.signal })
    .then(response => response.json())
    .catch(err => {
      if (err.name === 'AbortError') {
        console.log('Fetch aborted');
      }
    });

  return () => controller.abort();
}, []);

3. 清理订阅

如果组件订阅了事件（如 WebSocket、Redux Store 或其他事件处理程序），在组件卸载时需要取消订阅：

useEffect(() => {
  const handler = () => console.log('Event triggered');
  window.addEventListener('resize', handler);

  return () => window.removeEventListener('resize', handler);
}, []);

4. 管理引用

• 避免全局变量或长时间持有对 DOM 元素的引用。
• 检查是否有闭包意外捕获了组件的状态或变量。

5. 优化长列表

长列表可能导致内存问题，使用虚拟化库（如 react-window 或 react-virtualized）优化渲染：

import { FixedSizeList as List } from 'react-window';

const MyList = ({ items }) => (
  <List
    height={500}
    itemCount={items.length}
    itemSize={35}
    width="100%"
  >
    {({ index, style }) => <div style={style}>{items[index]}</div>}
  </List>
);

6. 检查组件卸载

确保组件在卸载时能够释放所有资源，尤其是对于弹窗、模态框等动态挂载的组件。

---

三、预防内存泄漏

1. 使用工具监控

• 定期通过浏览器的 Memory 面板检查内存使用。
• 使用工具如 ESLint 插件（如 eslint-plugin-react-hooks）帮助识别潜在问题。

2. 组件优化

• 避免不必要的状态或副作用。
• 使用 React.memo 或 useMemo 来减少重新渲染。

3. 定期代码审查

团队内进行代码审查，确保未引入不必要的资源占用和未清理的副作用。

---

四、常见场景的内存泄漏及修复

1. 未清理的计时器

useEffect(() => {
  const timer = setTimeout(() => console.log('Timer finished'), 1000);

  return () => clearTimeout(timer);
}, []);

2. 未清理的事件监听器

useEffect(() => {
  const onScroll = () => console.log('Scrolling');
  window.addEventListener('scroll', onScroll);

  return () => window.removeEventListener('scroll', onScroll);
}, []);

3. 未取消的异步请求

useEffect(() => {
  let isMounted = true;

  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      if (isMounted) {
        console.log(data);
      }
    });

  return () => { isMounted = false; };
}, []);

---

五、监控工具推荐

• React Developer Tools：检查 React 组件的内存使用。
• Chrome DevTools Memory：分析内存快照。
• Profiler：检查性能问题和渲染次数。
• Heap.js 或 Memory.js：监控内存使用的 JavaScript 工具库。

通过正确清理和监控，可以有效避免和修复 React 应用中的内存泄漏问题。