關于react生命周期圖解，react生命周期這個很多人還不知道，今天菲菲來為大家解答以上的問題，現(xiàn)在讓我們一起來看看吧！

1、概述 就像 Android 開發(fā)中的 View 一樣，React Native（RN） 中的組件也有生命周期（Lifecycle）。

2、所謂生命周期，就是一個對象從開始生成到最后消亡所經(jīng)歷的狀態(tài)，理解生命周期，是合理開發(fā)的關鍵。

3、RN 組件的生命周期整理如下圖： 如圖，可以把組件生命周期大致分為三個階段： 第一階段：是組件第一次繪制階段，如圖中的上面虛線框內(nèi)，在這里完成了組件的加載和初始化； 第二階段：是組件在運行和交互階段，如圖中左下角虛線框，這個階段組件可以處理用戶交互，或者接收事件更新界面； 第三階段：是組件卸載消亡的階段，如圖中右下角的虛線框中，這里做一些組件的清理工作。

4、 生命周期回調(diào)函數(shù) 下面來詳細介紹生命周期中的各回調(diào)函數(shù)。

5、 getDefaultProps 在組件創(chuàng)建之前，會先調(diào)用 getDefaultProps()，這是全局調(diào)用一次，嚴格地來說，這不是組件的生命周期的一部分。

6、在組件被創(chuàng)建并加載候，首先調(diào)用 getInitialState()，來初始化組件的狀態(tài)。

7、 componentWillMount 然后，準備加載組件，會調(diào)用 componentWillMount()，其原型如下： void componentWillMount() 這個函數(shù)調(diào)用時機是在組件創(chuàng)建，并初始化了狀態(tài)之后，在第一次繪制 render() 之前。

8、可以在這里做一些業(yè)務初始化操作，也可以設置組件狀態(tài)。

9、這個函數(shù)在整個生命周期中只被調(diào)用一次。

10、 componentDidMount 在組件第一次繪制之后，會調(diào)用 componentDidMount()，通知組件已經(jīng)加載完成。

11、函數(shù)原型如下： void componentDidMount() 這個函數(shù)調(diào)用的時候，其虛擬 DOM 已經(jīng)構建完成，你可以在這個函數(shù)開始獲取其中的元素或者子組件了。

12、需要注意的是，RN 框架是先調(diào)用子組件的 componentDidMount()，然后調(diào)用父組件的函數(shù)。

13、從這個函數(shù)開始，就可以和 JS 其他框架交互了，例如設置計時 setTimeout 或者 setInterval，或者發(fā)起網(wǎng)絡請求。

14、這個函數(shù)也是只被調(diào)用一次。

15、這個函數(shù)之后，就進入了穩(wěn)定運行狀態(tài)，等待事件觸發(fā)。

16、 componentWillReceiveProps 如果組件收到新的屬性（props），就會調(diào)用 componentWillReceiveProps()，其原型如下： void componentWillReceiveProps( object nextProps ) 輸入?yún)?shù) nextProps 是即將被設置的屬性，舊的屬性還是可以通過 this.props 來獲取。

17、在這個回調(diào)函數(shù)里面，你可以根據(jù)屬性的變化，通過調(diào)用 this.setState() 來更新你的組件狀態(tài)，這里調(diào)用更新狀態(tài)是安全的，并不會觸發(fā)額外的 render() 調(diào)用。

18、如下： componentWillReceiveProps: function(nextProps) { this.setState({ likesIncreasing: nextProps.likeCount > this.props.likeCount }); } shouldComponentUpdate 當組件接收到新的屬性和狀態(tài)改變的話，都會觸發(fā)調(diào)用 shouldComponentUpdate(...)，函數(shù)原型如下： boolean shouldComponentUpdate( object nextProps, object nextState ) 輸入?yún)?shù) nextProps 和上面的 componentWillReceiveProps 函數(shù)一樣，nextState 表示組件即將更新的狀態(tài)值。

19、這個函數(shù)的返回值決定是否需要更新組件，如果 true 表示需要更新，繼續(xù)走后面的更新流程。

20、否者，則不更新，直接進入等待狀態(tài)。

21、 默認情況下，這個函數(shù)永遠返回 true 用來保證數(shù)據(jù)變化的時候 UI 能夠同步更新。

22、在大型項目中，你可以自己重載這個函數(shù)，通過檢查變化前后屬性和狀態(tài)，來決定 UI 是否需要更新，能有效提高應用性能。

23、 componentWillUpdate 如果組件狀態(tài)或者屬性改變，并且上面的 shouldComponentUpdate(...) 返回為 true，就會開始準更新組件，并調(diào)用 componentWillUpdate()，其函數(shù)原型如下： void componentWillUpdate( object nextProps, object nextState ) 輸入?yún)?shù)與 shouldComponentUpdate 一樣，在這個回調(diào)中，可以做一些在更新界面之前要做的事情。

24、需要特別注意的是，在這個函數(shù)里面，你就不能使用 this.setState 來修改狀態(tài)。

25、這個函數(shù)調(diào)用之后，就會把 nextProps 和 nextState 分別設置到 this.props和 this.state 中。

26、緊接著這個函數(shù)，就會調(diào)用 render() 來更新界面了。

27、 componentDidUpdate 調(diào)用了 render() 更新完成界面之后，會調(diào)用 componentDidUpdate() 來得到通知，其函數(shù)原型如下： void componentDidUpdate( object prevProps, object prevState ) 因為到這里已經(jīng)完成了屬性和狀態(tài)的更新了，此函數(shù)的輸入?yún)?shù)變成了 prevProps 和 prevState。

28、 componentWillUnmount 當組件要被從界面上移除的時候，就會調(diào)用 componentWillUnmount()，其函數(shù)原型如下： void componentWillUnmount() 在這個函數(shù)中，可以做一些組件相關的清理工作，例如取消計時器、網(wǎng)絡請求等。

29、 總結 到這里，RN 的組件的完整的生命都介紹完了，在回頭來看一下前面的圖，就比較清晰了，把生命周期的回調(diào)函數(shù)總結成如下表格： 生命周期 調(diào)用次數(shù) 能否使用 setSate() getDefaultProps 1(全局調(diào)用一次) 否 getInitialState 1 否 componentWillMount 1 是 render >=1 否 componentDidMount 1 是 componentWillReceiveProps >=0 是 shouldComponentUpdate >=0 否 componentWillUpdate >=0 否 componentDidUpdate >=0 否 componentWillUnmount 1 否 以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

本文到此分享完畢，希望對大家有所幫助。

標簽： react生命周期