react生命週期分為3個階段；分別是：1、創建階段，也稱為初始化階段，表示元件第一次在DOM樹中渲染的過程；2、更新階段，也叫存在階段，表示元件被重新渲染的過程；3、卸載階段，也叫銷毀階段，表示元件從DOM刪除的過程。
本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。
生命週期（Life Cycle）的概念應用很廣泛，特別是在經濟、環境、技術、社會等諸多領域經常出現，其基本涵義可以通俗地理解為「從搖籃到墳墓」（Cradle-to-Grave）的整個過程
跟Vue一樣，React整個元件生命週期包括從創建、初始化資料、編譯模板、掛載Dom →渲染、更新→渲染、卸載等一系列流程
這裡主要講述react16.4之後的生命週期，可以分成三個階段：
建立階段
更新階段
#解除安裝階段
##建構函數
實例過程中自動呼叫的方法，在方法內部透過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方法之後執行
更新階段
#getSnapshotBeforeUpdate
#。
##componentDidUpdate
getDerivedStateFromProps該方法介紹同上
shouldComponentUpdate執行時機：到新的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);
}以上是react生命週期分為幾個階段的詳細內容。更多資訊請關注PHP中文網其他相關文章！
