React - 元件的生命週期詳解（及各階段呼叫的方法）
轉自http://www.hangge.com/blog/cache/detail_1473.html
React - 元件的生命週期詳解（及各階段呼叫的方法）
2016-12-22釋出：hangge閱讀：2699
ReactJS 的核心思想是元件化，即按功能封裝成一個一個的元件，各個元件維護自己的狀態和 UI，當狀態發生變化時，會自定重新渲染整個元件，多個元件一起協作共同構成了 ReactJS 應用。
為了能夠更好的建立和使用元件，我們首先要了解元件的生命週期。
一、元件的生命週期
元件在整個 ReactJS 的生命週期中，主要會經歷這4個階段：建立階段、例項化階段、更新階段、銷燬階段。下面對各個階段分別進行介紹。
1，建立階段
- 該階段主要發生在建立元件類的時候，即呼叫 React.createClass 時觸發。
- 這個階段只會觸發一個 getDefaultProps 方法，該方法返回一個物件並快取起來。然後與父元件指定的 props 物件合併，最後賦值給 this.props 作為該元件的預設屬性。
props屬性介紹：
1，props 是一個物件，是元件用來接收外面傳來的引數的。
2，元件內部是不允許修改自己的 props 屬性，只能通過父元件來修改。上面的 getDefaultProps 方法便是處理 props 的預設值的。
2，例項化階段
該階段主要發生在例項化元件類的時候，也就是該元件類被呼叫的時候觸發。這個階段會觸發一系列的流程，按執行順序如下：
（1）getInitialState：初始化元件的 state 的值。其返回值會賦值給元件的 this.state 屬性。
（2）componentWillMount：根據業務邏輯來對 state 進行相應的操作。
（3）render：根據 state 的值，生成頁面需要的虛擬 DOM 結構，並返回該結構。
（4）componentDidMount：對根據虛擬 DOM 結構而生的真實 DOM 進行相應的處理。元件內部可以通過 ReactDOM.findDOMNode(this) 來獲取當前元件的節點，然後就可以像 Web 開發中那樣操作裡面的 DOM 元素了。
state屬性介紹：
它是用來儲存元件自身需要的資料。它是可以改變的，它的每次改變都會引發元件的更新。這也是 ReactJS 中的關鍵點之一。
即每次資料的更新都是通過修改 state 屬性的值，然後 ReactJS 內部會監聽 state 屬性的變化，一旦發生變化，就會觸發元件的 render 方法來更新 DOM 結構。
3，更新階段
這主要發生在使用者操作之後或者父元件有更新的時候，此時會根據使用者的操作行為進行相應得頁面結構的調整。這個階段也會觸發一系列的流程，按執行順序如下：
（1）componentWillReceiveProps：當元件接收到新的 props 時，會觸發該函式。在改函式中，通常可以呼叫 this.setState 方法來完成對 state 的修改。
（2）shouldComponentUpdate：該方法用來攔截新的 props 或 state，然後根據事先設定好的判斷邏輯，做出最後要不要更新元件的決定。
（3）componentWillUpdate：當上面的方法攔截返回 true 的時候，就可以在該方法中做一些更新之前的操作。
（4）render：根據一系列的 diff 演算法，生成需要更新的虛擬 DOM 資料。（注意：在 render 中最好只做資料和模板的組合，不應進行 state 等邏輯的修改，這樣元件結構更加清晰）
（5）componentDidUpdate：該方法在元件的更新已經同步到 DOM 中去後觸發，我們常在該方法中做一 DOM 操作。
4，銷燬階段
- 這個階段只會觸發一個叫 componentWillUnmount 的方法。
- 當元件需要從 DOM 中移除的時候，我們通常會做一些取消事件繫結、移除虛擬 DOM 中對應的元件資料結構、銷燬一些無效的定時器等工作。這些事情都可以在這個方法中處理。
二、完整的樣例
下面通過一個簡單的歡迎資訊元件，來演示元件各個環節的運作流程。同時這裡把元件整個生命週期中所有會觸發的方法都列出來了。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
|
控制檯輸出資訊如下(由於樣例中我沒有更新狀態，也沒有銷燬元件。所以也就沒有後面兩個階段）：
原文出自：www.hangge.com 轉載請保留原文連結：http://www.hangge.com/blog/cache/detail_1473.html