在hooks出來以前，組件的生命週期也只有class component能用而已，一樣請參考這篇，在組件要渲染的階段React有提供一些函式，大概可分為渲染完、State改變和組件被移除時。

這裡提供一個連結可以清楚看到React的生命週期

React Lifecycle可分為掛載時(Mounting)、更新時(Updating)、卸載時(Unmounting)，而各個階段有不同的函式可使用。

掛載時(Mounting)：

constructor
ES6的語法糖，可參考這篇文章，初始化並建構物件，通常state的初始值會在這裡賦值，不過現在也可以放在外面，也可以透過arrow function綁定method。

render
負責渲染畫面，要注意只要使用setState或是更新父組件傳的props就會重新渲染，也就是再執行一次render function

componentDidMount
在建構完組件後被執行，如果有在這期間綁定事件的話要記得在Unmounting移除

更新時(Updating)：

componentDidUpdate
在狀態更新且重新渲染的時候會觸發，要注意執行的時機，否則會進入無限迴圈

卸載時(Unmounting)：

componentWillUnmount
組件要被移除時會執行，通常要清除綁定的事件、cookie…等，另外在這裡執行setState是不會觸發重新渲染的

以上介紹的幾個function可以歸納出他們的觸發順序

constructor -> render -> componentDidMount -> render(re-render by updating) -> componentDidUpdate -> componentWillUnmount

有了這些函式對於元件有更方便的控制，在functional component 並沒有這些函式使用，但是可以透過hooks來達到類似生命週期的控制。

參考資料：

Component Lifecycle