问答

react 内存泄漏

作者:admin 2021-05-06 我要评论

在一个已经卸载的组件中 useEffect中调用一个一个定时器,定时器内部使用了useState更新状态,会发生内存泄漏的警告 然后我发现使用useState会导致内存泄漏,改...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

在一个已经卸载的组件中 useEffect中调用一个一个定时器,定时器内部使用了useState更新状态,会发生内存泄漏的警告
image.png
image.png
然后我发现使用useState会导致内存泄漏,改用声明一个变量则不会有此警告,但是下面的dom不会发生更改
image.png

###

useEffect这样调整下:


useEffect(() => {
    let num = 0;
    let unmount = false;
    let timer = setInerval(() => {
        num += 1;
        // 调用updateTimingNum时判断下组件是否已经卸载
        if(num > 25 && !unmount) {
            updateTimingNum(num);
            clearTimer();
        }
    }, 1000);
    
    function clearTimer() {
        clearInterval(timer);
    }
    
    // 组件卸载标记下并清除timer
    return () => {
        unmount = true;
        clearTimer();
    }
}, [])
###

https://zh-hans.reactjs.org/d...
通常,组件卸载时需要清除 effect 创建的诸如订阅或计时器 ID 等资源。要实现这一点,useEffect 函数需返回一个清除函数
你useEffect里返回一个清除函数把interval clear掉就行了

###

useEffect return一个清除的函数,你不调用setState当然不会re-render了。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • react 内存泄漏

    react 内存泄漏

  • 如何根据对象数组中的日期字段降序排序

    如何根据对象数组中的日期字段降序排序

  • golang时区的问题

    golang时区的问题

  • 关于hover优先级问题

    关于hover优先级问题

腾讯云代理商
海外云服务器