伊人久久大香线蕉综合影视_日韩精品少妇无码受不了_71pao成人国产永久免费视频_国产伦片中文免费观看_国产高清无码麻豆精品_九色综合伊人久久富二代_日韩黄色精品_日韩A∨精品日韩精品无码

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

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

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


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

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

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

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

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

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

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

相關(guān)鏈接:

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

日歷

鏈接

個(gè)人資料

存檔

历史| 宁陵县| 临猗县| 霍林郭勒市| 高邑县| 吉木乃县| 汉沽区| 东阳市| 林周县| 凤阳县| 宣汉县| 泰顺县| 图木舒克市| 唐河县| 莱芜市| 江门市| 贵州省| 彭水| 米脂县| 昌吉市| 博白县| 岳西县| 库尔勒市| 绥宁县| 黎川县| 梓潼县| 五莲县| 信阳市| 枝江市| 特克斯县| 丰原市| 广西| 鸡泽县| 南召县| 清苑县| 仁寿县| 宾阳县| 古丈县| 岳普湖县| 康保县| 临西县|