每日時(shí)訊!react生命周期圖 react生命周期
2023-06-27 04:12:52 來(lái)源：城市網(wǎng)
1、概述 就像 Android 開(kāi)發(fā)中的 View 一樣，React Native（RN） 中的組件也有生命周期（Lifecycle）。
【資料圖】
2、所謂生命周期，就是一個(gè)對(duì)象從開(kāi)始生成到最后消亡所經(jīng)歷的狀態(tài)，理解生命周期，是合理開(kāi)發(fā)的關(guān)鍵。
3、RN 組件的生命周期整理如下圖： 如圖，可以把組件生命周期大致分為三個(gè)階段： 第一階段：是組件第一次繪制階段，如圖中的上面虛線框內(nèi)，在這里完成了組件的加載和初始化； 第二階段：是組件在運(yùn)行和交互階段，如圖中左下角虛線框，這個(gè)階段組件可以處理用戶交互，或者接收事件更新界面； 第三階段：是組件卸載消亡的階段，如圖中右下角的虛線框中，這里做一些組件的清理工作。
4、 生命周期回調(diào)函數(shù) 下面來(lái)詳細(xì)介紹生命周期中的各回調(diào)函數(shù)。
5、 getDefaultProps 在組件創(chuàng)建之前，會(huì)先調(diào)用 getDefaultProps()，這是全局調(diào)用一次，嚴(yán)格地來(lái)說(shuō)，這不是組件的生命周期的一部分。
6、在組件被創(chuàng)建并加載候，首先調(diào)用 getInitialState()，來(lái)初始化組件的狀態(tài)。
7、 componentWillMount 然后，準(zhǔn)備加載組件，會(huì)調(diào)用 componentWillMount()，其原型如下： void componentWillMount() 這個(gè)函數(shù)調(diào)用時(shí)機(jī)是在組件創(chuàng)建，并初始化了狀態(tài)之后，在第一次繪制 render() 之前。
8、可以在這里做一些業(yè)務(wù)初始化操作，也可以設(shè)置組件狀態(tài)。
9、這個(gè)函數(shù)在整個(gè)生命周期中只被調(diào)用一次。
10、 componentDidMount 在組件第一次繪制之后，會(huì)調(diào)用 componentDidMount()，通知組件已經(jīng)加載完成。
11、函數(shù)原型如下： void componentDidMount() 這個(gè)函數(shù)調(diào)用的時(shí)候，其虛擬 DOM 已經(jīng)構(gòu)建完成，你可以在這個(gè)函數(shù)開(kāi)始獲取其中的元素或者子組件了。
12、需要注意的是，RN 框架是先調(diào)用子組件的 componentDidMount()，然后調(diào)用父組件的函數(shù)。
13、從這個(gè)函數(shù)開(kāi)始，就可以和 JS 其他框架交互了，例如設(shè)置計(jì)時(shí) setTimeout 或者 setInterval，或者發(fā)起網(wǎng)絡(luò)請(qǐng)求。
14、這個(gè)函數(shù)也是只被調(diào)用一次。
15、這個(gè)函數(shù)之后，就進(jìn)入了穩(wěn)定運(yùn)行狀態(tài)，等待事件觸發(fā)。
16、 componentWillReceiveProps 如果組件收到新的屬性（props），就會(huì)調(diào)用 componentWillReceiveProps()，其原型如下： void componentWillReceiveProps( object nextProps ) 輸入?yún)?shù) nextProps 是即將被設(shè)置的屬性，舊的屬性還是可以通過(guò) this.props 來(lái)獲取。
17、在這個(gè)回調(diào)函數(shù)里面，你可以根據(jù)屬性的變化，通過(guò)調(diào)用 this.setState() 來(lái)更新你的組件狀態(tài)，這里調(diào)用更新?tīng)顟B(tài)是安全的，并不會(huì)觸發(fā)額外的 render() 調(diào)用。
18、如下： componentWillReceiveProps: function(nextProps) { this.setState({ likesIncreasing: nextProps.likeCount > this.props.likeCount }); } shouldComponentUpdate 當(dāng)組件接收到新的屬性和狀態(tài)改變的話，都會(huì)觸發(fā)調(diào)用 shouldComponentUpdate(...)，函數(shù)原型如下： boolean shouldComponentUpdate( object nextProps, object nextState ) 輸入?yún)?shù) nextProps 和上面的 componentWillReceiveProps 函數(shù)一樣，nextState 表示組件即將更新的狀態(tài)值。
19、這個(gè)函數(shù)的返回值決定是否需要更新組件，如果 true 表示需要更新，繼續(xù)走后面的更新流程。
20、否者，則不更新，直接進(jìn)入等待狀態(tài)。
21、 默認(rèn)情況下，這個(gè)函數(shù)永遠(yuǎn)返回 true 用來(lái)保證數(shù)據(jù)變化的時(shí)候 UI 能夠同步更新。
22、在大型項(xiàng)目中，你可以自己重載這個(gè)函數(shù)，通過(guò)檢查變化前后屬性和狀態(tài)，來(lái)決定 UI 是否需要更新，能有效提高應(yīng)用性能。
23、 componentWillUpdate 如果組件狀態(tài)或者屬性改變，并且上面的 shouldComponentUpdate(...) 返回為 true，就會(huì)開(kāi)始準(zhǔn)更新組件，并調(diào)用 componentWillUpdate()，其函數(shù)原型如下： void componentWillUpdate( object nextProps, object nextState ) 輸入?yún)?shù)與 shouldComponentUpdate 一樣，在這個(gè)回調(diào)中，可以做一些在更新界面之前要做的事情。
24、需要特別注意的是，在這個(gè)函數(shù)里面，你就不能使用 this.setState 來(lái)修改狀態(tài)。
25、這個(gè)函數(shù)調(diào)用之后，就會(huì)把 nextProps 和 nextState 分別設(shè)置到 this.props和 this.state 中。
26、緊接著這個(gè)函數(shù)，就會(huì)調(diào)用 render() 來(lái)更新界面了。
27、 componentDidUpdate 調(diào)用了 render() 更新完成界面之后，會(huì)調(diào)用 componentDidUpdate() 來(lái)得到通知，其函數(shù)原型如下： void componentDidUpdate( object prevProps, object prevState ) 因?yàn)榈竭@里已經(jīng)完成了屬性和狀態(tài)的更新了，此函數(shù)的輸入?yún)?shù)變成了 prevProps 和 prevState。
28、 componentWillUnmount 當(dāng)組件要被從界面上移除的時(shí)候，就會(huì)調(diào)用 componentWillUnmount()，其函數(shù)原型如下： void componentWillUnmount() 在這個(gè)函數(shù)中，可以做一些組件相關(guān)的清理工作，例如取消計(jì)時(shí)器、網(wǎng)絡(luò)請(qǐng)求等。
29、 總結(jié) 到這里，RN 的組件的完整的生命都介紹完了，在回頭來(lái)看一下前面的圖，就比較清晰了，把生命周期的回調(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 否 以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相信通過(guò)react生命周期這篇文章能幫到你，在和好朋友分享的時(shí)候，也歡迎感興趣小伙伴們一起來(lái)探討。
本文由用戶上傳，如有侵權(quán)請(qǐng)聯(lián)系刪除！
