今天測試分配了一個比較奇怪的問題，在單頁面應(yīng)用中，反復(fù)點擊“上一步”和“下一步”按鈕時，界面表現(xiàn)出逐漸變得卡頓。為分析這一問題，我用Chrome的性能監(jiān)控工具進行了瀏覽器性能錄制。結(jié)果顯示，每次點擊“上一步”按鈕時，JavaScript堆內(nèi)存（JS Heap）和事件監(jiān)聽器（listener）的數(shù)量顯著增加，并且隨著點擊次數(shù)的增加，這種增長趨勢變得越來越明顯，所需的時間也逐漸延長。如圖所示：

于是我開始查找代碼里的監(jiān)聽器，發(fā)現(xiàn)了這個監(jiān)聽代碼

history.listen((_,type)=>{if (type==='POP'){setMchInfo({...mchInfo})}
})

這是一個用于監(jiān)聽瀏覽器歷史記錄變化的方法。當歷史記錄發(fā)生變化時，傳遞給listen方法的回調(diào)函數(shù)會被調(diào)用。
而我點擊上一步時，會觸發(fā)這么一個函數(shù)

const prevStep = () => {history.go(-1);
};

而這個函數(shù)就會觸發(fā)history.listen，從而增加監(jiān)聽器數(shù)量
這樣，我們需要在監(jiān)聽器用完的時候直接移除添加的監(jiān)聽器

useEffect(() => {const unlisten = history.listen((_, type) => {if (type === 'POP') {setMchInfo({ ...mchInfo });}});return () => {unlisten();};
}, [history]);

unlisten是history.listen返回的函數(shù)，用于移除之前添加的監(jiān)聽器，useEffect鉤子的清理函數(shù)機制保證了在history變化時，只有舊的監(jiān)聽器會被移除，而新的監(jiān)聽器會在清理之后重新添加，避免內(nèi)存泄漏。
重試了一次，問題完美解決。