React Native的生命週期解析

在react native中使用元件來封裝介面模組時，整個介面就是乙個大的元件，開發過程就是不斷優化和拆分介面元件、構造整個元件樹的過程。

上張圖涵蓋了乙個元件從建立、執行到銷毀的整個過程。大家可以看到，初始化的時候會呼叫5個函式（按先後順序）。這5個函式在整個元件被建立到銷毀的過程中只呼叫一次。初始化完畢後，當元件的props或者state改變都會觸發不同的鉤子函式，繼而引發元件的重新渲染。現在我們把這過程拆開一點一點來分析。

我們先來看初始化，在初始化的過程中，會按順序呼叫下面5個函式。

getdefaultprops：元件例項建立前呼叫，多個例項間共享引用。注意：如果父元件傳遞過來的props和你在該函式中定義的props的key一樣，將會被覆蓋。

在元件中，我們可以利用this.props獲取在這裡初始化它的屬性，由於元件初始化後，再次使用該元件不會呼叫getdefaultprops函式，所以元件自己不可以修改props，只可由其他元件呼叫它時再外部進行修改。

getinitalstate:元件示例建立的時候呼叫的第乙個函式。主要用於初始化state。注意：為了在使用中不出現空值，建議初始化state的時候盡可能給每乙個可能用到的值都賦乙個初始值。

該函式不同於getdefaultprops,在以後的過程中，會再次呼叫，所以可以將控制控制項狀態的一些變數放在這裡初始化，比如控制項上顯示的文字，可以通過this.state來獲取值，通過this.setstate來修改state值。注意：一旦呼叫了this.setstate方法，元件一定會呼叫render方法，對元件進行再次渲染，不過，react框架會根據dom的狀態自動判斷是否需要真正渲染。

componentwillmount：在render前，getinitalstate之後呼叫。僅呼叫一次，可以用於改變state操作。

render：元件渲染函式，會返回乙個virtual dom，只允許返回乙個最外層容器元件。render函式盡量保持純淨，只渲染元件，不修改狀態，不執行副操作（比如計時器）。

componentdidmount:在render渲染之後，react會根據virtual dom來生成真實dom，生成完畢後會呼叫該函式。

在瀏覽器端（react），我們可以通過this.getdomnode()來拿到相應的dom節點。然而我們在rn中並用不到，在rn中主要在該函式中執行網路請求，定時器開啟等相關操作

在呼叫了render方法，元件載入成功並被成功渲染出來之後，所要執行的後續操作，一般都會在這個函式中進行，比如經常要面對的網路請求等載入資料操作

初始化完成之後，元件將會進入到執行中狀態，執行中狀態我們將會遇到如下幾個函式：

componentwillreceiveprops(nextprops)：props改變（父容器來更改或是redux），將會呼叫該函式。新的props將會作為引數傳遞進來，老的props可以根據this.props來獲取。我們可以在該函式中對state作一些處理。注意：在該函式中更新state不會引起二次渲染。

boolean

shouldcomponentupdate(object nextprops, object nextstate)：該函式傳遞過來兩個引數，新的state和新的props。state和props的改變都會調到該函式。該函式主要對傳遞過來的nextprops和nextstate作判斷。如果返回true則重新渲染，如果返回false則不重新渲染。在某些特定條件下，我們可以根據傳遞過來的props和state來選擇更新或者不更新，從而提高效率。

componentwillupdate(object nextprops, object nextstate)：與componentwillmount方法類似，元件上會接收到新的props或者state渲染之前，呼叫該方法。但是不可以在該方法中更新state和props。

render：跟初始化的時候功能一樣。

componentdidupdate(object prevprops,object prevstate):和初始化時期的componentdidmount類似，在render之後，真實dom生成之後呼叫該函式。傳遞過來的是當前的props和state。在該函式中同樣可以使用this.getdomnode()來拿到相應的dom節點。如果你需要在執行中執行某些副操作，請在該函式中完成。

銷毀階段只有乙個函式，很簡單

componentwillunmount：元件dom中移除的時候呼叫。在這裡進行一些相關的銷毀操作，比如定時器，監聽等等。

import react,  from 'react';
import from 'react-native';
import from 'react-native-router-flux';
import student from './student';
export 
default
class home extends component 
} componentwillmount() 
shouldcomponentupdate(nextprops, nextstate)
return
false
; }
componentwillupdate()
componentdidupdate()
componentdidmount() 
componentwillunmount() 
clickbutton() = this
.state;
this
.setstate()
} render() 
>
跳轉到公告頁
style=
onpress=
>
this.state.detailcontent}/>
) }
}const styles =stylesheet.create(,
button: 
});

import react,  from 'react';
import from 'react-native';
export 
default
class student extends component 
} componentwillmount() 
componentwillreceiveprops(nextprops)
componentdidmount() 
componentwillunmount() 
render() 
}const styles =stylesheet.create(
});

React Native的生命週期解析

React Native元件的結構和生命週期

React Native填坑之旅元件生命週期

ReactNative 生命週期

React Native的生命週期解析

React Native元件的結構和生命週期

React Native填坑之旅 元件生命週期

ReactNative 生命週期

相關推薦

React Native填坑之旅元件生命週期