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

具体的示例

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

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，防止出现内存泄漏的情况

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

当前文章：React内存泄露常见问题解决方案
网页链接：http://wtcwzsj.com/article/djiicsj.html