一.（017）React的生命周期（新版）

（1）、初次渲染階段

該階段涉及到的生命周期鉤子分別有

1）、constructor（在該鉤子中可以定義數(shù)據(jù)模型）

2）、static getDerivedStateProps（該鉤子中可以對(duì)數(shù)據(jù)模型進(jìn)行攔截處理，作用相當(dāng)于axios中的響應(yīng)攔截器）

3）、render（該鉤子為渲染函數(shù)，作用為渲染視圖，當(dāng)數(shù)據(jù)模型變化后，也會(huì)重新渲染視圖）

4）、componentDidMount（該鉤子相似與vue中的Mounted，在該鉤子中主要是用來(lái)發(fā)送請(qǐng)求和獲取初次渲染的DOM節(jié)點(diǎn)）

（2）、更新階段

1）、static getDerivedStateProps（該鉤子中可以對(duì)數(shù)據(jù)模型進(jìn)行攔截處理，作用相當(dāng)于axios中的響應(yīng)攔截器）

2）、shouldComponentUpdate（該鉤子通過(guò)return來(lái)判斷你是否是要更新）

3）、render（該鉤子為渲染函數(shù)，作用為渲染視圖，當(dāng)數(shù)據(jù)模型變化后，也會(huì)重新渲染視圖）

4）、getSnapshotBeforeUpdate（該鉤子可以認(rèn)為是一個(gè)快照，它可以記錄保存更新前的數(shù)據(jù)）

5）、componentDidUpdate（在該鉤子中可以獲取到更新后的DOM節(jié)點(diǎn)，與vue中的Updated鉤子相似）

（3）、卸載階段

1）、componentWillUnMount（該鉤子中主要是用來(lái)清除定時(shí)器或解除事件綁定，類(lèi)似于vue中的destroyed鉤子）

二、生命周期鉤子的組合使用

（1）、可以在constructor中設(shè)置一個(gè)用戶(hù)進(jìn)入的時(shí)間，在componentWillUnMount中設(shè)置一個(gè)時(shí)間，記錄用戶(hù)離開(kāi)的時(shí)間，計(jì)算兩者的時(shí)間戳，獲得用戶(hù)在頁(yè)面中停留的時(shí)間，上傳給后臺(tái)服務(wù)器，來(lái)分析用戶(hù)的喜好。

（2）、當(dāng)用戶(hù)離開(kāi)頁(yè)面時(shí)在componentWillUnMount鉤子中把用戶(hù)離開(kāi)時(shí)在頁(yè)面的滾輪高度記錄下來(lái)，當(dāng)用戶(hù)再次進(jìn)入該頁(yè)面時(shí)，在componentDidMount鉤子中把滾輪高度重新賦給數(shù)據(jù)模型，讓用戶(hù)進(jìn)來(lái)后還是在該位置，實(shí)現(xiàn)類(lèi)似于keep-alive的作用

（3）、當(dāng)用戶(hù)在完一些簡(jiǎn)單的游戲，比如2048時(shí)，當(dāng)用戶(hù)離開(kāi)游戲時(shí)，我們可以把用戶(hù)此時(shí)的數(shù)據(jù)（游戲數(shù)據(jù)）在componentWillUnMount鉤子中保存下來(lái)，當(dāng)用戶(hù)再次進(jìn)入游戲的時(shí)候，我們?cè)趃etSnapshotBeforeUpdate鉤子中把用戶(hù)之前的游戲數(shù)據(jù)重新賦值給模型，實(shí)現(xiàn)類(lèi)似于游戲緩存的功能。