内存泄漏是 React 应用中一个常见但常被忽视的问题，它会降低应用的性能和稳定性。当组件继续引用未使用的对象时，就会发生内存泄漏，这会阻止垃圾回收，导致内存使用量随时间增加。
React 中的内存泄漏
当应用保留对不再需要的对象的引用时，就会发生内存泄漏，这会阻止 JavaScript 引擎回收这些内存。在 React 应用中，这通常发生在组件创建外部副作用（计时器、订阅、网络请求、DOM 节点、WebSocket 连接等），但在组件卸载时未能停止或分离它们。随着时间推移，组件不断挂载和卸载，保留的资源会不断累积，导致内存不断增加，尽管可见的 UI 已不再需要这些资源。
从实际角度来说，如果一个组件启动了一个 setInterval（定时器），但从未清除它，那么该定时器将继续运行，并可能保留对组件状态和 DOM 的引用，从而阻止垃圾回收。同样，长期存在的订阅或未解决的 Promise（网络请求）引用组件状态也可能导致泄漏。这些"僵尸"引用会一直占用内存，直到浏览器标签页关闭。
检测内存泄漏
在解决内存泄漏之前，第一步是确定你的 React 应用是否真正受到影响。内存泄漏会逐渐累积，直到性能明显下降，这使得它们很难被发现。早期检测有助于确保应用保持稳定和响应。就像体检一样，早发现早治疗，成本低效果好。
识别早期预警信号
一些明显的迹象表明你的 React 应用可能存在内存泄漏：
- 内存使用量逐渐增加：在正常运行过程中，应用的内存消耗可能持续上升，而不稳定或减少，这通常表明某些资源没有被正确释放。就像水龙头一直在滴水，虽然每次不多，但时间长了就会积少成多。
- 性能逐渐下降：内存泄漏可能导致应用逐渐变慢，渲染延迟、UI 更新缓慢或加载时间变长。用户可能会感觉应用越来越卡，就像电脑用久了会变慢一样。
- 意外冻结或崩溃：严重的内存泄漏可能导致应用或浏览器标签冻结或崩溃，尤其是在长时间使用后。当系统耗尽可用内存时，这些问题通常会发生。这是最严重的情况，就像房间堆满了东西，最后连门都打不开了。
检测泄漏的技术
我们可以通过结合浏览器工具和 React 内置的调试工具来检测 React 应用中的内存泄漏。这些工具就像医生的听诊器和 X 光机，能帮你找到问题的根源：
- 使用 Chrome 开发者工具监控内存使用：打开 Chrome 开发者工具 > 性能 或 内存 标签，观察应用的内存图表。在与应用的不同部分交互时，注意内存使用量是否持续上升。如果内存一直涨不降，那就有问题了。
- 拍摄并比较堆快照：在不同阶段（如组件挂载前后）捕获堆快照，以跟踪内存使用的变化。然后比较这些快照，以识别即使在组件被销毁后仍保留引用的已分离 DOM 节点、事件监听器或闭包。这就像给内存拍照片，对比一下就知道哪些东西没被清理。
- 使用浏览器的任务管理器：进入 Chrome > 更多工具 > 任务管理器，实时监控应用的内存消耗。在执行简单交互时，如果内存使用量持续上升，可能表明存在泄漏。这是最简单直接的方法，一眼就能看出内存是否在增长。
- 利用 React 开发者工具：React 开发者工具扩展提供了有关组件层次结构和渲染行为的有价值见解。使用组件标签检查组件是否在应该卸载时仍然挂载，以及使用分析器标签检测不必要的重新渲染或持有大型状态树的组件。结合 Chrome 开发者工具的内存分析，可以更清楚地了解泄漏发生的位置。
- 利用 React 分析器：React 分析器有助于识别过度重新渲染或持有大量元素树的组件。持续的重新渲染和保留的组件树可能表明清理不当或状态处理低效。如果某个组件一直在重新渲染，可能就是内存泄漏的罪魁祸首。
内存泄漏的常见原因及修复方法
当组件保留对数据、DOM 节点或异步进程的引用时，即使组件已从 DOM 中移除，这些引用仍然存在，从而导致内存泄漏。以下是 React 应用中内存泄漏的常见原因，以及如何修复它们。
计时器和间隔（setTimeout / setInterval）
计时器和间隔是内存泄漏的常见来源，尤其是当它们在组件从 DOM 中移除后仍然运行时。如果我们忘记清除间隔或超时，回调函数会保留对组件状态或属性的引用，从而阻止垃圾回收。这就像你设置了闹钟，但忘记关掉，它就会一直响下去。
初学者提示：setTimeout 是延迟执行一次，setInterval 是每隔一段时间执行一次。无论哪种，用完后都要记得清理。
问题示例——泄漏的计时器
import React, { useState, useEffect } from "react";
function TimerComponent() {
// useState 用于创建状态，count 是当前值，setCount 是更新函数
const [count, setCount] = useState(0);
// useEffect 用于处理副作用，第二个参数 [] 表示只在组件挂载时执行一次
useEffect(() => {
// 创建一个定时器，每秒执行一次
const interval = setInterval(() => {
setCount(c => c + 1); // 每次执行时，count 加 1
}, 1000);
// ❌ 问题：缺少清理函数
// 当组件卸载时，这个定时器会继续运行，导致内存泄漏
}, []);
return <p>Count: {count}</p>;
}
export default TimerComponent;
在这个示例中，setInterval 函数即使在组件卸载后仍然继续执行，保留对 setCount 和状态值的引用。组件虽然被销毁了，但定时器还在跑，这就是典型的内存泄漏。作为初学者，记住一个原则：只要用了定时器，就要在 useEffect 的返回函数中清理它。
修复版本——清理间隔
import React, { useState, useEffect } from "react";
function TimerComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setCount(c => c + 1);
}, 1000);
// ✅ 正确做法：返回一个清理函数
// 这个函数会在组件卸载时自动执行
return () => {
clearInterval(interval); // 清除定时器，释放内存
};
}, []);
return <p>Count: {count}</p>;
}
export default TimerComponent;
通过从 useEffect 返回一个清理函数，间隔在组件卸载时被清除，释放引用并防止泄漏。记住一个原则：有借有还，再借不难，创建了定时器，就要记得清理。
初学者必记：useEffect 的返回函数就是清理函数，React 会在组件卸载时自动调用它。这是 React 提供的一个非常贴心的功能。
在 window、document 或其他 DOM 节点上的事件监听器
当事件监听器附加到全局对象（如 window、document 或 DOM 节点）时，它们也可能导致内存泄漏。如果未正确移除，这些监听器会将组件的状态和函数保留在内存中。就像你在墙上贴了海报，不撕下来就会一直占着地方。
初学者提示：事件监听器就是用来"监听"某些事件的，比如窗口大小变化、鼠标点击等。用 addEventListener 添加的监听器，必须用 removeEventListener 移除。
未移除的事件监听器
import React, { useEffect, useState } from "react";
function ResizeTracker() {
// 初始化宽度为当前窗口宽度
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
// 定义一个处理函数，当窗口大小改变时更新 width
const handleResize = () => setWidth(window.innerWidth);
// 添加事件监听器，监听窗口大小变化
window.addEventListener("resize", handleResize);
// ❌ 问题：没有移除监听器
// 组件卸载后，监听器仍然存在，导致内存泄漏
}, []);
return <p>Window width: {width}</p>;
}
export default ResizeTracker;
在这里，resize 监听器即使在组件卸载后仍然存在，导致内存泄漏和不必要的重新渲染。组件都卸载了，但监听器还在监听窗口大小变化，这就是浪费资源。记住：添加了监听器，卸载时一定要移除。
移除监听器
import React, { useEffect, useState } from "react";
function ResizeTracker() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener("resize", handleResize);
// ✅ 正确做法：返回清理函数
return () => {
// 移除事件监听器，注意要传入相同的函数引用
window.removeEventListener("resize", handleResize);
};
}, []);
return <p>Window width: {width}</p>;
}
export default ResizeTracker;
在组件卸载时清理事件监听器，确保它们不会超出其生命周期而保留，防止保留内存引用。记住：添加了监听器，就要记得移除。
初学者注意：removeEventListener 必须传入和 addEventListener 相同的函数引用，所以要把 handleResize 定义在 useEffect 外面，或者确保每次都是同一个函数。
未解决或长期存在的网络请求（Promise / Fetch）
当组件发起网络请求并在请求解决之前卸载时，回调可能仍然尝试更新状态。这会不必要地保留引用，并且可能甚至会触发关于更新已卸载组件的 React 警告。就像你点了外卖，但搬家了，外卖送到了旧地址，但你人已经不在那里了。
初学者提示：网络请求（fetch）是异步的，需要时间。如果组件在请求完成前就卸载了，请求的回调函数还会尝试更新状态，这时候 React 会警告你。解决方法是用 AbortController 取消请求。
没有取消的网络请求
import React, { useState, useEffect } from "react";
function DataFetcher() {
const [data, setData] = useState(null);
useEffect(() => {
// ❌ 问题：没有取消机制
// 如果组件在请求完成前卸载，回调仍会尝试更新状态
fetch("https://jsonplaceholder.typicode.com/posts")
.then(res => res.json()) // 将响应转换为 JSON
.then(result => setData(result)) // 更新状态
.catch(console.error); // 错误处理
// 组件卸载后，这个请求的回调仍然会执行
}, []);
return <div>{data ? "Data loaded" : "Loading..."}</div>;
}
export default DataFetcher;
如果组件在 fetch 解决之前卸载，回调仍然保留内存引用，并且可能会尝试更新状态。这时候 React 会在控制台警告你：Can't perform a React state update on an unmounted component（不能在已卸载的组件上更新状态），这就是典型的内存泄漏症状。如果你看到这个警告，说明需要添加取消机制了。
取消 Fetch 请求
import React, { useState, useEffect } from "react";
function DataFetcher() {
const [data, setData] = useState(null);
useEffect(() => {
// ✅ 正确做法：创建 AbortController 用于取消请求
const controller = new AbortController();
// 在 fetch 的配置中传入 signal，用于控制请求
fetch("https://jsonplaceholder.typicode.com/posts", {
signal: controller.signal // 关联取消控制器
})
.then(res => res.json())
.then(result => setData(result))
.catch(err => {
// 如果是取消错误，不需要处理（这是正常的）
if (err.name !== "AbortError")
console.error(err);
});
// 返回清理函数，组件卸载时取消请求
return () => {
controller.abort(); // 取消请求，释放内存
};
}, []);
return <div>{data ? "Data loaded" : "Loading..."}</div>;
}
export default DataFetcher;
使用 AbortController 确保在组件卸载时取消挂起的网络请求，释放相关内存。这是现代浏览器提供的标准 API，用起来很简单，但效果很好。
初学者必记：AbortController 是浏览器原生 API，不需要安装任何库。记住三步：1) 创建 controller，2) 在 fetch 中传入 signal，3) 在清理函数中调用 abort。
管理 Ref 并防止内存保留
Refs 是 React 中用于访问 DOM 元素或存储跨渲染持久化的可变值的有用工具。然而，如果一个 ref 保留对大型 DOM 节点或组件实例的引用，并且在卸载时未清除，它可能会阻止垃圾回收并导致内存泄漏。就像你保存了一个大文件的引用，即使文件删除了，引用还在占用内存。
初学者提示：Ref 就像是一个"引用"，可以指向 DOM 元素或其他值。用 useRef 创建的 ref，如果指向了视频、音频等大文件，卸载时一定要清理。
持久的 Ref 引用
import React, { useRef, useEffect } from "react";
function VideoPlayer() {
// 创建一个 ref 用于存储视频元素
const videoRef = useRef(null);
useEffect(() => {
// 创建一个 video 元素并设置属性
videoRef.current = document.createElement("video");
videoRef.current.src = "/sample-video.mp4";
videoRef.current.play(); // 开始播放
// ❌ 问题：没有清理逻辑
// 组件卸载后，视频元素和 ref 仍然占用内存
}, []);
return <div>Video playing...</div>;
}
export default VideoPlayer;
在这个示例中，videoRef 即使在组件从 DOM 中移除后仍然保留对视频元素的引用。由于没有清理逻辑，视频元素继续存在于内存中，不必要地消耗资源并阻止垃圾回收。视频还在播放，但组件已经不存在了，这就是典型的"僵尸"引用。视频文件通常很大，不清理会占用大量内存。
在卸载时清除 Ref
为了避免这个问题，始终在清理阶段释放引用并停止任何正在进行的活动，例如视频播放。这确保了引用的元素在不再使用时被正确移除，并且可以被垃圾回收。记住：用完就清理，不留后患。
import React, { useRef, useEffect } from "react";
function SafeVideoPlayer() {
const videoRef = useRef(null);
useEffect(() => {
videoRef.current = document.createElement("video");
videoRef.current.src = "/sample-video.mp4";
videoRef.current.play();
// ✅ 正确做法：返回清理函数
return () => {
// 停止播放
videoRef.current.pause();
// 清空视频源
videoRef.current.src = "";
// 重新加载（清除缓存）
videoRef.current.load();
// 将引用设为 null，释放内存
videoRef.current = null;
};
}, []);
return <div>Safe Video Player</div>;
}
export default SafeVideoPlayer;
在这个版本中，视频播放被暂停，源被清除，并且引用被明确设置为 null。这种清理确保了视频元素和相关资源被释放，防止泄漏并保持应用的内存使用稳定。就像你离开房间时，记得关灯、关空调、关水龙头，这样才不会浪费资源。