文档章节

React hooks初试之定时器引发的bug

苏南-首席填坑官
 苏南-首席填坑官
发布于 2018/12/06 07:50
字数 915
阅读 122
收藏 0

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/83758660 交流:912594095、公号:honeyBadger8 本文原创,著作权归作者所有。商业转载请联系@IT·平头哥联盟获得授权,非商业转载请注明原链接及出处。

© 著作权归作者所有

苏南-首席填坑官
粉丝 2
博文 21
码字总数 54603
作品 0
深圳
前端工程师
私信 提问
React Hooks(30分钟全掌握)

介绍React Hooks Hooks是React 16.8新增加的特性,Hooks可以让你不写class组件就能使用state和其他React特性。 例子 是要学的第一个'Hooks',上面就是简单的使用案例。 接下来是讲为什么在R...

forgetandforward
06/12
0
0
前端技术周刊 2019-03-25:React Hooks

2019-03-25 前端快爆 V8 7.4 发布。此版本支持了 JIT-less 启动模式 、WebAssembly Threads 以及私有类成员属性语法 ,并优化了函数形参实参数不匹配、原生访问器读写、流式解析等场景的性能...

阿里妈妈前端快爆
03/28
0
0
在react native中使用hooks

Facebook 于本月 12 号发布了 React Native v0.59,支持了hooks 的使用。让我们一起看下如何使用吧 什么是hooks ? 官方原话 Hooks are a new addition in React 16.8. They let you use sta...

又在写bug
04/03
0
0
React Hooks了解一下?超简单入门Hooks(上)

前言 先简单说一下Hooks是什么,在写React组件时候,有两种写法,一种是类写法,一种就是函数写法,Hooks主要服务的对象还是函数组件,因为函数组件相对类组件有些功能确实不好实现,比如生命...

king帅帅
04/26
0
0
React v16.8.2 发布,构建用户界面的 JavaScript 库

React v16.8.2 已发布,该版本没有引入任何新特性,主要是修复 bug。 React DOM 修复在 useEffect 中忽略 ReactDOM.render 的问题 (@gaearon in #14799) 修复移除空 portals 时出现的崩溃问题...

局长
02/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

局域网能互相ping通,ubuntu虚拟机不能上外网

【问题】 桥接模式老是无法上网,查看本机IP发现被分配了一个私网地址,猜测应该是虚拟DHCP服务器没有打开,于是查看Ubuntu的网络配置: /etc/network/interfaces 发现没有dhcp配置的信息,只...

tahiti_aa
19分钟前
0
0
以太坊助记词PHP开发包简介

以太坊助记词PHP开发包用来为PHP以太坊应用增加助记词和层级确定密钥支持能力。下载地址:以太坊助记词php开发包 。 1、开发包概述 以太坊助记词PHP开发包主要包括以下特性: 生成符合BIP39...

汇智网教程
昨天
2
0
系统监控-分布式调用链Skywalking

1. 为什么要使用分布式调用链技术? 随着公司业务的高速发展,公司服务之间的调用关系愈加复杂,如何理清并跟踪它们之间的调用关系就显的比较关键。线上每一个请求会经过多个业务系统,并产生...

秋日芒草
昨天
3
0
告诉自己的一些建议

摆脱学生心态 尽快发挥自己价值,让公司感知自己的存在,才是王道 选择比努力重要 自己附着的平台的经济体要是一个快速崛起的行业 转行趁早,年龄越大选择成本越高 趁早大量试错,学习新领域...

林怡丰
昨天
3
0
Windows下安装Redis

下载地址: 3.0老版已不维护更新:https://github.com/MicrosoftArchive/redis/releases 4.0版 https://github.com/tporadowski/redis/releases 中文官网:http://www.redis.net.cn/ https:......

Aeroever
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部