为什么我的定时器代码会导致内存泄漏？

你这个情况我之前也踩过坑，表面上看代码逻辑没问题，组件卸载时清了定时器，但内存还是涨。其实问题就出在细节上，尤其是React的生命周期和闭包引用这块。

先说结论：你的定时器虽然被clear了，但fetchData方法可能持有对组件实例的强引用，而这个引用链在某些情况下没被及时释放，加上如果请求本身没取消，就会导致内存泄漏。

第一步，最直接的问题是构造函数里直接启动setInterval，但没有考虑组件初始化失败或者异常的情况。而且React类组件的constructor不是执行副作用的地方，这本身就违反了设计原则。

第二步，重点来了——this.fetchData() 这个调用会绑定当前组件实例，意味着每次回调都会维持一个对 this 的引用。即使你clear了interval，但如果在这期间组件已经卸载，而fetchData又发起了异步请求（比如fetch或axios），这些请求不会自动中止，它们的回调仍然持有对组件状态的潜在引用，垃圾回收器就不敢收。

更严重的是，如果你的fetchData里面有类似这样的写法：

fetchData = () => {

  fetch('/api/data')

    .then(response => response.json())

    .then(data => {

      this.setState({ data }); // 注意这里！

    });

}

那就有大问题了。组件都卸载了你还调setState，不仅内存泄漏，还会报错“Can't perform a React state update on an unmounted component”。而且这个Promise链一直挂着，JS引擎就得留着整个调用栈上下文，自然吃内存。

解决办法分三步走：

第一步，把定时器移到componentDidMount里去。constructor只做初始化变量，副作用放生命周期钩子才安全。

第二步，给网络请求加上可取消的能力。如果是fetch，可以传入AbortController的signal；如果是axios，用CancelToken或者直接取消请求。

第三步，在componentWillUnmount里不仅要clearInterval，还要主动中断还在进行中的请求。

改完后的代码应该长这样：

class DataComponent extends React.Component {

  intervalId = null;

  abortController = new AbortController();



  componentDidMount() {

    // 定时任务放在这里

    this.intervalId = setInterval(() => {

      this.fetchData();

    }, 5000);

  }



  componentWillUnmount() {

    // 清理定时器

    if (this.intervalId) {

      clearInterval(this.intervalId);

    }

    

    // 中止所有未完成的请求

    this.abortController.abort();

    

    console.log('组件已卸载');

  }



  fetchData = async () => {

    try {

      // 每次请求用新的signal，避免复用同一个controller影响别的请求

      const controller = new AbortController();

      const signal = controller.signal;



      // 超时控制也可以加在这里，比如setTimeout(() => controller.abort(), 4000)



      const response = await fetch('/api/data', { signal });



      if (!response.ok) throw new Error('Network error');



      const data = await response.json();



      // 注意这里：判断组件是否还挂载着

      if (this.intervalId) { // 利用intervalId是否存在来判断组件是否已卸载

        this.setState({ data });

      }



    } catch (error) {

      if (error.name === 'AbortError') {

        console.log('请求已被中断');

      } else {

        console.error('Fetch failed:', error);

      }

    }

  };



  render() {

    return <div>...</div>;

  }

}

需要注意的是，上面用 if (this.intervalId) 来判断组件是否存活只是一个取巧的做法。更好的方式是在componentWillUnmount里设一个标记，比如 this._isMounted = false，然后在回调里判断它。不过React官方不推荐这么做，因为容易出错。

换成函数组件+useEffect其实更干净：

function DataComponent() {

  const [data, setData] = useState(null);

  const abortControllerRef = useRef(null);



  useEffect(() => {

    const intervalId = setInterval(async () => {

      // 每次请求创建新的AbortController

      const controller = new AbortController();

      abortControllerRef.current = controller;



      try {

        const response = await fetch('/api/data', {

          signal: controller.signal

        });



        if (!response.ok) throw new Error('Network error');



        const result = await response.json();

        

        // 只有组件仍挂载时才更新状态

        if (!controller.signal.aborted) {

          setData(result);

        }

      } catch (error) {

        if (error.name !== 'AbortError') {

          console.error('Fetch failed:', error);

        }

      }

    }, 5000);



    // 清理函数

    return () => {

      clearInterval(intervalId);

      if (abortControllerRef.current) {

        abortControllerRef.current.abort();

      }

    };

  }, []);



  return <div>...</div>;

}

这么改之后，你会发现内存不再持续增长。原因是你切断了两个关键的泄漏路径：一是未完成的网络请求，二是对已卸载组件的状态更新。

另外建议你在浏览器里打开Performance Monitor，观察JS heap size和nodes数量变化，对比修改前后的表现，能明显看到改进效果。

总结一下，setInterval本身不会造成内存泄漏，但它触发的副作用如果不妥善管理，尤其是异步操作+状态更新+外部资源持有，就会形成引用环，让GC没法回收。这才是根本原因。