淺聊本人學習React的歷程——第一篇生命週期篇

　　做爲一個前端小白，在踏入前端程序猿行業的第三年接觸了React，一直對於框架有種恐懼感，多是對陌生事物的恐懼內心吧，致使本身一直在使用原生JS和JQ做爲開發首選，可是在接觸了React以後，發現了其強大的能力，尤爲是在開發大型企業級應用的時候，其自帶的生命週期函數和原型能夠幫助你減小大量的冗雜的JS代碼，同時頁面渲染十分順暢，話很少數，下面進入React。

　　涉及到生命週期函數，首先要問幾個問題。有哪些生命週期函數？每一個生命週期函數都是在什麼時候被加載？加載之後的效果都是什麼？這裏面有趣的地方在哪裏？在解答這幾個問題以前先上生命週期圖~

　　1、有哪些生命週期函數（即鉤子函數）

　　按照常規所記的順序，依次以下：constructor、componentWillMount、render、componentDidMount、componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentDidUpdate、componentWillUnmount。

　　2、具體函數分析

　　1. constructor()： 構造函數

　　constructor函數在組件被加載以前調用，也就是最早被調用，並且只會被調用一次。注意：該函數內部第一句必須是super（props），若是不加這句話，會報‘this’ is not allowed before super()的錯！

　　該函數做用是在一開始定義全局狀態變量，同時默認接收兩個參數props和context，

　　2. componentWillMount() 

　　componentWillMount函數在組件初始渲染（即reader() 被調用以前）被調用，也是隻會被調用一次。能夠在該函數中進行state狀態機的更改，在以後的render函數會看到更新後的state，並且不會重複渲染。

　　注意：該函數在在react16.3.0版本中止維護，若是要使用的話，請用UNSAFE_componentWillMount來代替。

　　3. render() ： 渲染組件

　　render函數執行在componentWillMount以後，componentDidMount以前被調用。該函數的做用是渲染將要掛載的組件。千萬不要在該函數之中修改state，這樣會致使死循環，雖然在其中能夠設置state，可是你在渲染組件以前所進行的全部狀態機的操做都會失效。它會在狀態機更新和初始化頁面的時候從新加載。

　　4.componentDidMount() 

　　componentDidMount函數在組件掛載完成以後加載，也是隻會被調用一次。在其中可使用React中的特殊屬性—refs來準肯定位你須要操做或者獲取的組件實例。

　　若是子組件中也設置了該函數，那麼子組件中的該函數將在父組件的該函數執行前被調用！

　　5.componentWillReceiveProps ( nextProps ) 

　　該函數被調用在props即將變化以前，也就是說當它接收到新的props時，就會被調用，該函數會接收一個參數nextProps，即新的props，一樣能夠經過this.props來調用以前的props。它的做用是渲染掛載組件，在該函數內部也可使用refs（看上一個函數）來精肯定位一些須要操做的實例。

　　注意：該函數在在react16.3.0版本中止維護，若是要使用的話，請用UNSAFE_componentWillReceiveProps來代替。

　　6. shouldComponentUpdate（nextProps， nextState）

　　該函數有些特殊，當組件掛載完成以後，每次調用setState的時候纔會調用該函數。主要是用來判斷是否須要從新掛載組件，當調用該函數時默認從新掛載組件，從新渲染render。該函數傳入兩個參數，一個是nextProps即新的props，另外一個是nextState即新的state。在大型企業級後臺應用中，當部分變化不須要從新加載render的時候，能夠在該函數中進行操做。

　　7. componentWillUpdate()

　　該函數在初始化之時不會被調用，可是在接收到新的props或者當前組件的state狀態機更新以後並被當前函數接收到的時候被調用，在該函數之中不能夠修改狀態機，不然會形成死循環。

　　注意：React v16.3後廢棄該生命週期，能夠用新的週期 getSnapshotBeforeUpdate

　　8. componentDidUpdate()

　　初始化（即第一次渲染組件）時調用componentDidMount，在此以後的全部render結束以後都要調用componentDidUpdate。在該方法中能夠在組件更新以後操做DOM元素。

　　9.componentWillUnmount()

　　該函數在組件即將被卸載的時候被調用，通常在該方法中執行清理操做，例如定時器等。

　　嗯嗯，做爲一名小白，暫時的理解就到此爲止，有任何不對或者有疑問的地方歡迎各位大佬隨時評論。

　　友情連接：https://blog.csdn.net/qq_40023436/article/details/86508580

 

原文出處：https://www.cnblogs.com/andyzjy/p/10255560.html