共计 2941 个字符，预计需要花费 8 分钟才能阅读完成。
前言
周末尝试了一下 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·平头哥联盟获得授权，非商业转载请注明原链接及出处。
