大綱

• 生命週期方法
• 生存期

生命週期方法

React 元件有最低的生命週期 API，提供給我們開發時所需要的東西，也不會有多餘的內容。接下來將介紹這些 API。

實作化：

在專案開發的初期時，首次建立實作時呼叫的生命週期方法，和隨後才建立的實作時呼叫的生命週期方法是有些許差別的。對於首次使用的元件類別 (class)，我們按照被呼叫的順序，請看以下：

• getDefaultProps
• getInitialState
• componentWillMount
• render
• componentDidMount

對於這個元件類別之後的使用，我們就會看到以下的方法被呼叫，在這裡要特別注意的是，getDefaultProps 方法已不在這個清單中，哪....其按照順序，分別如下：

• getInitialState
• componentWillMount
• render
• componentDidMount

生存期：

隨著應用程式狀態的改變，我們在開發中的元件，一定會被影響，在這個時候，以下的方法會被呼叫，哪....其按照順序，分別如下：

• componentWillReceivProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

銷毀與清理：
到了最後階段，當我們使用完某一個元件，我們會看到 componentWillUnmount 被呼叫，讓我們的元件有機會完成一些清理的動作。然後，在這個階段，又可分為實作、存在期和銷毀與清理三個方法，其這三個方法的介紹，請參考如下。

實作：getDefaultProps
一個元件的類別只會呼叫這個方法一次。傳回的物件是用來設定哪些沒有被父元件指定預設值的新元件的預設值。

實作：getInitialState
元件的每一個實作時都會呼叫一次，在這個時候我們可以初始化 (initialize) 每一個實作的自訂狀態 (state)。不像 getDefaultProps 方法，每一個實作被建立時都會呼叫一次這個方法。

實作：componentWillMount
在初次渲染前執行。這是渲染前的最後一次機會去影響元件狀態。

實作：render
在這裡我們可以建立代表元件虛擬的 DOM。Render 是元件唯一一個必需的方法，而且它具備了特地的規則。以下是 render 方法時的要求：

• 其唯一能存取的資料是 this.props 和 this.state。
• 我們可以傳回 null、false 或任何其他的 React 元件。
• 我們也只會有一個頂層的元件 (這代表者不能傳回元素的陣列)。
• React 元件不能改變或是修改 DOM 的輸出。

要特別注意的是，render 傳回的並不是實際的 DOM，而是一個虛擬的具象 (representation)，React 在稍後會用來和真正的 DOM 進行 diff 比較，以讓我們決定是否真的要作出修改。

實作：componentDidMount
Render 在完成的時候且實際的 DOM 也被渲染成功後，我們就可以在 componentDidMount 中透過 this.getDOMNode() 來存取。

生存期
在這個階段時，我們的元件已經渲染完成，且可以與使用者互動。通常這個情境是會涉及到透過點擊、觸控或是事件....