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

意思为：我们不能在组件烧毁后配置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); 
} 

【编辑保举】

1. Linux kernel多个内存泄漏当地拒绝处事裂痕
2. NetBSD Kernfs Kernel内存泄漏裂痕
3. NetBSD Kernfs Kernel内存泄漏裂痕
4. ReactiveCocoa中隐藏的内存走漏及办理方案
5. 操作剧本注入裂痕进攻ReactJS应用措施

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!