react生命週期分為幾個階段

react生命週期分為3個階段；分別是：1、創建階段，也稱為初始化階段，表示元件第一次在DOM樹中渲染的過程；2、更新階段，也叫存在階段，表示元件被重新渲染的過程；3、卸載階段，也叫銷毀階段，表示元件從DOM刪除的過程。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react生命週期分為幾個階段

生命週期（Life Cycle）的概念應用很廣泛，特別是在經濟、環境、技術、社會等諸多領域經常出現，其基本涵義可以通俗地理解為「從搖籃到墳墓」（Cradle-to-Grave）的整個過程

跟Vue一樣，React整個元件生命週期包括從創建、初始化資料、編譯模板、掛載Dom →渲染、更新→渲染、卸載等一系列流程

流程

這裡主要講述react16.4之後的生命週期，可以分成三個階段：

• 建立階段

• 更新階段

• #解除安裝階段

##建立階段

創建階段主要分成了以下幾個生命週期方法：

• 建構子（不要問我為什麼用中文，因為英文會被吞掉，太難了）

• getDerivedStateFromProps

• render

• componentDidMount

##建構函數

實例過程中自動呼叫的方法，在方法內部透過super關鍵字取得來自父元件的props

在該方法中，通常的操作為初始化state狀態或在this上掛載方法

getDerivedStateFromProps

該方法是新增的生命週期方法，是靜態的方法，因此不能存取元件的實例

執行時機：元件建立與更新階段，不論是props變化還是state變化，也會呼叫

在每次render方法前調用，第一個參數為即將更新的props，第二個參數為上一個狀態的state，可以比較props 和state來加一些限制條件，防止無用的state更新

該方法需要傳回一個新的物件作為新的state或傳回null表示state狀態不需要更新

render

類別元件必須實作的方法，用於渲染DOM結構，可以存取元件state與prop屬性

注意：不要在render 裡面setState, 否則會觸發死循環導致記憶體崩潰

componentDidMount

元件掛載到真實DOM節點後執行，其在render方法之後執行

此方法多用於執行一些資料獲取，事件監聽等操作

更新階段

該階段的函數主要為以下方法：
getDerivedStateFromProps
shouldComponentUpdate
render
#getSnapshotBeforeUpdate

#getSnapshotBeforeUpdate

#。

##componentDidUpdate

getDerivedStateFromProps

該方法介紹同上

shouldComponentUpdate

用於告知元件本身基於目前的props和state是否需要重新渲染元件，預設會傳回true

執行時機：到新的props或state時都會調用，透過傳回true或false告知元件更新與否一般情況，不建議在該週期方法中進行深層比較，會影響效率

同時也不能呼叫setState，否則會導致無限循環呼叫更新

render

介紹如上

###getSnapshotBeforeUpdate#########該週期函數在render後執行，執行之時DOM元素還沒有被更新######該方法返回的一個Snapshot值，作為componentDidUpdate第三個參數傳入###

getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('#enter getSnapshotBeforeUpdate');
    return 'foo';
}
componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('#enter componentDidUpdate snapshot = ', snapshot);
}

###此方法的目的在於獲取組件更新前的一些信息，例如組件的滾動位置之類的，在元件更新後可以根據這些資訊恢復一些UI視覺上的狀態##########componentDidUpdate#########執行時機：元件更新結束後觸發# #####在這個方法中，可以根據前後的props和state的變化做相應的操作，如獲取數據，修改DOM樣式等######卸載階段#########componentWillUnmount #########此方法用於元件卸載前，清理一些註冊監聽事件，或取消訂閱的網路請求等######一旦一個元件實例被卸載，其不會再次掛載，而只可能是被重新創建######推薦學習：《###react影片教學###》######

以上是react生命週期分為幾個階段的詳細內容。更多資訊請關注PHP中文網其他相關文章！