React16.7 hooks初試之setTimeout引發的bug

Jensen 發布于2019-08-23 13:55 / 1123人閱讀

摘要：前言周末嘗試了一下新的功能來封裝一個組件，遇到一個，所以記錄一下過程報錯如下大概意思是組件已經卸載了，但在卸載之后還執行了一個對組件更新的操作，這是一個無效的操作，但它表示應用程序中存在內存泄漏。

前言

　　周末嘗試了一下React新的hooks功能,來封裝一個組件，遇到一個bug，所以記錄一下過程！

報錯如下：

Warning: 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 a useEffect cleanup function.in Notification

大概意思是組件已經卸載了，但在卸載之后還執行了一個對組件更新的操作，這是一個無效的操作，但它表示應用程序中存在內存泄漏。要修復，請取消useEffect cleanup function.in Notification 中的所有訂閱和異步任務

組件核心代碼如下：

function Notification(props){
  var timer = null;
  const [visible, setVisible] = useState(false);
  let {title,description,duration,theme,onClose,}= props;
  let leave = (source="") => {
    clearTimeout(timer);
    setVisible(false);
    console.log("注意這里是 leave方法里，timer的id:"+timer,"事件的來源:",source);
    console.log("leave result:",timer);
    onClose&&onClose();
  }
  
  let enter = () => {
    setVisible(true);
    if( duration > 0 ){
      let timer = setTimeout(() => {
        console.log(`auto carried out`,timer) //timer Number Id 
        leave(`Time to`);
      }, duration*1000);
      console.log(`enter方法里，timer的id:`,timer) //timer Number Id 
    }
  }

  useEffect(()=>{
    enter();
  },[])

  return (
    
      {!!theme&&}
      
      ……//首席填坑官?蘇南的專欄 交流：912594095、公眾號：honeyBadger8
      
      leave("手動點擊的關閉")}>
    
  );
};

簡單分析：

首先useEffect方法，是react新增的，它是componentDidMount，componentDidUpdate、componentWillUnmount三個生命周期的合集，

也就是之前的寫法，上面三生命周期里會執行到的操作，useEffect都會去做；

enter、leave方法

很好理解，進場、出場兩函數，

進場：加了個定時器，在N秒后執行出場即leave方法，這個邏輯是正常的，

問題就出在手動執行leave，也就是onclick事件上，

問題原因：

其實就是在點擊事件的時候，沒有獲取到 timer的id,導致了定時器沒有清除掉；

！！看圖說話：

解決思路：

當然是看官方文檔，hooks對我來說也是個新玩意，不會～

1、useEffect方法里return 一個方法，它是可以在組件卸載時執行的，

2、清除定時器它有自己的方式，const intervalRef = useRef();指定賦值后能同步更新，之前的timer手動執行沒有拿到timer所以沒有清除掉；

參考鏈接：

中文，英文的沒有找到
文檔英文的也補一下吧
react github也有人提到這個問題，學習了

完美解決：

function Notification(props){
  var timer = null;
  const [visible, setVisible] = useState(false);
  let {title,description,duration,theme,onClose,}= props;
  const intervalRef = useRef(null);
  let leave = (source="") => {
    clearTimeout(intervalRef.current);
    setVisible(false);
    console.log("leave result:",source,intervalRef);
    onClose&&onClose();
  }
  
  let enter = () => {
    setVisible(true);
    if( duration > 0 ){
      let id = setTimeout(() => {
        console.log(`auto carried out`,intervalRef) //timer Number Id 
        leave(`Time to`);
      }, duration*1000);//首席填坑官?蘇南的專欄 交流：912594095、公眾號：honeyBadger8
      intervalRef.current = id;
    }
  }

  useEffect(()=>{
    enter();
    return ()=>clearTimeout(intervalRef.current);
  },[])

  return (
    
      {!!theme&&}
      
        ……//首席填坑官?蘇南的專欄 交流：912594095、公眾號：honeyBadger8
      
      leave("手動點擊的關閉")}>
    
  );
};

熱門推薦

資源共享，一起學習

團隊解散，我們該何去何從？

如何給localStorage設置一個有效期？

作者：蘇南 - 首席填坑官
鏈接：https://blog.csdn.net/weixin_...
交流：912594095、公眾號：honeyBadger8
本文原創，著作權歸作者所有。商業轉載請聯系@IT·平頭哥聯盟獲得授權，非商業轉載請注明原鏈接及出處。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99778.html

精讀《Function Component 入門》

摘要：比如就是一種，它可以用來管理狀態返回的結果是數組，數組的第一項是值，第二項是賦值函數，函數的第一個參數就是默認值，也支持回調函數。而之所以輸出還是正確的，原因是的回調函數中，值永遠指向最新的值，因此沒有邏輯漏洞。 1. 引言如果你在使用 React 16，可以嘗試 Function Component 風格，享受更大的靈活性。但在嘗試之前，最好先閱讀本文，對 Function Com...

Scholer 2019-08-26 13:56 評論0 收藏0
理解 React Hooks 的 Capture Value 特性

摘要：在讀了一些文章后，大致是找到自己總是掉坑的原因了沒理解中的特性。通過這個示例，相信會比較容易地理解特性，并如何使用來暫時繞過它。在知道并理解這個特性后，有助于進一步熟悉了的運行機制，減少掉坑的次數。由于剛使用 React hooks 不久，對它的脾氣還拿捏不準，掉了很多次坑；這里的坑的意思并不是說 React hooks 的設計有問題，而是我在使用的時候，因為還沒有跟上它的理念導...

curlyCheng 2019-08-26 13:38 評論0 收藏0
React Hooks系列之useState

摘要：在出現之前，組件添加，只能在中完成。方式之后，可以在組件中創建了，不用再每次都需要創建一個，更加函數式了。展示了如何初始化表單數據，和更新對應的字段在React Hooks出現之前，組件添加state，只能在class中完成。 class方式 showImg(https://segmentfault.com/img/remote/1460000018860676); React 1...

SimonMa 2019-08-23 16:55 評論0 收藏0
React 源碼漂流（一）之起航

摘要：在前端開發過程中，源碼解讀是必不可少的一個環節，我們直接進入主題，注意當前版本號。注意包文件僅僅是的必要的功能性的定義，它必須要結合一起使用下是，原生環境下是。在前端開發過程中，源碼解讀是必不可少的一個環節，我們直接進入主題，注意當前 React 版本號 16.8.6。注意：react 包文件僅僅是 React components 的必要的、功能性的定義，它必須要結合 React...

Mr_zhang 2019-08-26 10:20 評論0 收藏0
React Hook 不完全指南

摘要：使用完成副作用操作，賦值給的函數會在組件渲染到屏幕之后。如此很容易產生，并且導致邏輯不一致。同時，這也是很多人將與狀態管理庫結合使用的原因之一。當我們通過的第二個數組類型參數，指明當前的依賴，就能避免不相關的執行開銷了。前言本文內容大部分參考了 overreacted.io 博客一文，同時結合 React Hook 官方文章，整理并歸納一些筆記和輸出個人的一些理解什么是 Hoo...

Lin_R 2019-08-26 13:50 評論0 收藏0