React的生命周期

  • 生命周期是一個抽象的概念,分成了很多個階段:
    \triangleright 1.比如裝載階段(Mount),組件第一次在DOM樹中被渲染的過程;
    \triangleright 2.比如更新過程(Update),組件狀態(tài)發(fā)生變化,重新更新渲染的過程;
    \triangleright 3.比如卸載過程(Unmount),組件從DOM樹中被移除的過程;

  • React內(nèi)部為了告訴我們當前處于哪些階段,會對我們組件內(nèi)部實現(xiàn)的某些函數(shù)進行回調(diào),這些函數(shù)就是生命周期函數(shù):
    \triangleright 1.比如實現(xiàn)componentDidMount函數(shù):組件已經(jīng)掛載到DOM上時,就會回調(diào);
    \triangleright 2.比如實現(xiàn)componentDidUpdate函數(shù):組件已經(jīng)發(fā)生了更新時,就會回調(diào);
    \triangleright 3.比如實現(xiàn)componentWillUnmount函數(shù):組件即將被移除時,就會回調(diào);
    (注意:函數(shù)式組件是沒有生命周期函數(shù)的)

React的生命周期圖譜
  • componentDidMount中的操作

componentDidMount()會在組件掛載后(插入DOM樹中)立即調(diào)用。
\triangleright 1.依賴于DOM的操作;
\triangleright 2.發(fā)送網(wǎng)絡(luò)請求;(官方建議)
\triangleright 3.添加一些訂閱;(會在componentWillUnmount取消訂閱);

  • componentDidUpdate中的操作

componentDidUpdate()會在更新后被立即調(diào)用,首次渲染不會執(zhí)行此方法。
\triangleright 1.當組件更新后,可以在此處對DOM進行操作;
\triangleright 2.如果你對更新前后的props進行了比較,也可以選擇在此處進行網(wǎng)絡(luò)請求;

  • componentWillUnmount

componentWillUnmount()會在組件卸載及銷毀之前直接調(diào)用。
\triangleright 1.在此方法中執(zhí)行必要的清理操作;
\triangleright 2.清除timer,取消網(wǎng)絡(luò)請求或清除在componentDidMount()創(chuàng)建的訂閱等;

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 對于react生命周期的理解,反反復復有很多次不同的理解,我就做個整理,以免每次都進行重新推翻按照官網(wǎng)的解釋組件的...
    sherry_碎片閱讀 578評論 0 0
  • React 16.4 的生命周期圖 早期React生命周期圖 從圖中,我們看到了一些變化 廢棄的三個生命周期函數(shù) ...
    succes閱讀 857評論 0 1
  • 1. 掛載卸載過程1.1.constructor()1.2.componentWillMount()1.3.com...
    kelly_0416閱讀 341評論 0 0
  • React 生命周期文檔 1、理解 組件對象從創(chuàng)建到死亡它會經(jīng)歷特定的生命周期階段 React組件對象包含一系列的...
    豆腐先生就是我閱讀 362評論 0 0
  • 這次趁著學習React過一下生命周期,主要是參考了官網(wǎng)生命周期的內(nèi)容然后加了些自己的理解,做個學習記錄,后續(xù)可能會...
    laughing_club閱讀 1,382評論 0 0

友情鏈接更多精彩內(nèi)容