前面有說過 React 的元件主要撰寫方式有兩種：

• Functional 元件
• Class 元件

Functional元件通常是在沒有自己內部狀態，不需要控制元件的生命週期時，使用Functional元件寫法比較單純，可以獲得比較好的效能。

而當需要進行比較複雜的操作和控制的元件生命週期時，就一定要使用Class元件的寫法，相對的一定比Functional元件消耗資源。

昨天對元件的屬性(Props)和狀態(State)的區別和用法進一步了解，今天再來看看元件的生命週期。

生命週期（Life Cycle）

在React元件的設計中每個元件實際上都是有生命週期(Lifecycle)的設計，一般而言元件有以下三種生命週期的狀態：

• 掛載 ( Mounting )
• 更新 ( Updating )
• 卸載 ( Unmounting )

生命週期也就是一個元件從一開始掛載(Mounting)到網頁上，然後呈現在網頁上，在網頁上因為事件的觸發進行更新(Updating)或重新渲染，最後從網頁上消失，稱為卸載(Unmounting)。

這些生命週期的階段，設計了一些方法讓開發者使用，在某個生命週期階段你可以利用這些方法，在裡面執行一些操作：

掛載 ( Mounting )

• constructor()：建構初始化
• render()：將元件內容輸出在網頁上
• componentDidMount()：元件內容輸出後會進行一次呼叫

更新 ( Updating )

• render()
• componentDidUpdate()
• componentWillReceiveProps()：已載入元件state值改變時呼叫
• shouldComponentUpdate()：元件判斷是否重新渲染時呼叫

卸載 ( Unmounting )

• componentWillUnmount()：元件被移除前呼叫

另外要注意執行setState、更新父元件傳送的props，都會執行render()，所以不建議在這邊render()執行setState，容易產生無限迴圈。