react生命周期有哪些_react生命周期 世界觀速訊

來源:互聯(lián)網(wǎng)

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


【資料圖】

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

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

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

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

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

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

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

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

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

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

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

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

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

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

16、 componentWillReceiveProps 如果組件收到新的屬性(props),就會調(diào)用 componentWillReceiveProps(),其原型如下: void componentWillReceiveProps( object nextProps ) 輸入?yún)?shù) nextProps 是即將被設(shè)置的屬性,舊的屬性還是可以通過 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 當(dāng)組件接收到新的屬性和狀態(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、否者,則不更新,直接進(jìn)入等待狀態(tài)。

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

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

23、 componentWillUpdate 如果組件狀態(tài)或者屬性改變,并且上面的 shouldComponentUpdate(...) 返回為 true,就會開始準(zhǔn)更新組件,并調(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 分別設(shè)置到 this.props和 this.state 中。

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

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

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

29、 總結(jié) 到這里,RN 的組件的完整的生命都介紹完了,在回頭來看一下前面的圖,就比較清晰了,把生命周期的回調(diào)函數(shù)總結(jié)成如下表格: 生命周期 調(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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

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

標(biāo)簽:

推薦

財(cái)富更多》

動態(tài)更多》

熱點(diǎn)