前言
週末嘗試了一下React新的hooks功能,來封裝一個組件,遇到一個bug,所以記錄一下過程!
報錯如下:
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.in Notification
大概意思是組件已經卸載了,但在卸載之後還執行了一個對組件更新的操作,這是一個無效的操作,但它表示應用程序中存在內存泄漏。要修復,請取消useEffect cleanup function.in Notification 中的所有訂閱和異步任務
組件核心代碼如下:
function Notification(props){ var timer = null; const [visible, setVisible] = useState(false); let {title,description,duration,theme,onClose,}= props; let leave = (source='') => { clearTimeout(timer); setVisible(false); console.log("注意這裏是 leave方法裏,timer的id:"+timer,"事件的來源:",source); console.log("leave result:",timer); onClose&&onClose(); } let enter = () => { setVisible(true); if( duration > 0 ){ let timer = setTimeout(() => { console.log(`auto carried out`,timer) //timer Number Id leave(`Time to`); }, duration*1000); console.log(`enter方法裏,timer的id:`,timer) //timer Number Id } } useEffect(()=>{ enter(); },[]) return ( <div className={`${prefixCls}-notice`} style={{display:`${visible?'':'none'}`}}> {!!theme&&<p className={`${prefixCls}-notice-icon`}><Svg iconId={`svg-${theme}`} /></p>} <div className={`${prefixCls}-notice-content`}> ……//首席填坑官∙蘇南的專欄 交流:912594095、公衆號:honeyBadger8 </div> <p className={`${prefixCls}-notice-colse`} title="關閉" onClick={()=>leave("手動點擊的關閉")}><Svg/></p> </div> ); };
簡單分析:
- 首先
useEffect
方法,是react新增的,它是componentDidMount
,componentDidUpdate
、componentWillUnmount
三個生命週期的合集, - 也就是之前的寫法,上面三生命週期裏會執行到的操作,useEffect都會去做;
enter、leave方法
- 很好理解,
進場
、出場
兩函數, - 進場:加了個定時器,在N秒後執行
出場
即leave方法,這個邏輯是正常的, - 問題就出在手動執行
leave
,也就是onclick事件上,
問題原因:
- 其實就是在點擊事件的時候,沒有獲取到 timer的id,導致了定時器沒有清除掉;
!!看圖說話:
解決思路:
- 當然是看官方文檔,hooks對我來說也是個新玩意,不會~
- 1、
useEffect
方法裏return 一個方法,它是可以在組件卸載時執行的, - 2、清除定時器它有自己的方式,
const intervalRef = useRef()
;指定賦值後能同步更新,之前的timer手動執行沒有拿到timer所以沒有清除掉;
參考鏈接:
完美解決:
function Notification(props){ var timer = null; const [visible, setVisible] = useState(false); let {title,description,duration,theme,onClose,}= props; const intervalRef = useRef(null); let leave = (source='') => { clearTimeout(intervalRef.current); setVisible(false); console.log("leave result:",source,intervalRef); onClose&&onClose(); } let enter = () => { setVisible(true); if( duration > 0 ){ let id = setTimeout(() => { console.log(`auto carried out`,intervalRef) //timer Number Id leave(`Time to`); }, duration*1000);//首席填坑官∙蘇南的專欄 交流:912594095、公衆號:honeyBadger8 intervalRef.current = id; } } useEffect(()=>{ enter(); return ()=>clearTimeout(intervalRef.current); },[]) return ( <div className={`${prefixCls}-notice`} style={{display:`${visible?'':'none'}`}}> {!!theme&&<p className={`${prefixCls}-notice-icon`}><Svg iconId={`svg-${theme}`} /></p>} <div className={`${prefixCls}-notice-content`}> ……//首席填坑官∙蘇南的專欄 交流:912594095、公衆號:honeyBadger8 </div> <p className={`${prefixCls}-notice-colse`} title="關閉" onClick={()=>leave("手動點擊的關閉")}><Svg/></p> </div> ); };
熱門推薦
作者:蘇南 - 首席填坑官 鏈接:https://blog.csdn.net/weixin_43254766/article/details/84842106 交流:912594095、公衆號:
honeyBadger8
本文原創,著作權歸作者所有。商業轉載請聯繫@IT·平頭哥聯盟
獲得授權,非商業轉載請註明原鏈接及出處。