亚洲另类97色波,四季久久免费一区二区三区四区,丰满蜜桃精品视频网,国产在线观看无码九色8X视频亚洲中文字幕久久精品无码喷水_国产精品无码一区二区

淺入 React 生命周期相關(guān)（二）更新生命周期

2019-6-13    seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里


更新階段分為兩部分 父組件執(zhí)行 render 或者調(diào)用 this.setState。

componentWillReceiveProps
大部分網(wǎng)上教程為外部 props 發(fā)生改變才觸發(fā) componentWillReceiveProps，其實(shí)不是，當(dāng)父組件進(jìn)入 render 時，無論子組件的 props 發(fā)沒發(fā)生改變，都會執(zhí)行該生命周期函數(shù)。 
函數(shù)參數(shù)有一個，為 nextProps，為將要新的 props。 
值得注意的是，在整個更新階段的生命周期函數(shù)，只有在此函數(shù)內(nèi)可以調(diào)用 this.setState 方法，當(dāng)然其他也可以調(diào)用，但是會造成死循環(huán) 。

shouldComponentUpdate
該函數(shù)需要返回值，如沒定義則默認(rèn)返回 true。當(dāng)返回值為 true 時，進(jìn)入 componentWillIpdate ，如為 false ，則什么都不發(fā)生。所以說這是一個可以進(jìn)行 React 性能優(yōu)化的地方。函數(shù)參數(shù)有兩個 nextProps 和 nextState。我們需用做的就是在 this.props、this.state、nextState、nextProps之間進(jìn)行對比，來解決重復(fù)渲染的目的。

componentWillUpdate
如果 shouldComponentUpdate 返回值為 true 的話，生命周期會進(jìn)入該函數(shù)中。在這個函數(shù)中我們可以根據(jù)實(shí)際情況做一些事情，但是不能調(diào)用 this.setState。

render
在更新階段的 render 來講一講 調(diào)和 過程。 render 返回的 JSX 標(biāo)簽會保存在內(nèi)存中，react 會通過 diff 算法來計算出最小化改動完成差異的更新。diff 是逐層遞歸比較，首先比較類型是否一樣。如果發(fā)現(xiàn) <div>和 <span> 的差別的話，react 會選擇直接放棄之前的 dom 元素， 重新渲染。所以說即使是更新階段的調(diào)和過程，也會觸發(fā)組件的掛載、卸載階段。

componentDidUpdate
在這個時候已經(jīng)更新完 dom 結(jié)構(gòu)，可以重新使用 dom 操作。

總結(jié)
總體來說更新的生命周期要做的最重要的事情就是性能優(yōu)化，減少重復(fù)渲染次數(shù)。 
在這個方面已經(jīng)有很多成熟的解決方法了，在我的博客中也會介紹如何定制更新階段的生命周期函數(shù)。 
在使用上，最最重要的一點(diǎn)就是不要在除了 componentWillReceiveProps 之外的其他更新階段生命周期函數(shù)內(nèi)調(diào)用 this.setState。

相關(guān)鏈接：

淺入 React 生命周期相關(guān)（一）掛載生命周期
--------------------- 

分享本文至：

日歷

鏈接

個人資料

存檔