|
|
51CTO旗下网站
|
|
移动端

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

程序的运行需要内存。只要程序提出要求,操作系统或者运行时(runtime)就必须供给内存。不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak)。

作者:沪漂程序员的生活史来源:今日头条|2019-04-04 13:11

什么是内存泄露

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

JavaScript 中常见的几种内存泄露

  • 全局变量引起的内存泄漏
    1. function leaks(){  
    2.  leak = '***'; //leak 成为一个全局变量,不会被回收 
  • 闭包引起的内存泄漏
    1. var leaks = (function(){  
    2.  var leak = '***';// 被闭包所引用,不会被回收 
    3.  return function(){ 
    4.  console.log(leak); 
    5.  } 
    6. })() 
  • dom清空或删除时,事件未清除导致的内存泄漏
    1. document.querySelector("#demo").addEventListener('click', myFunction); 
    2. var para1=document.querySelector("#demo"); 
    3. para1.parentNode.removeChild(para1); 

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

正确的做法:

  1. document.querySelector("#demo").addEventListener('click', myFunction); 
  2. // 我们需要在删除节点前清除挂载的 click 方法 
  3. document.querySelector("#demo").removeEventListener("click", myFunction); 
  4. var para1=document.querySelector("p1"); 
  5. para1.parentNode.removeChild(para1); 

具体的示例

1. Demo1:

  1. componentWillMount: function () { 
  2.  var onLogin = this.props.onLogin || function () {}, 
  3.  onLogout = this.props.onLogout || function () {}; 
  4.  this.on('authChange', function () { 
  5.  console.log('user authenticated:', this.state.isAuthenticated); 
  6.  return this.state.isAuthenticated 
  7.  ? onLogin(this.state) 
  8.  : onLogout(this.state); 
  9.  }.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) 需要怎么解决啦?

添加如下代码即可:

  1. componentWillUnmount: function () { 
  2. this.off('authChange', this.authChange); 
  3. this.authChange = null

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

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

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

2. Demo 2

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

  1. this.pwdErrorTimer = setTimeout(() => { 
  2.  this.setState({ 
  3.  showPwdError:false 
  4.  }) 
  5. }, 1000); 

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

解决方法:

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

  1. componentWillUnmount(){ 
  2.  clearTimeout(this.pwdErrorTimer); 
  3.  clearTimeout(this.userNameErrorTimer); 

【编辑推荐】

  1. Linux kernel多个内存泄露本地拒绝服务漏洞
  2. NetBSD Kernfs Kernel内存泄露漏洞
  3. NetBSD Kernfs Kernel内存泄露漏洞
  4. ReactiveCocoa中潜在的内存泄漏及解决方案
  5. 利用脚本注入漏洞攻击ReactJS应用程序
【责任编辑:赵宁宁 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

防火墙大佬修炼手册

防火墙大佬修炼手册

网工达人必备
共20章 | 捷哥CCIE

304人订阅学习

Jenkins Pipeline可持续化集成

Jenkins Pipeline可持续化集成

优化运维流水线
共3章 | youerning

222人订阅学习

笑熬浆糊之职场那些事

笑熬浆糊之职场那些事

IT人的职场心法
共22章 | Bear_Boss

84人订阅学习

读 书 +更多

XML基础教程

本书分为8章。第1章主要对XML做了简单的介绍。第2章详细讲解规范的XML文件。第3章主要讲解有效的XML文件,特别重点讲解DTD文件。第4章讲解C...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客