詳解React的生命週期

React生命週期

以前本身在學習React的時候，只是簡單的理解了生命週期有這麼一些，可是不知道大概的一個流程是怎麼樣的。那天在面試的時候，問到了。本身也有點懵，也沒提早看，不過仍是答上來了一些，這裏來總結一下。

1、理論

組件本質上是狀態即，輸入肯定，輸出必定肯定
生命週期的三個階段，三者時間是不固定的，只是在邏輯上的分類：

2、初始化階段

getDefaultProps：獲取實例的默認屬性（即便沒有生成實例，組件的第一個實例被初始化createClass的時候調用，只調用一次）
getInitialState：獲取每一個實例的初始化狀態（每一個實例本身維護）
componentWillMount：組件即將被裝載、渲染到頁面上，即組件掛載以前調用一次，若是在這個函數中調用setState，本次的render函數能夠看到更新後的state，而且只渲染一次
render:組件在這裏生成虛擬的DOM節點（只能訪問this.props和this.state,只有一個頂層組件，render返回值只能是一個組件，不容許修改狀態和DOM輸出）
componentDidMount：在組件掛載以後調用一次，這個時候子組件也都掛載好了，能夠在這裏使用refs。組件真正在被裝載以後能夠修改DOM

3、運行中狀態

componentWillReceiveProps（nextProps）：當組件props改變的時候，組件將要接收到新的屬性的時候調用。props是父組件傳遞給子組件的，父組件發生render的時候子組件就會調用這個方法，無論props有沒有更新，也無論父子組件之間有沒有數據交換。
shouldComponentUpdate（nextProps，nextState）：當組件數據（props）或者狀態（state）改變的時候調用，組件掛載以後，每次調用setState後都會調用shouldComponentUpdate判斷是否須要從新渲染組件。默認返回true，須要從新render。在比較複雜的應用裏，有一些數據的改變並不影響界面顯示，能夠在這裏作判斷，優化渲染效率。
componentWillUpdate（nextProps，nextState）:這個是shouldComponentUpdate方法返回true的時候或者調用forceUpdate以後調用。這時候不能修改屬性和狀態
render：只能訪問this.props和this.state,只有一個頂層組件，render返回值只能是一個組件，不容許修改狀態和DOM輸出
componentDidUpdate：除了首次render以後調用componentDidMount，其餘render結束以後都是調用componentDidUpdate

4、銷燬階段

componentWillUnmount：開發者須要來銷燬（組件真正刪除以前調用，好比銷燬計時器和事件監聽器）

React中，觸發render有四條路徑（更新方式）

如下假設shouldComponentUpdate都是按照默認返回true的方式
1.首次渲染（Initial render）
2.調用this.setState（並非一次setState會觸發一次render，React可能會合並操做，而後一次性進行render）
3.父組件發生更新（通常就是props發生改變，可是就算props沒有改變huozhe父子組件之間沒有數據交換也會觸發render）
4.調用this.forceUpdate

注意：若是在shouldComponentUpdate裏面返回false能夠提早退出更新路徑。