专栏首页IT平头哥联盟React16.7 useEffect初试之setTimeout引发的bug小记
原创

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 条评论
登录 后参与评论

相关文章

  • 前端优化汇总,到底该不该做?

    大家好,这里是@IT·平头哥联盟,我是首席填坑官——苏南(South·Su),今天是国庆节的第二天,这个假期没有外出(不要问我为什么,自己脑补~?),前些天分享...

    苏南
  • 如何给localStorage设置一个有效期

    ​  这个话题其实在上次分享<小程序填坑记里讲过了>已经讲过(大佬可绕过哦~),但后来群里/评论都有些同学,提到了一些疑问,问能否单独整理一篇更为详细的分享,讲...

    苏南
  • 曾经面试踩过的坑,都在这里了~

      前段时间面试(包括阿里巴巴的电话面试),遇到过一些面试题,且面试中出现机率较高的提问/笔试,有些答的不是很好挂掉了,今天终于有时间整理出来分享给大家,希望对...

    苏南
  • 学了这一招,爷爷再也不用担心动态排序了

    在跟进一个MVC项目的后台数据显示,用户希望能点击表头来进行数据排序。虽然这个功能说简单也算简单,就一个Order by 完事;但因为其是使用EF的官方类作为数...

    谭广健
  • 甲基化肿瘤分型文章套路视频(甲基化预后分型)

    今天给大家介绍一篇五分的甲基化预后分型文章套路。文章以450k芯片作为train组,以27k芯片作为test组,对肿瘤进行分型,得到不同肿瘤...

    用户6927366
  • 死亡研究:何谓「好死」,研究者们总结了11 个重要指标

    大数据文摘
  • 敲代码前先构思一下-Graphviz-01

    系统:Windows 7 语言版本:Anaconda3-4.3.0.1-Windows-x86_64 编辑器:pycharm-community-2016.3....

    zishendianxia
  • 初创企业 Neurala宣布深度学习取得重大进展: 不需要云服务器,边缘学习(吴恩达评价)

    【新智元导读】 今年初完成1400万美元融资的人工智能初创企业 Neurala,昨日宣布在深度学习软件方面取得重大进展,其待决专利软件 Lifelong-DNN...

    新智元
  • 2018年已经到来,中年工程师们又被迫涨了一岁……

    岁末年初,2018年的元旦放假三天,已经被朋友圈刷的各种“18岁”照片刷屏。 ? 成龙大哥在唱《壮志在我胸》的时候,还是英气勃发的: ? 大哥2017年最新上映...

    企鹅号小编
  • 大数据揭示:女性比男性更关注医改 建档等是热门话题

    原标题:大数据揭示:女性比男性更关注医改 建档等是热门话题 ? “2017中国医改传播高峰论坛”现场。程春雨 摄 中新网北京12月10日电 (记者 程春雨)10...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券