React 生命週期 – React 白話文運動 10

React10-React-Life-Cycle

前言

前一篇則針對 React 語法進一步做講解, React JSX – React 白話文運動 06 學會了如何建立一個 React 元件,並且學會了元件之間有父子元件的關係。這一篇則會針對元件,講解元件的生命週期,包含:

  1. 生命週期三個階段
  2. 類別物件的生命週期
  3. 函式物件的生命週期

React 生命週期三個階段

生命週期(LifeCycle)是什麼呢?

我們可以想像一下,元件本身是有一些狀態的,例如:被創建、被使用者更新、因為資料修改而做更新、最後元件不需要而做刪除。通常這些狀態會是有先後順序的,因此才會有生命週期的產生。

通常生命週期都會搭配以下的圖去做講解,這張圖很清楚的講解生命週期的三個階段

React 生命週期-hogantech
React 生命週期

來源:https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

從上圖可以看到有三個區塊,分別為:

  1. Mounting(裝載)
  2. Updating(更新)
  3. 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 白話文運動系列

React Props – React 白話文運動 09

建立React專案 – React 白話文運動 08

Babel & Webpack & NPM – React 白話文運動 07

React JSX – React 白話文運動 06

React 運作原理 – React 白話文運動 05

JavaScript 高階函式 – React 白話文運動 04

JavaScript Async Await – React 白話文運動 03

JavaScript ES6 Object – React 白話文運動 02

JavaScript ES6 – React 白話文運動 01

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

zh_TW繁體中文