日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
React內(nèi)存泄露常見問題解決方案

什么是內(nèi)存泄露

  • 程序的運(yùn)行需要內(nèi)存。只要程序提出要求，操作系統(tǒng)或者運(yùn)行時(shí)(runtime)就必須供給內(nèi)存。
  • 對(duì)于持續(xù)運(yùn)行的服務(wù)進(jìn)程(daemon)，必須及時(shí)釋放不再用到的內(nèi)存。否則，內(nèi)存占用越來越高，輕則影響系統(tǒng)性能，重則導(dǎo)致進(jìn)程崩潰。
  • 不再用到的內(nèi)存，沒有及時(shí)釋放，就叫做內(nèi)存泄漏(memory leak)。

JavaScript 中常見的幾種內(nèi)存泄露

  • 全局變量引起的內(nèi)存泄漏
    •   
  
  
      
   
   
   
    1. function leaks(){  
      2.    
   
   
    2.  leak = '***'; //leak 成為一個(gè)全局變量，不會(huì)被回收 
      3.    
   
   
    3. } 
      4.
  • 閉包引起的內(nèi)存泄漏
    •   
  
  
      
   
   
   
    1. var leaks = (function(){  
      2.    
   
   
    2.  var leak = '***';// 被閉包所引用，不會(huì)被回收 
      3.    
   
   
    3.  return function(){ 
      4.    
   
   
    4.  console.log(leak); 
      5.    
   
   
    5.  } 
      6.    
   
   
    6. })() 
      7.
  • dom清空或刪除時(shí)，事件未清除導(dǎo)致的內(nèi)存泄漏
    •   
  
  
      
   
   
   
    1. document.querySelector("#demo").addEventListener('click', myFunction); 
      2.    
   
   
    2. var para1=document.querySelector("#demo"); 
      3.    
   
   
    3. para1.parentNode.removeChild(para1); 
      4.

如果我們?cè)跊]有取消 click 方法前去銷毀了 para1 節(jié)點(diǎn)，就會(huì)造成內(nèi)存泄露。

正確的做法：

 
 
 
    
  
  
  
  1. document.querySelector("#demo").addEventListener('click', myFunction); 
    2.   
  
  
  2. // 我們需要在刪除節(jié)點(diǎn)前清除掛載的 click 方法 
    3.   
  
  
  3. document.querySelector("#demo").removeEventListener("click", myFunction); 
    4.   
  
  
  4. var para1=document.querySelector("p1"); 
    5.   
  
  
  5. para1.parentNode.removeChild(para1); 
    6.

具體的示例

1. Demo1：

 
 
 
    
  
  
  
  1. componentWillMount: function () { 
    2.   
  
  
  2.  var onLogin = this.props.onLogin || function () {}, 
    3.   
  
  
  3.  onLogout = this.props.onLogout || function () {}; 
    4.   
  
  
  4.  this.on('authChange', function () { 
    5.   
  
  
  5.  console.log('user authenticated:', this.state.isAuthenticated); 
    6.   
  
  
  6.  return this.state.isAuthenticated 
    7.   
  
  
  7.  ? onLogin(this.state) 
    8.   
  
  
  8.  : onLogout(this.state); 
    9.   
  
  
  9.  }.bind(this)); 
    10.   
  
  
  10. } 
    11.

上面的例子是在 Stack Overflow 上看到的，樓主在componentWillMount的時(shí)候掛載了authChange事件，然后 react 出現(xiàn)了如下的報(bào)錯(cuò)：

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

意思為：我們不能在組件銷毀后設(shè)置state，防止出現(xiàn)內(nèi)存泄漏的情況

(1) 需要怎么解決啦?

添加如下代碼即可：

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

很明顯這種情況就是在 dom 結(jié)構(gòu)銷毀的時(shí)候，事件卻沒有清除導(dǎo)致的內(nèi)存泄漏，所以我們需要在componentWillUnmount的時(shí)候去清除掛載的方法

(2) react 內(nèi)存泄露相關(guān)解釋和解決方法

這里就提到了內(nèi)存泄露，當(dāng)我們?cè)谑褂檬录壎?，setInterval，setTimeOut 或一些函數(shù)的時(shí)候，但是卻沒有在組件銷毀前清除的時(shí)候會(huì)造成內(nèi)存泄露。這里我們手動(dòng)的再componentWillUnmount去清除相關(guān)的方法即可。

2. Demo 2

下面這種就是常見的情況：

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

設(shè)置了一個(gè)timer延遲設(shè)置state，然而在延遲的這段時(shí)間，組件已經(jīng)銷毀，則造成此類問題

解決方法：

利用生命周期鉤子函數(shù)：componentWillUnmount

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

本文標(biāo)題：React內(nèi)存泄露常見問題解決方案
地址分享：http://www.dlmjj.cn/article/djiicsj.html