react元件生命週期理解

2021-09-16 19:49:40 字數 1102 閱讀 9852

react元件有兩個狀態,乙個是渲染狀態,乙個是解除安裝狀態,而渲染狀態又分為初始渲染狀態(也可以說是建立狀態)和重新渲染狀態(也可以說是存在狀態,說明元件一直存在,會發生多次重新渲染)。這三個狀態下又會產生一系列的生命週期函式,開發人員一般只需要了解其中五個主要的生命週期函式:componentwillmount、componentdidmount、componentwillupdate、componentdidupdate、componentwillunmount。一下是**:

下面詳細解釋一下上圖。首先,在元件初始渲染之前react native框架會呼叫componentwillmount函式,在元件生命週期中,它只會被執行一次(注:如果元件需要從本地儲存中獲取資料,可以在該函式中執行獲取本地儲存資料操作);執行完componentwillmount函式之後,元件就會執行初始渲染;當初始渲染完成後,react native框架會立即呼叫componentdidmount函式,同樣的,該函式在生命週期中也只會執行一次(注:元件可以在該函式中執行從網路中獲取資料操作);這兩步之後,元件就初始渲染出來了;當元件從父元件中接收到新的prop、元件的prop在父元件中被更改、或者元件的state變數改變時,只要這三個有發生一種,react native框架就會觸發diff演算法計算該元件是否有改動,如果有改動,元件就會被重新渲染,重新渲染之前,react native框架會呼叫componentwillupdate函式(注:該函式中不能對元件狀態進行更改);之後,元件便會執行重新渲染;重新渲染完成之後,react native框架會呼叫componentdidupdate函式;重新渲染這個狀態會被多次觸發,所以這兩個函式也會被執行多次。當元件要被解除安裝之前,react native框架會呼叫componentwillunmount函式,之後就會解除安裝元件。

開發者可以在這幾個生命週期函式中定義一些你想元件變化的操作或者做一些資料的改變。

最後提醒一點,diff演算法是react native用於實現虛擬dom機制實現的一種演算法,虛擬dom機制是react native實現對資料批量處理反應迅速的基礎,建議朋友們有必要去理解透徹。之後的文章中,本人也會進行介紹,大家共勉交流一下,嘻嘻~

react元件生命週期理解

應當做些初始化的動作,如 初始化state,將事件處理函式繫結到類例項上 在元件例項化後,和接受新的props後被呼叫。他必須返回乙個物件來更新狀態,或者返回null表示新的props不需要任何state的更新。如果是由於父元件的props更改,所帶來的重新渲染,也會觸發此方法 元件被裝配後立即呼叫...

理解React元件的生命週期

本文作者寫作的時間較早,所以裡面會出現很多的舊版es5的時代的方法。不過,雖然如此並不影響讀者理解元件的生命週期。反而是作者分為幾種不同的觸發機制來解釋生命週期的各個方法,讓讀者更加容易理解涉及到的概念。以下是正文。react在建立元件的時候會觸發元件生命週期各個方法的呼叫。這篇文章就分別介紹其中的...

React元件生命週期

元件的所有狀態結合起來就成了元件的生命週期。即 初始化階段 執行中階段 銷毀階段。不同生命週期內可以自定義的函式 初始化階段 getdefaultprops 獲取預設屬性,只呼叫一次,是在createclass之後呼叫的。例項之間共享引用 getinitialstate 初始化每個例項的特有初始化狀...