React16.7 useEffect初试之setTimeout引发的bug小记

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 中的所有订阅和异步任务

Can't perform a React state update on an unmounted component.,Read the Motivation to learn why we’re introducing Hooks to React

组件核心代码如下:

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新增的,它是componentDidMountcomponentDidUpdatecomponentWillUnmount三个生命周期的合集,
  • 也就是之前的写法,上面三生命周期里会执行到的操作,useEffect都会去做;
enter、leave方法
  • 很好理解,进场出场两函数,
  • 进场:加了个定时器,在N秒后执行出场即leave方法,这个逻辑是正常的,
  • 问题就出在手动执行leave,也就是onclick事件上,
问题原因:
  • 其实就是在点击事件的时候,没有获取到 timer的id,导致了定时器没有清除掉;

!!看图说话:

React v16.7 "Hooks" - What to Expect
解决思路:
  • 当然是看官方文档,hooks对我来说也是个新玩意,不会~
  • 1、useEffect方法里return 一个方法,它是可以在组件卸载时执行的,
  • 2、清除定时器它有自己的方式,const intervalRef = useRef();指定赋值后能同步更新,之前的timer手动执行没有拿到timer所以没有清除掉;
React v16.7 "Hooks" - What to Expect
参考链接:

中文,英文的没有找到

文档英文的也补一下吧

react github也有人提到这个问题,学习了

完美解决:

请取消useEffect cleanup function.in Notification 中的所有订阅和异步任务
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>
  );
};
宝剑锋从磨砺出,梅花香自苦寒来,做有温度的攻城狮!,公众号:honeyBadger8

热门推荐

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏糊一笑

模拟制作网易云音乐(AudioContext)

记得好早前在慕课网上看到一款可视化音乐播放器,当前是觉得很是神奇,还能这么玩。由于当时刚刚转行不久,好多东西看得稀里糊涂不明白,于是趁着现在有时间又重新梳理了一...

4485
来自专栏互联网杂技

新鲜出炉! Web开发人员必备资源

摘要:我们将会为Web开发人员提供多个资源。其中包括一个着陆页设计资源、两种降低屏幕刺眼程度的方法、一个用来实现拖曳网页布局的插件、一个用于整理date-pic...

3708
来自专栏Python攻城狮

通过Ajax请求的网页数据采集详解

目标网址:全球视野的中文财经网站fx168 目标数据:采集美元指数、上证指数、深证成指、恒生指数、现货黄金、布兰特原油、标普500、离岸汇率的每日价格及涨跌幅

2544
来自专栏张戈的专栏

修改博客文章链接为新窗口打开的方式

记得,前段时间卢松松博客放出一个关于文章链接是新窗口 or 原窗口浏览方式的投票,结果大部分人都投给了新窗口,而投给原窗口的我顿时有点奥特 Man 的感觉。经过...

3546
来自专栏葡萄城控件技术团队

【官宣】WijmoJS 2018 v3 正式发布,全面支持Angular7

WijmoJS(前端开发工具包)2018年度第三个大版本已经正式发布,本次更新除了全面支持Angular7之外,还允许用户使用Web Workers在前端更高效...

1232
来自专栏何俊林

斗鱼直播项目(已开源)

推荐一个项目,仿斗鱼直播的,功能强大,可以借鉴学习。 目录结构 开发环境 更新日志 应用截图 下载地址 接口文档说明 项目中使用到的三方库说明 项目反馈 参...

2K9
来自专栏九彩拼盘的叨叨叨

GitHub 上有意思的项目推荐

1883
来自专栏钱曙光的专栏

一周极客热文:一个7岁女孩告诉你的关于计算机编程的本质

一个七岁的女孩子,在花了一个小时学习编程后,她对编程得出了令人赞叹的体会。(如上图) 计算机很傻,它只会做那些你让它做的事。 编程真的很难!(你必须非常的认真!...

2119
来自专栏Jerry的SAP技术分享

SAP成都研究院C4C光明左使:SAP Cloud for Customer 使用SAP UI5的独特之处

2017年7月,SAP成都研究院C4C开发团队刚刚建立。某个周一早晨的Scrum meeting,新出现一位眉清目秀的小伙子,向大家自我介绍:“大家好,我叫杨x...

1522
来自专栏web编程技术分享

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第一节)

本教程是,原文章发布系统教程的精编重置版,会包含每一节的源码,以及修正之前的一些错误。因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一...

2103

扫码关注云+社区

领取腾讯云代金券