React内存泄漏的常见原因及避免策略-牛翰网

1. 引言

内存泄漏是指程序中分配的内存未能正确释放，导致内存占用不断增加，最终可能影响应用性能甚至崩溃。在React中，内存泄漏常发生于组件卸载后仍然存在的异步任务、订阅或事件监听器未正确清除。本文将详细介绍内存泄漏在React中的常见原因及避免策略，涵盖生命周期管理、事件和订阅的清理，以及异步请求取消等方面，帮助你构建高效健壮的React应用。

2. 内存泄漏的常见原因

2.1 异步任务未取消

定时器（setTimeout、setInterval）：组件卸载时若未清除定时器，定时器依然存在会继续执行。
网络请求：异步请求（例如fetch或Axios）在组件卸载后返回结果仍尝试更新状态。
订阅和事件监听：如订阅WebSocket、事件总线或外部库事件，组件卸载后未解除订阅会导致引用残留。

2.2 非取消的回调或订阅

事件监听器：例如在组件中绑定的全局事件监听器（如window、document事件）如果不在组件卸载时移除，可能会持续引用组件实例。
第三方库：使用第三方库（如EventBus、RxJS订阅）后未取消订阅，也会造成内存泄漏。

3. 避免内存泄漏的策略

3.1 正确使用React生命周期钩子（或Hooks清理函数）

类组件中的componentWillUnmount
在类组件中，确保在componentWillUnmount中移除所有订阅、定时器及事件监听器。

class MyComponent extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(() => {
      // 执行定时任务
    }, 1000);
    window.addEventListener('resize', this.handleResize);
  }
  
  componentWillUnmount() {
    clearInterval(this.timerID);
    window.removeEventListener('resize', this.handleResize);
  }
  
  render() {
    return <div>内容</div>;
  }
}

函数组件中的useEffect清理函数
在React Hooks中，通过useEffect返回的清理函数可以移除订阅和定时器。

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const timer = setInterval(() => {
      // 执行定时任务
    }, 1000);
    const handleResize = () => {
      console.log('resize');
    };
    window.addEventListener('resize', handleResize);

    // 清理函数：组件卸载时自动调用
    return () => {
      clearInterval(timer);
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return <div>内容</div>;
}

3.2 取消异步请求

使用AbortController
当使用fetch发起请求时，可以利用AbortController在组件卸载时取消请求，避免后续更新状态。

import React, { useEffect, useState } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

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

    fetch('https://api.example.com/data', { signal })
      .then(response => response.json())
      .then(result => setData(result))
      .catch(err => {
        if (err.name !== 'AbortError') {
          setError(err);
        }
      });

    return () => {
      controller.abort(); // 取消请求
    };
  }, []);

  if (error) return <div>Error: {error.message}</div>;
  if (!data) return <div>加载中...</div>;
  return <div>数据加载完成</div>;
}

利用第三方库取消请求
对于Axios等库，可以使用其内置取消功能（如CancelToken或AbortController支持）。

3.3 管理订阅与事件监听

移除全局事件监听器
如果在组件中绑定了window或document的事件，确保在组件卸载时移除监听器。
取消第三方订阅
对于使用EventBus或RxJS订阅的情况，需在组件卸载时调用取消订阅的方法（如unsubscribe()、off()）。

useEffect(() => {
  const subscription = someObservable.subscribe(data => {
    // 处理数据
  });
  return () => {
    subscription.unsubscribe(); // 取消订阅
  };
}, []);