• 1. 掛載卸載過程
  • 1.1.constructor()
  • 1.2.componentWillMount()
  • 1.3.componentDidMount()
  • 1.4.componentWillUnmount ()
• 2. 更新過程
  • 2.1. componentWillReceiveProps (nextProps)
  • 2.2.shouldComponentUpdate(nextProps,nextState)
  • 2.3.componentWillUpdate (nextProps,nextState)
  • 2.4.componentDidUpdate(prevProps,prevState)
  • 2.5.render()
• 3. React新增的生命周期(個(gè)人補(bǔ)充)
  • 3.1. getDerivedStateFromProps(nextProps, prevState)
  • 3.2. getSnapshotBeforeUpdate(prevProps, prevState)

---

這周開始學(xué)習(xí)React的生命周期。

React的生命周期從廣義上分為三個(gè)階段：掛載、渲染、卸載

因此可以把React的生命周期分為兩類：掛載卸載過程和更新過程。
React的生命周期圖:

1. 掛載卸載過程

1.1.constructor()

constructor()中完成了React數(shù)據(jù)的初始化，它接受兩個(gè)參數(shù)：props和context，當(dāng)想在函數(shù)內(nèi)部使用這兩個(gè)參數(shù)時(shí)，需使用super()傳入這兩個(gè)參數(shù)。
注意：只要使用了constructor()就必須寫super(),否則會(huì)導(dǎo)致this指向錯(cuò)誤。

1.2.componentWillMount()

componentWillMount()一般用的比較少，它更多的是在服務(wù)端渲染時(shí)使用。它代表的過程是組件已經(jīng)經(jīng)歷了constructor()初始化數(shù)據(jù)后，但是還未渲染DOM時(shí)。

1.3.componentDidMount()

組件第一次渲染完成，此時(shí)dom節(jié)點(diǎn)已經(jīng)生成，可以在這里調(diào)用ajax請(qǐng)求，返回?cái)?shù)據(jù)setState后組件會(huì)重新渲染

1.4.componentWillUnmount ()

在此處完成組件的卸載和數(shù)據(jù)的銷毀。

clear你在組建中所有的setTimeout,setInterval

移除所有組建中的監(jiān)聽 removeEventListener

有時(shí)候我們會(huì)碰到這個(gè)warning:

Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.

原因：因?yàn)槟阍诮M件中的ajax請(qǐng)求返回setState,而你組件銷毀的時(shí)候，請(qǐng)求還未完成，因此會(huì)報(bào)warning
解決方法：

componentDidMount() {this.isMount === trueaxios.post().then((res) => {this.isMount && this.setState({ // 增加條件ismount為true時(shí)aaa:res}) }) } componentWillUnmount() {this.isMount === false }

2. 更新過程

2.1. componentWillReceiveProps (nextProps)

在接受父組件改變后的props需要重新渲染組件時(shí)用到的比較多

接受一個(gè)參數(shù)nextProps

通過對(duì)比nextProps和this.props，將nextProps的state為當(dāng)前組件的state，從而重新渲染組件

componentWillReceiveProps (nextProps) {nextProps.openNotice !== this.props.openNotice&&this.setState({openNotice:nextProps.openNotice}，() => {console.log(this.state.openNotice:nextProps)//將state更新為nextProps,在setState的第二個(gè)參數(shù)（回調(diào)）可以打 印出新的state}) }

2.2.shouldComponentUpdate(nextProps,nextState)

主要用于性能優(yōu)化(部分更新)

唯一用于控制組件重新渲染的生命周期，由于在react中，setState以后，state發(fā)生變化，組件會(huì)進(jìn)入重新渲染的流程，在這里return false可以阻止組件的更新

因?yàn)閞eact父組件的重新渲染會(huì)導(dǎo)致其所有子組件的重新渲染，這個(gè)時(shí)候其實(shí)我們是不需要所有子組件都跟著重新渲染的，因此需要在子組件的該生命周期中做判斷

2.3.componentWillUpdate (nextProps,nextState)

shouldComponentUpdate返回true以后，組件進(jìn)入重新渲染的流程，進(jìn)入componentWillUpdate,這里同樣可以拿到nextProps和nextState。

2.4.componentDidUpdate(prevProps,prevState)

組件更新完畢后，react只會(huì)在第一次初始化成功會(huì)進(jìn)入componentDidmount,之后每次重新渲染后都會(huì)進(jìn)入這個(gè)生命周期，這里可以拿到prevProps和prevState，即更新前的props和state。

2.5.render()

render函數(shù)會(huì)插入jsx生成的dom結(jié)構(gòu)，react會(huì)生成一份虛擬dom樹，在每一次組件更新時(shí)，在此react會(huì)通過其diff算法比較更新前后的新舊DOM樹，比較以后，找到最小的有差異的DOM節(jié)點(diǎn)，并重新渲染。

3. React新增的生命周期(個(gè)人補(bǔ)充)

React新增生命周期

?

3.1. getDerivedStateFromProps(nextProps, prevState)

代替componentWillReceiveProps()。老版本中的componentWillReceiveProps()方法判斷前后兩個(gè) props 是否相同，如果不同再將新的 props 更新到相應(yīng)的 state 上去。這樣做一來(lái)會(huì)破壞 state 數(shù)據(jù)的單一數(shù)據(jù)源，導(dǎo)致組件狀態(tài)變得不可預(yù)測(cè)，另一方面也會(huì)增加組件的重繪次數(shù)。
舉個(gè)例子:

// before componentWillReceiveProps(nextProps) {if (nextProps.isLogin !== this.props.isLogin) {this.setState({ isLogin: nextProps.isLogin, });}if (nextProps.isLogin) {this.handleClose();} }// after static getDerivedStateFromProps(nextProps, prevState) {if (nextProps.isLogin !== prevState.isLogin) {return {isLogin: nextProps.isLogin,};}return null; }componentDidUpdate(prevProps, prevState) {if (!prevState.isLogin && this.props.isLogin) {this.handleClose();} }

這兩者最大的不同就是:在 componentWillReceiveProps 中，我們一般會(huì)做以下兩件事，一是根據(jù) props 來(lái)更新 state，二是觸發(fā)一些回調(diào)，如動(dòng)畫或頁(yè)面跳轉(zhuǎn)等。

在老版本的 React 中，這兩件事我們都需要在 componentWillReceiveProps 中去做。

而在新版本中，官方將更新 state 與觸發(fā)回調(diào)重新分配到了 getDerivedStateFromProps 與 componentDidUpdate 中，使得組件整體的更新邏輯更為清晰。而且在 getDerivedStateFromProps 中還禁止了組件去訪問 this.props，強(qiáng)制讓開發(fā)者去比較 nextProps 與 prevState 中的值，以確保當(dāng)開發(fā)者用到 getDerivedStateFromProps 這個(gè)生命周期函數(shù)時(shí)，就是在根據(jù)當(dāng)前的 props 來(lái)更新組件的 state，而不是去做其他一些讓組件自身狀態(tài)變得更加不可預(yù)測(cè)的事情。

3.2. getSnapshotBeforeUpdate(prevProps, prevState)

代替componentWillUpdate。常見的 componentWillUpdate 的用例是在組件更新前，讀取當(dāng)前某個(gè) DOM 元素的狀態(tài)，并在 componentDidUpdate 中進(jìn)行相應(yīng)的處理。
這兩者的區(qū)別在于：

在 React 開啟異步渲染模式后，在 render 階段讀取到的 DOM 元素狀態(tài)并不總是和 commit 階段相同，這就導(dǎo)致在
componentDidUpdate 中使用 componentWillUpdate 中讀取到的 DOM 元素狀態(tài)是不安全的，因?yàn)檫@時(shí)的值很有可能已經(jīng)失效了。

getSnapshotBeforeUpdate 會(huì)在最終的 render 之前被調(diào)用，也就是說在 getSnapshotBeforeUpdate 中讀取到的 DOM 元素狀態(tài)是可以保證與 componentDidUpdate 中一致的。
此生命周期返回的任何值都將作為參數(shù)傳遞給componentDidUpdate（）。

總結(jié)

以上是生活随笔為你收集整理的React的组件生命周期的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。