摘要：前言周末尝试了一下新的功能来封装一个组件，遇到一个，所以记录一下过程报错如下大概意思是组件已经卸载了，但在卸载之后还执行了一个对组件更新的操作，这是一个无效的操作，但它表示应用程序中存在内存泄漏。
前言
周末尝试了一下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();
}
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 (
{!!theme&&}
……//首席填坑官∙苏南的专栏 交流：912594095、公众号：honeyBadger8
leave("手动点击的关闭")}>
);
};
简单分析：
首先useEffect方法，是react新增的，它是componentDidMount，componentDidUpdate、componentWillUnmount三个生命周期的合集，
也就是之前的写法，上面三生命周期里会执行到的操作，useEffect都会去做；
很好理解，进场、出场两函数，
进场：加了个定时器，在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();
}
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 (
{!!theme&&}
……//首席填坑官∙苏南的专栏 交流：912594095、公众号：honeyBadger8
leave("手动点击的关闭")}>
);
};
热门推荐
资源共享，一起学习
团队解散，我们该何去何从？
如何给localStorage设置一个有效期？
作者：苏南 - 首席填坑官
链接：https://blog.csdn.net/weixin_...
交流：912594095、公众号：honeyBadger8
本文原创，著作权归作者所有。商业转载请联系@IT·平头哥联盟获得授权，非商业转载请注明原链接及出处。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/99778.html
摘要：比如就是一种，它可以用来管理状态返回的结果是数组，数组的第一项是值，第二项是赋值函数，函数的第一个参数就是默认值，也支持回调函数。而之所以输出还是正确的，原因是的回调函数中，值永远指向最新的值，因此没有逻辑漏洞。 1. 引言 如果你在使用 React 16，可以尝试 Function Component 风格，享受更大的灵活性。但在尝试之前，最好先阅读本文，对 Function Com...
摘要：在读了一些文章后，大致是找到自己总是掉坑的原因了没理解中的特性。通过这个示例，相信会比较容易地理解特性，并如何使用来暂时绕过它。在知道并理解这个特性后，有助于进一步熟悉了的运行机制，减少掉坑的次数。 由于刚使用 React hooks 不久，对它的脾气还拿捏不准，掉了很多次坑；这里的 坑 的意思并不是说 React hooks 的设计有问题，而是我在使用的时候，因为还没有跟上它的理念导...
摘要：在出现之前，组件添加，只能在中完成。方式之后，可以在组件中创建了，不用再每次都需要创建一个，更加函数式了。展示了如何初始化表单数据，和更新对应的字段 在React Hooks出现之前，组件添加state， 只能在class中完成。 class方式 showImg(https://segmentfault.com/img/remote/1460000018860676); React 1...
摘要：在前端开发过程中，源码解读是必不可少的一个环节，我们直接进入主题，注意当前版本号。注意包文件仅仅是的必要的功能性的定义，它必须要结合一起使用下是，原生环境下是。 在前端开发过程中，源码解读是必不可少的一个环节，我们直接进入主题，注意当前 React 版本号 16.8.6。 注意：react 包文件仅仅是 React components 的必要的、功能性的定义，它必须要结合 React...
摘要：使用完成副作用操作，赋值给的函数会在组件渲染到屏幕之后。如此很容易产生，并且导致逻辑不一致。同时，这也是很多人将与状态管理库结合使用的原因之一。当我们通过的第二个数组类型参数，指明当前的依赖，就能避免不相关的执行开销了。 前言 本文内容大部分参考了 overreacted.io 博客一文，同时结合 React Hook 官方 文章，整理并归纳一些笔记和输出个人的一些理解 什么是 Hoo...
阅读 2135·2021-09-08 09:45
阅读 3092·2021-09-08 09:45
阅读 2896·2019-08-30 15:54
阅读 3168·2019-08-26 13:54
阅读 1201·2019-08-26 13:26
阅读 1226·2019-08-26 13:23
阅读 753·2019-08-23 17:57
阅读 2025·2019-08-23 17:14
