1. 程式人生 > >React生命週期函式詳解和注意事項

React生命週期函式詳解和注意事項

React生命週期函式

生命週期函式是指在某一個週期自動執行的函式。

React中的生命週期執行過程

這裡寫圖片描述

以下是React中的常用的生命週期函式,按個部分中按照自動執行順序列出,這幾個過程可能存在同時進行

初始化過程(Initialization)

  • consructor()裡面初始化PropsState屬性。

掛載過程(Mounting)

  1. componentWillMount():在元件即將被掛載到頁面的時刻自動執行。
  2. render():將元件掛載到頁面。
  3. componentDidMount():元件被掛載到頁面之後立即執行。

更新過程(Updating)

  1. componentWillReceiveProps()(已經在16.4的版本中廢棄,不推薦使用)
    一個元件要從父元件接收引數, 只要父元件的render()函式非首次(如果這個元件第一次存在與父元件中不會執行,如果已經存在於父元件中才會執行)執行了,子元件的這個生命週期函式就會被執行。如果元件沒有Props屬性則直接跳過
  2. shouldComponentUpdate()(已經在16.4的版本中廢棄,不推薦使用)
    :元件更行之前檢查是否需要更新,注意這個函式要有一個布林型別返回值,如果返回false,這一部分的生週期 函式將不會繼續執行,即無論如何元件都不會更新。利用這個生命週期函式可以強制關閉不需要更新的子元件來提升渲染效能
  3. componentWillUpdate()
    元件更新之前。自動執行。但要在shouldComponentUpdate()執行並返回true之後執行。
  4. render()
    將元件更新到頁面。
  5. componentDidUpdate():
    元件更新完成之後立即執行。

移除過程(Unmounting)

  • componentWillMount()
    當元件即將被頁面剔除時執行。

注意事項

  • 注意:React中的render()也是生命週期函式,而constructor()並不是生命週期函式。
  • 生命週期函式是針對元件來說的,並非只有父元件才有生命週期函式,是所有元件都有生命週期函式!
  • 除了render()函式,其他的所有生命週期函式都可以不寫,也不會報錯,但是如果缺少render()函式程式就會報錯,因為所有的生命週期函式除了render()函式都是繼承自React中內建的。
  • AJAX請求一般放在componentDidMount()裡面。