成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React16.7 hooks初試之setTimeout引發(fā)的bug

Jensen / 1128人閱讀

摘要：前言周末嘗試了一下新的功能來(lái)封裝一個(gè)組件，遇到一個(gè)，所以記錄一下過(guò)程報(bào)錯(cuò)如下大概意思是組件已經(jīng)卸載了，但在卸載之后還執(zhí)行了一個(gè)對(duì)組件更新的操作，這是一個(gè)無(wú)效的操作，但它表示應(yīng)用程序中存在內(nèi)存泄漏。

前言

　　周末嘗試了一下React新的hooks功能,來(lái)封裝一個(gè)組件，遇到一個(gè)bug，所以記錄一下過(guò)程！

報(bào)錯(cuò)如下： 
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

大概意思是組件已經(jīng)卸載了，但在卸載之后還執(zhí)行了一個(gè)對(duì)組件更新的操作，這是一個(gè)無(wú)效的操作，但它表示應(yīng)用程序中存在內(nèi)存泄漏。要修復(fù)，請(qǐng)取消useEffect cleanup function.in Notification 中的所有訂閱和異步任務(wù)

組件核心代碼如下： 
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,"事件的來(lái)源:",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、公眾號(hào)：honeyBadger8
      

      
leave("手動(dòng)點(diǎn)擊的關(guān)閉")}>

    

  );
};
簡(jiǎn)單分析：

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

也就是之前的寫(xiě)法，上面三生命周期里會(huì)執(zhí)行到的操作，useEffect都會(huì)去做；

enter、leave方法

很好理解，進(jìn)場(chǎng)、出場(chǎng)兩函數(shù)，

進(jìn)場(chǎng)：加了個(gè)定時(shí)器，在N秒后執(zhí)行出場(chǎng)即leave方法，這個(gè)邏輯是正常的，

問(wèn)題就出在手動(dòng)執(zhí)行leave，也就是onclick事件上，

問(wèn)題原因：

其實(shí)就是在點(diǎn)擊事件的時(shí)候，沒(méi)有獲取到 timer的id,導(dǎo)致了定時(shí)器沒(méi)有清除掉；

??！看圖說(shuō)話：

解決思路：

當(dāng)然是看官方文檔，hooks對(duì)我來(lái)說(shuō)也是個(gè)新玩意，不會(huì)～

1、useEffect方法里return 一個(gè)方法，它是可以在組件卸載時(shí)執(zhí)行的，

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

參考鏈接：

中文，英文的沒(méi)有找到
文檔英文的也補(bǔ)一下吧
react github也有人提到這個(gè)問(wèn)題，學(xué)習(xí)了

完美解決： 

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、公眾號(hào)：honeyBadger8
      intervalRef.current = id;
    }
  }

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

  return (
    

      {!!theme&&
}
      

        ……//首席填坑官?蘇南的專欄 交流：912594095、公眾號(hào)：honeyBadger8
      

      
leave("手動(dòng)點(diǎn)擊的關(guān)閉")}>

    

  );
};

熱門(mén)推薦

資源共享，一起學(xué)習(xí)

團(tuán)隊(duì)解散，我們?cè)摵稳ズ螐模?/p>

如何給localStorage設(shè)置一個(gè)有效期？

作者：蘇南 - 首席填坑官
鏈接：https://blog.csdn.net/weixin_...
交流：912594095、公眾號(hào)：honeyBadger8
本文原創(chuàng)，著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系@IT·平頭哥聯(lián)盟獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明原鏈接及出處。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99778.html

相關(guān)文章

  • 精讀《Function Component 入門(mén)》

    摘要：比如就是一種，它可以用來(lái)管理狀態(tài)返回的結(jié)果是數(shù)組，數(shù)組的第一項(xiàng)是值，第二項(xiàng)是賦值函數(shù)，函數(shù)的第一個(gè)參數(shù)就是默認(rèn)值，也支持回調(diào)函數(shù)。而之所以輸出還是正確的，原因是的回調(diào)函數(shù)中，值永遠(yuǎn)指向最新的值，因此沒(méi)有邏輯漏洞。 1. 引言 如果你在使用 React 16，可以嘗試 Function Component 風(fēng)格，享受更大的靈活性。但在嘗試之前，最好先閱讀本文，對(duì) Function Com...

    Scholer 評(píng)論0 收藏0

  • 理解 React Hooks 的 Capture Value 特性

    摘要：在讀了一些文章后，大致是找到自己總是掉坑的原因了沒(méi)理解中的特性。通過(guò)這個(gè)示例，相信會(huì)比較容易地理解特性，并如何使用來(lái)暫時(shí)繞過(guò)它。在知道并理解這個(gè)特性后，有助于進(jìn)一步熟悉了的運(yùn)行機(jī)制，減少掉坑的次數(shù)。 由于剛使用 React hooks 不久，對(duì)它的脾氣還拿捏不準(zhǔn)，掉了很多次坑；這里的 坑 的意思并不是說(shuō) React hooks 的設(shè)計(jì)有問(wèn)題，而是我在使用的時(shí)候，因?yàn)檫€沒(méi)有跟上它的理念導(dǎo)...

    curlyCheng 評(píng)論0 收藏0

  • React Hooks系列之useState

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

    SimonMa 評(píng)論0 收藏0

  • React 源碼漂流（一）之 起航

    摘要：在前端開(kāi)發(fā)過(guò)程中，源碼解讀是必不可少的一個(gè)環(huán)節(jié)，我們直接進(jìn)入主題，注意當(dāng)前版本號(hào)。注意包文件僅僅是的必要的功能性的定義，它必須要結(jié)合一起使用下是，原生環(huán)境下是。 在前端開(kāi)發(fā)過(guò)程中，源碼解讀是必不可少的一個(gè)環(huán)節(jié)，我們直接進(jìn)入主題，注意當(dāng)前 React 版本號(hào) 16.8.6。 注意：react 包文件僅僅是 React components 的必要的、功能性的定義，它必須要結(jié)合 React...

    Mr_zhang 評(píng)論0 收藏0

  • React Hook 不完全指南

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

    Lin_R 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<