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

jiezi

6 年前

前言
周末尝试了一下 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();
}

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

useEffect(()=>{
enter();
return ()=>clearTimeout(intervalRef.current);
},[])