乐趣区

React16.7 hooks初试之setTimeout引发的bug

前言
周末尝试了一下 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 所以没有清除掉;

参考链接:
中文,英文的没有找到文档英文的也补一下吧 react github 也有人提到这个问题,学习了
完美解决:

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>
);
};

热门推荐

资源共享,一起学习
团队解散,我们该何去何从?
如何给 localStorage 设置一个有效期?

作者:苏南 – 首席填坑官链接:https://blog.csdn.net/weixin_… 交流:912594095、公众号:honeyBadger8 本文原创,著作权归作者所有。商业转载请联系 @IT·平头哥联盟获得授权,非商业转载请注明原链接及出处。

退出移动版