? 浅入 React 生命周期相关(二)更新生命周期 - 蓝蓝设计_UI设计公司

追求卓越一諾千金

藍藍設計,2011年成立,主創清華團隊,專注軟件和互聯網ui設計開發。擅長企業信息化管理、監控、大數據軟件UIUE咨詢和設計開發服務。立足UI,好好學習,天天進步!


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

2019-6-14 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容,每天自動發到您的郵箱中,


更新階段分為兩部分 父組件執行 render 或者調用 this.setState。

componentWillReceiveProps
大部分網上教程為外部 props 發生改變才觸發 componentWillReceiveProps,其實不是,當父組件進入 render 時,無論子組件的 props 發沒發生改變,都會執行該生命周期函數。 
函數參數有一個,為 nextProps,為將要新的 props。 
值得注意的是,在整個更新階段的生命周期函數,只有在此函數內可以調用 this.setState 方法,當然其他也可以調用,但是會造成死循環 。

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

componentWillUpdate
如果 shouldComponentUpdate 返回值為 true 的話,生命周期會進入該函數中。在這個函數中我們可以根據實際情況做一些事情,但是不能調用 this.setState。

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

componentDidUpdate
在這個時候已經更新完 dom 結構,可以重新使用 dom 操作。

總結
總體來說更新的生命周期要做的最重要的事情就是性能優化,減少重復渲染次數。 
在這個方面已經有很多成熟的解決方法了,在我的博客中也會介紹如何定制更新階段的生命周期函數。 
在使用上,最最重要的一點就是不要在除了 componentWillReceiveProps 之外的其他更新階段生命周期函數內調用 this.setState。

相關鏈接:

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

標簽: React 淺入 生命周期相關(二)更新生命周期 « 這兩天火遍全球的沉浸式新媒體設計,是如何讓想象力爆炸的? | 重新學習 React (一) 生命周期,Fiber 調度和更新機制»


藍藍 http://www.thriveonsite.com

訂閱Rss
网赚论坛排行榜 互联网赚钱机器 PC蛋蛋机器人 支付宝网赚活动真实吗 千禧彩票手机app下载 广发彩票 平安彩票 真实网赚玩彩票是骗局吗 幸运飞艇直播链接 19年点击网赚