前言
1、生命周期介紹
① 是什么？
組件從創(chuàng)建到掛載頁(yè)面上運(yùn)行，再到組件不用時(shí)卸載的過程，叫生命周期，只有類組件才有生命周期。
②作用
學(xué)習(xí)組件的生命周期，有助于理解組件的運(yùn)行方式，完成更復(fù)雜的組件更能、分析組件錯(cuò)誤原因等。
2、鉤子函數(shù)介紹
① 是什么？
生命周期的每個(gè)階段總是伴隨著一些方法調(diào)用，這些方法就是生命周期的鉤子函數(shù)。
②作用
為開發(fā)人員在不同階段操作組件提供了時(shí)機(jī)。
生命周期的三個(gè)階段
三階段分為：創(chuàng)建時(shí)、更新時(shí)和卸載時(shí)。
??點(diǎn)擊此（生命周期結(jié)構(gòu)圖）
一、生命周期（舊）
1.初始化階段(掛載階段)
① constructor
Ⅰ、執(zhí)行
組件實(shí)例被創(chuàng)建并初始化時(shí)觸發(fā)
Ⅱ、能做什么
- 通過給 this.state 賦值對(duì)象來初始化內(nèi)部 state。
- 為事件處理函數(shù)綁定實(shí)例
② componentWillMount
Ⅰ、執(zhí)行
componentWillMount() 在掛載之前被調(diào)用。
Ⅱ、能做什么
用于準(zhǔn)備渲染前的工作
③ render
Ⅰ、執(zhí)行
根據(jù)組件的props和state
Ⅱ、能做什么
渲染UI，返回需要渲染的元素結(jié)構(gòu)
④ componentDidMount
Ⅰ、執(zhí)行
componentDidMount() 會(huì)在組件掛載后（插入 DOM 樹中）立即調(diào)用。依賴于 DOM 節(jié)點(diǎn)的初始化應(yīng)該放在這里
Ⅱ、能做什么
這個(gè)方法是比較適合添加訂閱的地方。如果添加了訂閱，請(qǐng)不要忘記在 componentWillUnmount() 里取消訂閱
2.更新階段
① shouldComponentUpdate
Ⅰ、執(zhí)行
當(dāng) props 或 state 發(fā)生變化時(shí)，shouldComponentUpdate() 會(huì)在渲染執(zhí)行之前被調(diào)用。
Ⅱ、能做什么
根據(jù)shouldComponentUpdate的返回值，判斷組件的輸出是否受但錢state或peops更改影響。默認(rèn)行為是state每次發(fā)生變化組件都會(huì)重新渲染。大部分情況下，應(yīng)該遵循默認(rèn)行為。
② componentWillUpdate
Ⅰ、執(zhí)行
組件即將被重新渲染前觸發(fā)
Ⅱ、能做什么
用于準(zhǔn)備更新前的工作
③ render
Ⅰ、執(zhí)行
根據(jù)組件的props和state
Ⅱ、能做什么
渲染UI，返回需要渲染的元素結(jié)構(gòu)
④ componentDidUpdate
Ⅰ、執(zhí)行
componentDidUpdate() 會(huì)在更新后會(huì)被立即調(diào)用。首次渲染不會(huì)執(zhí)行此方法。
Ⅱ、能做什么
當(dāng)組件更新后，可以在此處對(duì) DOM 進(jìn)行操作。如果你對(duì)更新前后的 props 進(jìn)行了比較，也可以選擇在此處進(jìn)行網(wǎng)絡(luò)請(qǐng)求。
3.卸載階段
① componentWillUnmount
Ⅰ、執(zhí)行
componentWillUnmount() 會(huì)在組件卸載及銷毀之前直接調(diào)用。
Ⅱ、能做什么
在此方法中執(zhí)行必要的清理操作，例如，清除 timer，取消網(wǎng)絡(luò)請(qǐng)求或清除在 componentDidMount() 中創(chuàng)建的訂閱等。
二、生命周期（新）
1.初始化階段(掛載階段)
① constructor
Ⅰ、執(zhí)行
組件實(shí)例被創(chuàng)建并初始化時(shí)觸發(fā)
Ⅱ、能做什么
- 通過給 this.state 賦值對(duì)象來初始化內(nèi)部 state。
- 為事件處理函數(shù)綁定實(shí)例
② getDerivedStateFromProps
Ⅰ、執(zhí)行
getDerivedStateFromProps 會(huì)在調(diào)用 render 方法之前調(diào)用，并且在初始掛載及后續(xù)更新時(shí)都會(huì)被調(diào)用。
Ⅱ、能做什么
它應(yīng)返回一個(gè)對(duì)象來更新 state，如果返回 null 則不更新任何內(nèi)容。
③ render
Ⅰ、執(zhí)行
根據(jù)組件的props和state
Ⅱ、能做什么
渲染UI，返回需要渲染的元素結(jié)構(gòu)
④ componentDidMount
Ⅰ、執(zhí)行
componentDidMount() 會(huì)在組件掛載后（插入 DOM 樹中）立即調(diào)用。依賴于 DOM 節(jié)點(diǎn)的初始化應(yīng)該放在這里
Ⅱ、能做什么
這個(gè)方法是比較適合添加訂閱的地方。如果添加了訂閱，請(qǐng)不要忘記在 componentWillUnmount() 里取消訂閱
2.更新階段
① getDerivedStateFromProps
Ⅰ、執(zhí)行
getDerivedStateFromProps 會(huì)在調(diào)用 render 方法之前調(diào)用，并且在初始掛載及后續(xù)更新時(shí)都會(huì)被調(diào)用。
Ⅱ、能做什么
它應(yīng)返回一個(gè)對(duì)象來更新 state，如果返回 null 則不更新任何內(nèi)容。
② shouldComponentUpdate
Ⅰ、執(zhí)行
當(dāng) props 或 state 發(fā)生變化時(shí)，shouldComponentUpdate() 會(huì)在渲染執(zhí)行之前被調(diào)用。
Ⅱ、能做什么
根據(jù)shouldComponentUpdate的返回值，判斷組件的輸出是否受但錢state或peops更改影響。默認(rèn)行為是state每次發(fā)生變化組件都會(huì)重新渲染。大部分情況下，應(yīng)該遵循默認(rèn)行為。
③ render
Ⅰ、執(zhí)行
根據(jù)組件的props和state
Ⅱ、能做什么
渲染UI，返回需要渲染的元素結(jié)構(gòu)
④ getSnapshotBeforeUpdate
Ⅰ、執(zhí)行
getSnapshotBeforeUpdate() 在最近一次渲染輸出（提交到 DOM 節(jié)點(diǎn)）之前調(diào)用。
Ⅱ、能做什么
它使得組件能在發(fā)生更改之前從 DOM 中捕獲一些信息（例如，滾動(dòng)位置）。此生命周期方法的任何返回值將作為參數(shù)傳遞給 componentDidUpdate()。
⑤ componentDidUpdate
Ⅰ、執(zhí)行
componentDidUpdate() 會(huì)在更新后會(huì)被立即調(diào)用。首次渲染不會(huì)執(zhí)行此方法。
Ⅱ、能做什么
當(dāng)組件更新后，可以在此處對(duì) DOM 進(jìn)行操作。如果你對(duì)更新前后的 props 進(jìn)行了比較，也可以選擇在此處進(jìn)行網(wǎng)絡(luò)請(qǐng)求。
3.卸載階段
① componentWillUnmount
Ⅰ、執(zhí)行
componentWillUnmount() 會(huì)在組件卸載及銷毀之前直接調(diào)用。
Ⅱ、能做什么
在此方法中執(zhí)行必要的清理操作，例如，清除 timer，取消網(wǎng)絡(luò)請(qǐng)求或清除在 componentDidMount() 中創(chuàng)建的訂閱等。
三、生命周期新舊整體圖片
四、三個(gè)被遺棄的生命周期函數(shù)
以下生命周期方法標(biāo)記為“過時(shí)”。這些方法任然有效，但不建議在新代碼中使用它們。使用這被遺棄的生命周期需要在前面加上UNSAFE_，但是不加也沒事（建議加上）。
1、UNSAFE_componentWillMount()
Ⅰ、執(zhí)行
UNSAFE_componentWillMount() 是 React 組件生命周期中的一個(gè)方法，用于在組件掛載（即被渲染到 DOM 中）之前調(diào)用。
Ⅱ、能做什么
在組件更新之前執(zhí)行一些操作。它接收兩個(gè)參數(shù)：nextProps和nextState，分別表示組件即將更新的props和state。
2、UNSAFE_componentWillReceiveProps()
Ⅰ、執(zhí)行
用于在組件接收新的props時(shí)觸發(fā)。
Ⅱ、能做什么
允許組件根據(jù)即將接收到的新props進(jìn)行一些操作，例如更新組件的狀態(tài)或執(zhí)行一些副作用操作。在這個(gè)方法中，可以比較當(dāng)前props和即將接收到的props的差異，并根據(jù)需要進(jìn)行相應(yīng)的處理。
3、UNSAFE_componentWillMount()
Ⅰ、執(zhí)行
當(dāng)組件的props或state發(fā)生變化，并且在重新渲染之前，UNSAFE_componentWillUpdate()方法會(huì)被調(diào)用。
Ⅱ、能做什么
UNSAFE_componentWillUpdate()的作用是在組件更新之前執(zhí)行一些操作。它接收兩個(gè)參數(shù)：nextProps和nextState，分別表示組件即將更新的props和state。
五、新增的兩個(gè)生命周期函數(shù)
1、getDerivedStateFromProps
執(zhí)行：
static getDerivedStateFromProps(props, state)
在組件創(chuàng)建時(shí)和更新時(shí)的render方法之前調(diào)用。
作用：文章來源：http://www.zghlxwxcb.cn/news/detail-680687.html
它應(yīng)該返回一個(gè)對(duì)象來更新狀態(tài)，或者返回null來不更新任何內(nèi)容。
2、getSnapshotBeforeUpdate
執(zhí)行：
getSnapshotBeforeUpdate()
被調(diào)用于render之后，可以讀取但無法使用DOM的時(shí)候。
作用：
它使您的組件可以在可能更改之前從DOM捕獲一些信息（例如滾動(dòng)位置）。此生命周期返回的任何值都將作為參數(shù)傳遞給componentDidUpdate（）。文章來源地址http://www.zghlxwxcb.cn/news/detail-680687.html
到了這里，關(guān)于React生命周期（新-舊）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
