React hooks初試之定時器引起的bug

前言

　　週末嘗試了一下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 (
    <div className={`${prefixCls}-notice`} style={{display:`${visible?'':'none'}`}}>
      {!!theme&&<p className={`${prefixCls}-notice-icon`}><Svg iconId={`svg-${theme}`} /></p>}
      <div className={`${prefixCls}-notice-content`}>
      ……//首席填坑官∙蘇南的專欄 交流：91259409五、公衆號：honeyBadger8
      </div>
      <p className={`${prefixCls}-notice-colse`} title="關閉" onClick={()=>leave("手動點擊的關閉")}><Svg/></p>
    </div>
  );
};

簡單分析：

• 首先useEffect方法，是react新增的，它是componentDidMount，componentDidUpdate、componentWillUnmount三個生命週期的合集，
• 也就是以前的寫法，上面三生命週期裏會執行到的操做，useEffect都會去作；

enter、leave方法

• 很好理解，進場、出場兩函數，
• 進場：加了個定時器，在N秒後執行出場即leave方法，這個邏輯是正常的，
• 問題就出在手動執行leave，也就是onclick事件上，

問題緣由：

• 其實就是在點擊事件的時候，沒有獲取到 timer的id,致使了定時器沒有清除掉； ！！看圖說話：

解決思路：

• 固然是看官方文檔，hooks對我來講也是個新玩意，不會～
• 一、useEffect方法裏return 一個方法，它是能夠在組件卸載時執行的，
• 二、清除定時器它有本身的方式，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);//首席填坑官∙蘇南的專欄 交流：91259409五、公衆號：honeyBadger8
      intervalRef.current = id;
    }
  }

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

  return (
    <div className={`${prefixCls}-notice`} style={{display:`${visible?'':'none'}`}}>
      {!!theme&&<p className={`${prefixCls}-notice-icon`}><Svg iconId={`svg-${theme}`} /></p>}
      <div className={`${prefixCls}-notice-content`}>
        ……//首席填坑官∙蘇南的專欄 交流：91259409五、公衆號：honeyBadger8
      </div>
      <p className={`${prefixCls}-notice-colse`} title="關閉" onClick={()=>leave("手動點擊的關閉")}><Svg/></p>
    </div>
  );
};

熱門推薦

• 資源共享，一塊兒學習成長
• 團隊解散，咱們該何去何從？
• 如何給localStorage設置一個有效期？

做者：蘇南 - 首席填坑官 連接：http://www.javashuo.com/article/p-aawoclhu-gh.html 交流：91259409五、公號：honeyBadger8 本文原創，著做權歸做者全部。商業轉載請聯繫@IT·平頭哥聯盟得到受權，非商業轉載請註明原連接及出處。