站長資訊網
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
-
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視頻教程》
