React源碼分析 - 生命周期

React的生命周期函數是平時開發過程中經常會使用到的鉤子函數，需要注意的地方在於：

1. 生命周期函數被執行的時機。
2. 這些方法中的setState的使用與否以及產生的效果如何。

生命周期函數在組件初次渲染、組件更新以及組件卸載的情況下會被調用，沒什麼特別的機制上的特殊的地方，需要注意的就是多層級的組件中的各個組件的生命周期函數的執行會遵循父組件至子組件遞歸的順序，這和組件渲染、更新和卸載時的遍歷順序有關係，這裡要注意的是在遞歸點之前被調用的函數是遵循 父組件->子組件 的順序；在遞歸點後調用的函數是遵循 子組件->父組件 的順序，具體可以看之前的《組件初次渲染》和《組件更新》兩篇文章中的流程圖，生命周期函數就是在這個過程中被執行的，有的生命周期函數會使用事務的方式，按順序搜集到一個隊列中，在事務結束的時候一併執行，這樣一方面保證了執行的順序另一方面也可以保證函數執行的統一的時機。

引用一張圖來描述如下【圖片來源：React 組件的生命周期】：

下面主要總結一些需要注意的點【大部分摘抄自參考資料】，原理不解釋了，源碼可以很明白的看懂：

• componentWillMount中調用setState是不會觸發re-render的，而是會進行state合併。componentWillMount中的this.state不是最新的，在render中才可以獲得更新之後的this.state。
• 遞歸點是render方法，因此根據遞歸的特性，父組件的componentWillMount在其子組件的componentWillMount之前調用，而父組件的componentDidMount在其子組件的componentDidMount之後調用。
• componentWillReceiveProps中調用setState是不會觸發re-render的，而是進行state的合併。。
• 只有在render和componentDIdUpdate中才能獲取到更新後的this.state。
• 和mount階段一樣在update階段遞歸點是render，父子組件的 componentWillUpdate -> render-> componentDidUpdate 執行的順序類似mount階段，就不重複了。
• shouldComponentUpdate和componentWillUpdate中無條件調用（沒有額外的判斷是否執行setState）setState，會造成循環調用，然後卡到崩潰。
• 在componentWillUnmount中調用setState不會觸發re-render.......因為組件都要被卸載了....內部保存的狀態都被null了巴拉巴拉，不過可以在這裡去resolve一些和被卸載組件有關的非同步的調用。
• 無狀態組件就別說生命周期函數了~，本質上就是把return的ReactElement作為自定義組件的render一樣的效果來處理，因此無狀態組件非常簡單和高效，只是為了渲染展示的。

恩，基本上需要注意的點如上，說了這些，我想說的是在React 16.0.0版本後的生命周期函數的改動很大，一方面是Fiber模式的使用（目前只是知道些概念，具體之後了解了再細說），另一方面，也因此，部分生命周期函數的使用會變得不推薦（給你個warning噁心你~）。

參考資料

• 深入React技術棧
• React 組件的生命周期

推薦閱讀：