概念介紹

componentWillMount

componentWillMount 是 React 組件的生命周期方法之一，它在組件即將被掛載到 DOM 中之前被調(diào)用。在該方法中，你可以執(zhí)行一些準(zhǔn)備工作，例如初始化狀態(tài)、訂閱事件或者發(fā)送網(wǎng)絡(luò)請(qǐng)求等。

具體來(lái)說(shuō)，componentWillMount 方法會(huì)在組件的 render 方法之前被調(diào)用，因此在這個(gè)階段對(duì)組件進(jìn)行的狀態(tài)更新不會(huì)觸發(fā)重新渲染。一般來(lái)說(shuō)，你應(yīng)該避免在 componentWillMount 中進(jìn)行過多的耗時(shí)操作，因?yàn)檫@可能會(huì)影響到組件的性能。

值得注意的是，componentWillMount 方法在組件的生命周期中僅會(huì)被調(diào)用一次，在組件的整個(gè)生命周期內(nèi)僅執(zhí)行一次。

在 React 17 版本及以后，componentWillMount 方法已被標(biāo)記為不推薦使用，并且在 React 18 版本中可能會(huì)被移除。推薦使用 componentDidMount 來(lái)替代 componentWillMount，因?yàn)?nbsp;componentDidMount 更適合進(jìn)行初始化操作，并且更符合異步渲染的模式。

componentWillReceiveProps

componentWillReceiveProps 是 React 組件的生命周期方法之一，它在組件接收到新的 props 之前被調(diào)用。在這個(gè)方法中，你可以根據(jù)新的 props 來(lái)更新組件的狀態(tài)或執(zhí)行其他一些操作。

具體來(lái)說(shuō)，componentWillReceiveProps(nextProps) 方法會(huì)在組件即將接收新的 props 時(shí)被調(diào)用。它接收一個(gè)參數(shù) nextProps，即即將被傳入的 props。通過比較 nextProps 和當(dāng)前的 props，你可以根據(jù)需要進(jìn)行一些邏輯處理。

需要注意的是，componentWillReceiveProps 方法在組件的第一次渲染過程中不會(huì)被調(diào)用。它只會(huì)在組件已經(jīng)被掛載到 DOM 中后，并且父組件傳入新的 props 時(shí)觸發(fā)。此外，如果組件是由于父組件的重新渲染而導(dǎo)致的 props 變化，那么 componentWillReceiveProps 也會(huì)被調(diào)用。

然而，需要注意的是，從 React 16.3 版本開始，componentWillReceiveProps 被標(biāo)記為不推薦使用，并且在未來(lái)的版本中可能會(huì)被移除。推薦使用新的生命周期方法 getDerivedStateFromProps 或者在必要時(shí)使用 componentDidUpdate 來(lái)替代 componentWillReceiveProps。這是因?yàn)?nbsp;getDerivedStateFromProps 提供了更加明確和可控的狀態(tài)更新機(jī)制，而 componentDidUpdate 則更適合進(jìn)行副作用操作。

componentWillUpdate

componentWillUpdate 是 React 組件的生命周期方法之一，它在組件即將更新并且重新渲染到 DOM 中之前被調(diào)用。在該方法中，你可以執(zhí)行一些與組件更新相關(guān)的操作，例如根據(jù)新的 props 或 state 進(jìn)行一些計(jì)算或準(zhǔn)備工作。

具體來(lái)說(shuō)，componentWillUpdate 方法會(huì)在組件的 render 方法之前被調(diào)用，并且只會(huì)在組件接收到新的 props 或 state 并且需要重新渲染時(shí)觸發(fā)。在這個(gè)方法中，你可以訪問到組件更新前的 props 和 state，以及即將更新的 props 和 state。然后，你可以根據(jù)這些值進(jìn)行一些邏輯處理，例如比較新舊 props 或 state 的差異，做出相應(yīng)的響應(yīng)。

需要注意的是，盡管在 componentWillUpdate 中可以執(zhí)行一些與更新相關(guān)的操作，但不建議在這個(gè)方法中進(jìn)行對(duì)組件進(jìn)行狀態(tài)更新，因?yàn)檫@可能會(huì)導(dǎo)致無(wú)限循環(huán)的更新。如果需要在更新后執(zhí)行某些操作，應(yīng)該使用 componentDidUpdate 方法。

在 React 17 版本及以后，componentWillUpdate 方法已被標(biāo)記為不推薦使用，并且在 React 18 版本中可能會(huì)被移除。推薦使用 componentDidUpdate 來(lái)替代 componentWillUpdate，因?yàn)?nbsp;componentDidUpdate 更適合進(jìn)行與更新相關(guān)的操作，并且更符合異步渲染的模式。

react為什么要廢棄ComponentWillMount、ReceiveProps和Update這三個(gè)生命周期

在 React 中，componentWillMount、componentWillReceiveProps 和 componentWillUpdate 這三個(gè)生命周期方法被廢棄，主要是出于以下幾個(gè)原因

異步渲染的引入

React 16 開始引入了異步渲染的概念，以提高性能和用戶體驗(yàn)。在異步渲染模式下，組件的生命周期方法不再保證同步執(zhí)行。因此，之前的生命周期方法可能會(huì)在不可預(yù)測(cè)的時(shí)機(jī)被觸發(fā)，導(dǎo)致不一致的行為和難以調(diào)試的問題。為了解決這個(gè)問題，React 棄用了一些生命周期方法，以確保組件的行為更加可預(yù)測(cè)和穩(wěn)定。

未來(lái)版本的計(jì)劃

React 團(tuán)隊(duì)在未來(lái)版本中計(jì)劃引入更多的異步渲染特性和優(yōu)化，這需要對(duì)生命周期進(jìn)行更改和調(diào)整。廢棄一些舊的生命周期方法是為了為未來(lái)的變更做準(zhǔn)備，以確保向后兼容性和平滑過渡。

新的生命周期方法替代

React 推薦使用新的生命周期方法來(lái)替代被廢棄的方法，例如 componentDidMount、componentDidUpdate 和 getDerivedStateFromProps。這些新的方法更符合 React 的設(shè)計(jì)理念，并且能夠更好地滿足開發(fā)者的需求。 雖然廢棄了部分生命周期方法，但 React 仍然保持了向后兼容性，舊的代碼仍然可以正常工作。然而，為了獲得更好的性能和穩(wěn)定性，建議開發(fā)者盡量使用新的生命周期方法和鉤子函數(shù)。

componentDidUpdate、componentDidMount和getDerivedStateFromProps

這三個(gè)生命周期方法 componentDidUpdate、componentDidMount 和 getDerivedStateFromProps 在 React 中的實(shí)現(xiàn)原理和為什么更支持異步渲染可以概括如下

componentDidUpdate:

• 實(shí)現(xiàn)原理componentDidUpdate 是 React 組件的生命周期方法之一，它在組件完成更新并且重新渲染到 DOM 中后被調(diào)用。在該方法中，我們可以執(zhí)行一些與更新后的 DOM 相關(guān)的操作，例如更新 DOM 元素、發(fā)送網(wǎng)絡(luò)請(qǐng)求、進(jìn)行狀態(tài)更新等。React 會(huì)在每次組件完成更新后調(diào)用 componentDidUpdate 方法。
• 支持異步componentDidUpdate 支持異步渲染的主要原因是，它在組件完成更新后被調(diào)用，這意味著在調(diào)用這個(gè)方法時(shí)，React 已經(jīng)將更新后的 DOM 渲染到頁(yè)面上，從而可以保證對(duì) DOM 的操作是安全的并且不會(huì)導(dǎo)致頁(yè)面閃爍或不穩(wěn)定。

componentDidMount:

• 實(shí)現(xiàn)原理componentDidMount 是 React 組件的生命周期方法之一，它在組件被掛載到 DOM 中后被調(diào)用。在該方法中，我們可以執(zhí)行一些初始化操作，例如訂閱事件、發(fā)送網(wǎng)絡(luò)請(qǐng)求、獲取 DOM 元素等。React 會(huì)在組件掛載完成后調(diào)用 componentDidMount 方法。
• 支持異步componentDidMount 支持異步渲染的主要原因是，它在組件被掛載到 DOM 后被調(diào)用，這意味著在調(diào)用這個(gè)方法時(shí)，React 已經(jīng)將組件成功渲染到頁(yè)面上，從而可以安全地執(zhí)行與 DOM 相關(guān)的操作。

getDerivedStateFromProps:

• 實(shí)現(xiàn)原理getDerivedStateFromProps 是 React 16.3 版本引入的生命周期方法之一，它在組件接收到新的 props 并且在 render 方法之前被調(diào)用。在該方法中，我們可以根據(jù)新的 props 來(lái)更新組件的 state。getDerivedStateFromProps 是一個(gè)靜態(tài)方法，它不能訪問組件的實(shí)例對(duì)象，只能接收 props 和 state 作為參數(shù)，并返回一個(gè)對(duì)象來(lái)更新 state，或者返回 null 表示不需要更新 state。
• 支持異步getDerivedStateFromProps 支持異步渲染的原因是，它在 render 方法之前被調(diào)用，這意味著在執(zhí)行 render 方法之前，React 可以根據(jù)新的 props 來(lái)計(jì)算出新的 state，并將其應(yīng)用到組件中，從而實(shí)現(xiàn)異步更新。

總結(jié)一下，這三個(gè)生命周期方法都支持異步渲染的原因是它們都在組件更新之后或者掛載之后被調(diào)用，這意味著在調(diào)用這些方法時(shí)，React 已經(jīng)完成了相應(yīng)的 DOM 渲染或組件掛載，從而可以安全地執(zhí)行與 DOM 相關(guān)的操作。因此，這些方法更適合用于執(zhí)行與 DOM 操作相關(guān)的異步任務(wù)。