内容简介：周末尝试了一下React新的hooks功能,来封装一个组件，遇到一个bug，所以记录一下过程！大概意思是组件已经卸载了，但在卸载之后还执行了一个对组件更新的操作，这是一个无效的操作，但它表示应用程序中存在内存泄漏。要修复，请取消useEffect cleanup function.in Notification 中的所有订阅和异步任务
前言
周末尝试了一下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,导致了定时器没有清除掉； ！！看图说话：
解决思路：
useEffect const intervalRef = useRef()
参考链接：
英文的没有找到 英文的也补一下吧 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>
);
};
扫码关注公众号,获取更多学习资源
（转载本站文章请注明作者和出处 首席填坑官-苏南的博客 ）
作者：苏南 - 首席填坑官
本文链接：https://www.susouth.com/webpack/2018/12/06/react-question/
交流群：912594095、公众号：honeyBadger8
本文原创，著作权归作者所有。商业转载请联系首席填坑官-苏南获得授权，非商业转载请注明原链接及出处。
以上所述就是小编给大家介绍的《React16.7 hooks之setTimeout引发的bug小记》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
