React16.7 hooks初探之定时器引发的问题

前言

周末尝试了一下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();//首席填坑官∙苏南的专栏 交流：912594095、公众号：honeyBadger8
  }
  
  let enter = (