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

什么是内存泄露

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

[[261494]]

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); 

具体的示例

1. 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 出现了如下的报错：

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

(1) 需要怎么解决啦?

添加如下代码即可：

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

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

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

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

2. Demo 2

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

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

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

解决方法：

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

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