react 内存泄露常见问题解决方案

什么是内存泄露

程序的运行需要内存。只要程序提出要求,操作系统或者运行时(runtime)就必须供给内存。对于持续运行的服务进程(daemon),必须及时释放不再用到的内存。否则,内存占用越来越高,轻则影响系统性能,重则导致进程崩溃。不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak)。

JavaScript 中常见的几种内存泄露

全局变量引起的内存泄漏

function leaks(){
leak = '***'; //leak 成为一个全局变量,不会被回收
}
闭包引起的内存泄漏

var leaks = (function(){
var leak = '***';// 被闭包所引用,不会被回收
return function(){
console.log(leak);
}
})()
dom清空或删除时,事件未清除导致的内存泄漏

document.querySelector("#demo").addEventListener('click', myFunction);
var para1=document.querySelector("#demo");
para1.parentNode.removeChild(para1);

如果我们在没有取消 click 方法前去销毁了 para1 节点,就会造成内存泄露。

正确的做法:

document.querySelector("#demo").addEventListener('click', myFunction);
// 我们需要在删除节点前清除挂载的 click 方法


document.querySelector("#demo").removeEventListener("click", myFunction);
var para1=document.querySelector("p1");
para1.parentNode.removeChild(para1);

具体的示例

Demo1:

componentWillMount: function () {
var onLogin = this.props.onLogin || function () {},
onLogout = this.props.onLogout || function () {};
this.on('authChange', function () {
console.log('user authenticated:', this.state.isAuthenticated);
return this.state.isAuthenticated
? onLogin(this.state)
: onLogout(this.state);
}.bind(this));
}

上面的例子是在 Stack Overflow 上看到的,楼主在componentWillMount的时候挂载了authChange事件,然后 react 出现了如下的报错:

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 the componentWillUnmount method”

意思为:我们不能在组件销毁后设置state,防止出现内存泄漏的情况

需要怎么解决啦?

添加如下代码即可

componentWillUnmount: function () {
this.off('authChange', this.authChange);
this.authChange = null;
}

很明显这种情况就是在 dom 结构销毁的时候,事件却没有清除导致的内存泄漏,所以我们需要在componentWillUnmount的时候去清除挂载的方法

react 内存泄露相关解释和解决方法

这里就提到了内存泄露,当我们在使用事件绑定,setInterval,setTimeOut 或一些函数的时候,但是却没有在组件销毁前清除的时候会造成内存泄露。这里我们手动的再componentWillUnmount去清除相关的方法即可。

Demo 2

下面这种就是常见的情况:

this.pwdErrorTimer = setTimeout(() => {
this.setState({
showPwdError:false
})
}, 1000);

设置了一个timer延迟设置state,然而在延迟的这段时间,组件已经销毁,则造成此类问题

解决方法:

利用生命周期钩子函数:componentWillUnmount

componentWillUnmount(){
clearTimeout(this.pwdErrorTimer);
clearTimeout(this.userNameErrorTimer);
}