react的生命週期有哪些？有什麼須要注意的地方?

20190304期

react的生命週期有哪些？有什麼須要注意的地方?

生命週期是什麼這裏再也不累述了，有興趣能夠點這裏

react的生命週期

這裏咱們以react v16.3爲準

先上一張圖

從圖中咱們能夠看出來react生命週期分爲三個部分

• mounting 裝載處理
• updation 更新處理
• ummounting 卸載處理

Mounting

Mounting 英譯過來叫作裝備，裝配的意思，在react這裏咱們理解爲應用加載的過程，react在這個階段作了哪些事情咱們列舉一下

• constructor 主要作些初始化操做，如初始化state、綁定成員的this環境
• getDerivedStateFromPorps 渲染以前都會觸發
• componentDidMount 渲染到頁面中後觸發,這時能夠操做ＤＯＭ

Updation

三種狀況會觸發組件更新

• props被改變
• 主動調用setState 狀態改變
• forceUpdate 強制從新render

這三種狀況在react中也會不一樣的處理,forceUpdate最直接,既然是強制的那麼什麼好說的，直接進入render函數, 當props發生改變時會進入 getDerivedStateFromPorps函數處理完後進入shouldComponentUpdate(劃重點，待會要考)更新完後進入componentDidUpdate函數

有同窗應該注意到了, 上面劃了一個重點 shouldComponentUpdate, 這裏咱們解釋一下, 這個也是react中一個可優化的點

shouldComponentUpdate 音譯過來咱們能夠猜出來一點，這個函數是能夠控制組件是否須要更新的

事實也正是如此

場景隨意列舉一個吧, 好比你有一個大列表，這時props裏一個與其不相干的屬性發生變化， 進入了你的updation流程，若是你不處理那麼你的頁面將會進行一次無心義的渲染，這不是咱們想要看見的，若是你在shouldComponentUpdate中阻止了流程繼續往下走，你就減小了頁面的渲染次數，在react應用中用好shouldComponentUpdate這個是很重要的

Unmounting

react 爲組件卸載也提供一個函數

• componentWillUnmount 在組件卸載前觸發

另外還有一個圖上沒有提到的，卻很實用的一個hook

• componentDidcatch 當組件發生錯誤觸發，使用場景不少對吧，調試，埋點上報都能用上

回顧老版本

在 16.3以前的生命週期能夠你們更熟悉，這裏就貼一下圖不作累述了

關於JS每日一題

JS每日一題能夠當作是一個語音答題社區
天天利用碎片時間採用60秒內的語音形式來完成當天的考題
羣主在第二天0點推送當天的參考答案

• 注 毫不僅限於完成當天任務，更可能是查漏補缺，學習羣內其它同窗優秀的答題思路

點擊加入答題