目錄
前言
前一篇則針對 React 語法進一步做講解， React JSX – React 白話文運動 06 學會了如何建立一個 React 元件，並且學會了元件之間有父子元件的關係。這一篇則會針對元件，講解元件的生命週期，包含：
- 生命週期三個階段
- 類別物件的生命週期
- 函式物件的生命週期
React 生命週期三個階段
生命週期（LifeCycle）是什麼呢？
我們可以想像一下，元件本身是有一些狀態的，例如：被創建、被使用者更新、因為資料修改而做更新、最後元件不需要而做刪除。通常這些狀態會是有先後順序的，因此才會有生命週期的產生。
通常生命週期都會搭配以下的圖去做講解，這張圖很清楚的講解生命週期的三個階段
來源：https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
從上圖可以看到有三個區塊，分別為：
- Mounting（裝載）
- Updating（更新）
- Unmounting（卸載）
在React元件中，也是圍繞著這三個階段，去做元件的加載、更新渲染、刪除。
類別元件的生命週期
類別元件（class component）本身就有生命週期。因為本身類別元件是一個物件，因此會有物件的特性。
不過現行都是使用函式元件，Hook 的出現，讓函式元件相對簡潔易懂。
以下是類別元件的範例程式碼：
import React, { Component } from 'react'
class Test extends Component {
constructor(props) {
super(props)
this.state = {
message: ''
}
this.setMessage = this.setMessage.bind(this)
}
setMessage() {
this.setState({ message: 'Hello World!' })
}
render() {
return (
<div>
<button onClick={this.setMessage}>Click</button>
<p>{this.state.message}</p>
</div>
)
}
}
裝載階段（Mounting）
constructor( ) 相當於物件導向程式設計中，建構子的概念。
可以設定初始值，並且可以在此函數之中，設定this並做綁定。
- render( ) 中文名稱為渲染，是將元件渲染至頁面中。透過回傳值中的JSX，將裡面內容渲染至頁面
更新階段（Updating）
- setMessage( ) 可以讓使用者在點擊按鈕時，做一次message資料的更新。
- render( ) 當資料狀態做一次更新之後，就會在觸發一次渲染。
函式元件的生命週期
函式元件（functional component）需要透過 React 內建的 Hook 才會有生命週期。Hook 是在 2018 年才被 Facebook 團隊發表出來的，因此在 2018 年以前，我們主要都是使用類別元件去做使用。
以下是函式元件中的範例程式碼，可以看到相對簡潔很多。
import React, { useState } from 'react'
function Test() {
const [message, setMessage] = useState('')
return (
<main>
<button onClick={() => setMessage('Hello World!')}>
Click
</button>
<p>{message}</p>
</main>
)
}
裝載階段（Mounting ）
- useState( ) 為 React hook 某一個函式，針對資料或是狀態進行初始化。
更新階段（Updating）
- setMessage( ) 可以讓使用者點擊時，更新 message 的資料，並且在 onClick 中，使用一個箭頭函式（arrow function）去做使用。
這邊只用簡單的程式碼展示一個物件會有的生命週期，不過還有更多種生命週期的情境，會在之後 hook 文章中，一一做介紹。
結語
這一篇主要介紹了元件的生命週期，並且用簡單的類別以及函式元件來描述生命週期。
未來會針對主流的函式元件，做 hook 的詳細介紹。
如果有任何建議與疑問也歡迎留言！
如果喜歡此系列文章，請不吝於按下喜歡及分享，讓更多人看到唷～
React 白話文運動系列
Babel & Webpack & NPM – React 白話文運動 07
JavaScript 高階函式 – React 白話文運動 04
JavaScript Async Await – React 白話文運動 03
繁體中文 
English 
简体中文 
한국어 
日本語 
Español