炫意html5
最早CSS3和HTML5移动技术网站之一

react 内存泄漏

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


然后我发现使用useState会导致内存泄漏,改用声明一个变量则不会有此警告,但是下面的dom不会发生更改

回答

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

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

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();
    }
}, [])

炫意HTML5 » react 内存泄漏

CSS3教程HTML5教程