React16.7 hooks之setTimeout引發(fā)的bug
前言
周末嘗試了一下React新的hooks功能,來(lái)封裝一個(gè)組件椰拒，遇到一個(gè)bug，所以記錄一下過(guò)程溶诞！
報(bào)錯(cuò)如下：
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
大概意思是組件已經(jīng)卸載了糠排，但在卸載之后還執(zhí)行了一個(gè)對(duì)組件更新的操作凿傅，這是一個(gè)無(wú)效的操作蕴侣，但它表示應(yīng)用程序中存在內(nèi)存泄漏焰轻。要修復(fù)，請(qǐng)取消useEffect cleanup function.in Notification 中的所有訂閱和異步任務(wù)
Can't perform a React state update on an unmounted component.,Read the Motivation to learn why we’re introducing Hooks to React
組件核心代碼如下：
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,"事件的來(lái)源:",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`}>
……//首席填坑官?蘇南的專(zhuān)欄 交流：912594095、公眾號(hào)：honeyBadger8
</div>
<p className={`${prefixCls}-notice-colse`} title="關(guān)閉" onClick={()=>leave("手動(dòng)點(diǎn)擊的關(guān)閉")}><Svg/></p>
</div>
);
};
簡(jiǎn)單分析：
- 首先
useEffect方法狞膘，是react新增的揩懒，它是componentDidMount，componentDidUpdate挽封、componentWillUnmount三個(gè)生命周期的合集已球， - 也就是之前的寫(xiě)法，上面三生命周期里會(huì)執(zhí)行到的操作辅愿，useEffect都會(huì)去做智亮；
enter、leave方法
- 很好理解点待，
進(jìn)場(chǎng)阔蛉、出場(chǎng)兩函數(shù)， - 進(jìn)場(chǎng)：加了個(gè)定時(shí)器癞埠，在N秒后執(zhí)行
出場(chǎng)即leave方法状原，這個(gè)邏輯是正常的， - 問(wèn)題就出在手動(dòng)執(zhí)行
leave苗踪，也就是onclick事件上颠区，
問(wèn)題原因：
- 其實(shí)就是在點(diǎn)擊事件的時(shí)候，沒(méi)有獲取到 timer的id,導(dǎo)致了定時(shí)器沒(méi)有清除掉通铲；
１侠场！看圖說(shuō)話：
React v16.7 "Hooks" - What to Expect
解決思路：
- 當(dāng)然是看官方文檔颅夺，hooks對(duì)我來(lái)說(shuō)也是個(gè)新玩意央串，不會(huì)～
- 1、
useEffect方法里return 一個(gè)方法碗啄，它是可以在組件卸載時(shí)執(zhí)行的质和， - 2、清除定時(shí)器它有自己的方式稚字，
const intervalRef = useRef();指定賦值后能同步更新饲宿，之前的timer手動(dòng)執(zhí)行沒(méi)有拿到timer所以沒(méi)有清除掉；
React v16.7 "Hooks" - What to Expect
參考鏈接：
中文胆描，英文的沒(méi)有找到
文檔英文的也補(bǔ)一下吧
react github也有人提到這個(gè)問(wèn)題瘫想，學(xué)習(xí)了
完美解決：
請(qǐng)取消useEffect cleanup function.in Notification 中的所有訂閱和異步任務(wù)
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);//首席填坑官?蘇南的專(zhuān)欄 交流：912594095、公眾號(hào)：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`}>
……//首席填坑官?蘇南的專(zhuān)欄 交流：912594095昌讲、公眾號(hào)：honeyBadger8
</div>
<p className={`${prefixCls}-notice-colse`} title="關(guān)閉" onClick={()=>leave("手動(dòng)點(diǎn)擊的關(guān)閉")}><Svg/></p>
</div>
);
};
寶劍鋒從磨礪出国夜，梅花香自苦寒來(lái)，做有溫度的攻城獅!短绸，公眾號(hào)：honeyBadger8
熱門(mén)推薦
作者：蘇南 - 首席填坑官
鏈接：https://blog.csdn.net/weixin_43254766/article/details/83758660
交流：912594095窄驹、公眾號(hào)：honeyBadger8
本文原創(chuàng)朝卒，著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系@IT·平頭哥聯(lián)盟獲得授權(quán)乐埠，非商業(yè)轉(zhuǎn)載請(qǐng)注明原鏈接及出處抗斤。
