本文主要是介绍【学一点儿前端】单页面点击前进或后退按钮导致的内存泄露问题（history.listen监听器清除），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
今天测试分配了一个比较奇怪的问题，在单页面应用中，反复点击“上一步”和“下一步”按钮时，界面表现出逐渐变得卡顿。为分析这一问题，我用Chrome的性能监控工具进行了浏览器性能录制。结果显示，每次点击“上一步”按钮时，JavaScript堆内存（JS Heap）和事件监听器（listener）的数量显著增加，并且随着点击次数的增加，这种增长趋势变得越来越明显，所需的时间也逐渐延长。如图所示：
于是我开始查找代码里的监听器，发现了这个监听代码
history.listen((_,type)=>{if (type==='POP'){setMchInfo({...mchInfo})}
})
这是一个用于监听浏览器历史记录变化的方法。当历史记录发生变化时，传递给listen方法的回调函数会被调用。
而我点击上一步时，会触发这么一个函数
const prevStep = () => {history.go(-1);
};
而这个函数就会触发history.listen，从而增加监听器数量
这样，我们需要在监听器用完的时候直接移除添加的监听器
useEffect(() => {const unlisten = history.listen((_, type) => {if (type === 'POP') {setMchInfo({ ...mchInfo });}});return () => {unlisten();};
}, [history]);
unlisten是history.listen返回的函数，用于移除之前添加的监听器，useEffect钩子的清理函数机制保证了在history变化时，只有旧的监听器会被移除，而新的监听器会在清理之后重新添加，避免内存泄漏。
重试了一次，问题完美解决。
这篇关于【学一点儿前端】单页面点击前进或后退按钮导致的内存泄露问题（history.listen监听器清除）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
