React 项目中有哪些内存泄露的场景？ - 前端面试题

在React项目中，内存泄露主要是指应用程序持续占用不再需要使用的内存。这会导致应用性能下降，甚至崩溃。以下是一些典型的内存泄露场景：

1. 组件卸载后的挂载状态更新

例子：

javascript
class MyComponent extends React.Component {
  state = { data: null };

  componentDidMount() {
    someAsyncCall().then(data => {
      if (!this.isUnmounted) {
        this.setState({ data });
      }
    });
  }

  componentWillUnmount() {
    this.isUnmounted = true;
  }
}

在上面的例子中，someAsyncCall是一个异步操作，如果在异步操作完成前组件被卸载，而异步操作的回调仍试图执行this.setState，这可能会导致内存泄露。通过设置一个标志isUnmounted并在componentWillUnmount中标记组件已卸载，可以避免这种情况。

2. 没有清理的定时器和数据订阅

例子：

javascript
class MyComponent extends React.Component {
  componentDidMount() {
    this.intervalId = setInterval(this.fetchData, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalId);
  }

  fetchData = () => {
    // Fetch data from API
  }
}

如果在组件卸载后，没有清理定时器，定时器依然会运行，这会阻止JavaScript引擎回收相关内存，导致内存泄露。在componentWillUnmount中清除定时器可以解决这个问题。

3. 外部库的事件监听器未正确移除

例子：

javascript
class MyComponent extends React.Component {
  componentDidMount() {
    ExternalLibrary.on('data', this.handleData);
  }

  componentWillUnmount() {
    ExternalLibrary.off('data', this.handleData);
  }

  handleData = (data) => {
    // Handle the event
  }
}

如果忘记移除事件监听器，那么即使组件卸载了，事件监听器仍然存在，导致内存泄露。应该在componentWillUnmount中移除监听器。

4. 闭包引用导致的内存泄露

例子：

javascript
function setup() {
  let largeData = new Array(1000).fill(new Array(1000).fill('data'));

  document.getElementById('button').addEventListener('click', function handleClick() {
    console.log('Button clicked');
  });
}

在上面的例子中，即使按钮点击事件的处理函数handleClick并不需要使用largeData，但由于闭包的作用，largeData会被保留在内存中，除非handleClick被移除或者largeData变量被显式设置为null。

5. 长时间运行的WebSocket连接

如果组件与一个WebSocket服务建立了连接，并且在组件卸载时没有关闭连接，那么这个连接可能会持续存在并保持对组件的引用，从而导致内存泄露。

防止内存泄露的一般建议：

当组件卸载时，确保取消所有订阅和异步操作。
使用useEffect的清理函数来处理功能性组件的副作用和相关的清理操作。
对于外部事件监听器和定时器，确保在组件卸载时移除或清理它们。
考虑使用WeakMap或WeakSet来缓存大对象，它们不会阻止垃圾回收。
避免在组件状态中保存大量的数据，特别是如果这些数据在组件的生命周期内不再需要。
使用工具（如Chrome开发者工具的Memory选项卡）定期对应用的内存使用进行分析和调试。