今天小編給大家分享一下react生命周期的階段有哪些的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。
目前創(chuàng)新互聯(lián)已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、綿陽(yáng)服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、濮陽(yáng)網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
react生命周期分為3個(gè)階段；分別是：1、創(chuàng)建階段，也被稱(chēng)為初始化階段，表示組件第一次在DOM樹(shù)中進(jìn)行渲染的過(guò)程；2、更新階段，也叫存在階段，表示組件被重新渲染的過(guò)程；3、卸載階段，也叫銷(xiāo)毀階段，表示組件從DOM中刪除的過(guò)程。
本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。
生命周期（Life Cycle）的概念應(yīng)用很廣泛，特別是在經(jīng)濟(jì)、環(huán)境、技術(shù)、社會(huì)等諸多領(lǐng)域經(jīng)常出現(xiàn)，其基本涵義可以通俗地理解為“從搖籃到墳?zāi)埂保–radle-to-Grave）的整個(gè)過(guò)程
跟Vue一樣，React整個(gè)組件生命周期包括從創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過(guò)程
這里主要講述react16.4之后的生命周期，可以分成三個(gè)階段：
創(chuàng)建階段
更新階段
卸載階段
創(chuàng)建階段主要分成了以下幾個(gè)生命周期方法：
構(gòu)造函數(shù)（不要問(wèn)我為什么用中文，因?yàn)橛⑽臅?huì)被吞掉，太難了）
getDerivedStateFromProps
render
componentDidMount
構(gòu)造函數(shù)
實(shí)例過(guò)程中自動(dòng)調(diào)用的方法，在方法內(nèi)部通過(guò)super關(guān)鍵字獲取來(lái)自父組件的props
在該方法中，通常的操作為初始化state狀態(tài)或者在this上掛載方法
getDerivedStateFromProps
該方法是新增的生命周期方法，是一個(gè)靜態(tài)的方法，因此不能訪問(wèn)到組件的實(shí)例
執(zhí)行時(shí)機(jī)：組件創(chuàng)建和更新階段，不論是props變化還是state變化，也會(huì)調(diào)用
在每次render方法前調(diào)用，第一個(gè)參數(shù)為即將更新的props，第二個(gè)參數(shù)為上一個(gè)狀態(tài)的state，可以比較props 和 state來(lái)加一些限制條件，防止無(wú)用的state更新
該方法需要返回一個(gè)新的對(duì)象作為新的state或者返回null表示state狀態(tài)不需要更新
render
類(lèi)組件必須實(shí)現(xiàn)的方法，用于渲染DOM結(jié)構(gòu)，可以訪問(wèn)組件state與prop屬性
注意：不要在 render 里面 setState, 否則會(huì)觸發(fā)死循環(huán)導(dǎo)致內(nèi)存崩潰
componentDidMount
組件掛載到真實(shí)DOM節(jié)點(diǎn)后執(zhí)行，其在render方法之后執(zhí)行
此方法多用于執(zhí)行一些數(shù)據(jù)獲取，事件監(jiān)聽(tīng)等操作
該階段的函數(shù)主要為如下方法：
getDerivedStateFromProps
shouldComponentUpdate
render
getSnapshotBeforeUpdate
componentDidUpdate
getDerivedStateFromProps
該方法介紹同上
shouldComponentUpdate
用于告知組件本身基于當(dāng)前的props和state是否需要重新渲染組件，默認(rèn)情況返回true
執(zhí)行時(shí)機(jī)：到新的props或者state時(shí)都會(huì)調(diào)用，通過(guò)返回true或者false告知組件更新與否
一般情況，不建議在該周期方法中進(jìn)行深層比較，會(huì)影響效率
同時(shí)也不能調(diào)用setState，否則會(huì)導(dǎo)致無(wú)限循環(huán)調(diào)用更新
render
介紹如上
getSnapshotBeforeUpdate
該周期函數(shù)在render后執(zhí)行，執(zhí)行之時(shí)DOM元素還沒(méi)有被更新
該方法返回的一個(gè)Snapshot值，作為componentDidUpdate第三個(gè)參數(shù)傳入
重慶分公司
重慶分公司
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log('#enter getSnapshotBeforeUpdate');
return 'foo';
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log('#enter componentDidUpdate snapshot = ', snapshot);
}此方法的目的在于獲取組件更新前的一些信息，比如組件的滾動(dòng)位置之類(lèi)的，在組件更新后可以根據(jù)這些信息恢復(fù)一些UI視覺(jué)上的狀態(tài)
componentDidUpdate
執(zhí)行時(shí)機(jī)：組件更新結(jié)束后觸發(fā)
在該方法中，可以根據(jù)前后的props和state的變化做相應(yīng)的操作，如獲取數(shù)據(jù)，修改DOM樣式等
componentWillUnmount
此方法用于組件卸載前，清理一些注冊(cè)監(jiān)聽(tīng)事件，或者取消訂閱的網(wǎng)絡(luò)請(qǐng)求等
一旦一個(gè)組件實(shí)例被卸載，其不會(huì)被再次掛載，而只可能是被重新創(chuàng)建
以上就是“react生命周期的階段有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
