概述

React組件的生命周期可以分為三個(gè)主要階段：
掛載階段（Mounting）：組件被創(chuàng)建，插入到DOM 樹(shù)的過(guò)程；
更新階段（Updating）：是組件中 props 以及state 發(fā)生變化時(shí)，重新render渲染視圖過(guò)程；
卸載階段（Unmounting）：是DOM被從虛擬DOM樹(shù)移除的過(guò)程；
每個(gè)階段都伴隨著一系列的生命周期方法，這些方法為開(kāi)發(fā)者提供了在類式組件不同階段執(zhí)行操作不同代碼的機(jī)會(huì)，使開(kāi)發(fā)人員能夠更好的處理業(yè)務(wù)交互。

1、類式組件中的生命周期

React 16.3 之前的鉤子

React 16.3 之后的生命周期鉤子

2、React 16.3 版本之前的 生命周期

這個(gè)版本的 React 有非常明確的生命周期，能夠清晰的知道各個(gè)階段的鉤子函數(shù)，跟VUE2.0的非常相似，
主要鉤子函數(shù)有如下：

2.1、掛載階段：

constructor(props)

類的構(gòu)造方法，在組件中被創(chuàng)建時(shí)候調(diào)用，用于初始化 state 和 綁定事件處理函數(shù)，但是這個(gè)時(shí)候不能調(diào)用 this.setState()， 因?yàn)榇藭r(shí)組件還沒(méi)有掛載到 DOM上；

componentWillMount()

將要插入回調(diào)，DOM結(jié)構(gòu)生成前要執(zhí)行的操作

render()

用于插入虛擬DOM 回調(diào)，將虛擬DOM 渲染到視圖上的過(guò)程

componentDidMount()

虛擬 DOM插入回調(diào)已經(jīng)完成，即視圖已經(jīng)渲染完成，頁(yè)面真實(shí)DOM已經(jīng)加載完，此階段可以進(jìn)行 數(shù)據(jù)請(qǐng)求、訂閱或手動(dòng)更改DOM

2.2、更新階段：

每次在進(jìn)行 this.setState() 操作，或者 子組件得到的 props 更新時(shí)候，都會(huì)執(zhí)行此階段的鉤子函數(shù)，還有就是執(zhí)行 forceUpdate() 時(shí)候 同樣也會(huì)執(zhí)行此階段函數(shù)；

componentsWillUpdate()

視圖將要更新前的回調(diào)操作；用于數(shù)據(jù)格式化等操作

render()

根據(jù)傳入的 新state 或者 新 props 進(jìn)行重新渲染視圖

componentDidUpdate()

視圖重新更新渲染已經(jīng)完成， 可以在這里執(zhí)行依賴于DOM的操作，如重新獲取DOM尺寸或執(zhí)行網(wǎng)絡(luò)請(qǐng)求

2.3、卸載階段

componentWillUnmount()

組件被移除回調(diào)，這個(gè)階段可以處理一些定時(shí)任務(wù)，事件卸載、取消網(wǎng)絡(luò)請(qǐng)求等操作

3、React 16.3 版本之后的生命周期

3.1、掛載階段：

constructors(props)

類的構(gòu)造方法，在組件被創(chuàng)建時(shí)調(diào)用。用于初始化state和綁定事件處理函數(shù),創(chuàng)建 ref。注意，constructor中不能調(diào)用this.setState()，因?yàn)榇藭r(shí)組件還未掛載到DOM上。

constructor(props) {console.log('==constructor==')// 獲取上級(jí)傳入 propssuper(props)// 聲明 state 屬性  countthis.state = {count: 0}}

static getDerivedStateFromProps(props, state)

React 16.3引入的靜態(tài)方法，在組件創(chuàng)建時(shí)和每次更新前調(diào)用。用于根據(jù)props更新state。如果不希望更新state，則返回null。
如：

   static getDerivedStateFromProps(props, state) {// 根據(jù)props更新stateconsole.log('==props=')console.log('==state=', state)//   表示給 count 設(shè)置初始值最終會(huì)渲染為 99return {count: 99}}

static 靜態(tài)方法中是獲取不到當(dāng)前組件的實(shí)例的，不能進(jìn)行 this.XX 操作 調(diào)用 如：this.fetch()

render()

渲染方法，根據(jù)組件的props和state返回React元素。render方法必須是一個(gè)純函數(shù)，不能修改組件的狀態(tài)或執(zhí)行副作用。

componentDidMount()

組件掛載到DOM后調(diào)用。是執(zhí)行副作用（如數(shù)據(jù)獲取、訂閱或手動(dòng)更改DOM）。

3.2、更新階段

在組件的props或state發(fā)生變化時(shí)，React會(huì)重新渲染組件

static getDerivedStateFromProps(props, state)

同掛載階段，用于在更新前根據(jù)props更新state。 同上 返回 null 時(shí)候，不會(huì)更是視圖；

shouldComponentUpdate(nextProps, nextState)

返回一個(gè)布爾值，決定組件是否應(yīng)該更新。默認(rèn)情況下返回true，但可以通過(guò)此方法優(yōu)化性能，避免不必要的渲染，通過(guò)對(duì)比新舊數(shù)據(jù)判斷是否需要執(zhí)行更新視圖操作。

render()

同掛載階段，根據(jù)更新后的props和state重新渲染組件。

getSnapshotBeforeUpdate(prevProps, prevState)

在最近一次渲染輸出（提交到DOM）之前調(diào)用，可以捕獲一些信息（如滾動(dòng)位置），這些信息將作為參數(shù)傳遞給componentDidUpdate。

componentDidUpdate(prevProps, prevState, snapshot)

組件更新后被調(diào)用?？梢栽谶@里執(zhí)行依賴于DOM的操作，如重新獲取DOM尺寸或執(zhí)行網(wǎng)絡(luò)請(qǐng)求

3.3 卸載階段

componentWillUnmount()

在組件卸載及銷毀之前調(diào)用。是執(zhí)行清理操作（如取消網(wǎng)絡(luò)請(qǐng)求、清除定時(shí)器）的理想位置。

類式組件生命周期鉤子函數(shù)變化：

4、在函數(shù)式組件中如何模擬生命周期

生命周期主要分為 三個(gè)階段，在函數(shù)式組件中是無(wú)法模擬出上面類式組件的各個(gè)生命鉤子函數(shù)的，但是可以通過(guò) useEffect() Hook模擬組件的 掛載、更新、銷毀三個(gè)階段；

4.1 模擬掛載階段

與類組件中的 componentDidMount() 鉤子函數(shù)相似

useEffect(() => {// 這里執(zhí)行掛載時(shí)候操作console.log('===componentDidMount==')}, []) // 第二參數(shù)為空 數(shù)組時(shí)候，表示 掛載、卸載時(shí)候執(zhí)行；

4.2 模擬更新階段

與類式組件中的 shouldComponentUpdate 類似

 useEffect(() => {// 這里執(zhí)行掛載時(shí)候操作console.log('===componentDidMount==')console.log('===我更新了==')}, [count]) // 第二參數(shù)為空 數(shù)組時(shí)候，表示 掛載、卸載時(shí)候執(zhí)行;若第二個(gè)參數(shù) 傳入了依賴屬性，則該屬性變化時(shí)候，會(huì)執(zhí)行第一個(gè)參數(shù)的回調(diào)函數(shù)

4.3 模擬卸載階段

與類式組件中的 componentWillUnmount() 類似

useEffect(() => {// 這里執(zhí)行掛載時(shí)候操作console.log('===componentDidMount==', count)return () => {// 這里執(zhí)行卸載后的操作console.log('=組件卸載了==')}}, [count]) // 第二參數(shù)為空 數(shù)組時(shí)候，表示 掛載、卸載時(shí)候執(zhí)行,

注意：官網(wǎng)現(xiàn)在推薦開(kāi)發(fā)時(shí)候使用函數(shù)式組件，相對(duì)類式組件更加靈活方便，但是在編寫(xiě)通用性處理復(fù)雜的邏輯及狀態(tài)時(shí)候，還是建議使用類式組件，類式組件有很好的繼承擴(kuò)展性，通過(guò)生命周期鉤子，能夠更好的`