iT邦幫忙

0

淺談 React Class Component 與小小實作

挑戰 React 第十篇

什麼是 Class Component?

與上篇提到的 function Component 的前三點敘述流程幾乎一樣,只是把 function 變成 Class。

  1. 首先要有 Es6 的 Class
  2. Class 可選擇性的接收props 物件
  3. 內容回傳一個 React element, 而 React Element 通常以 Jsx 的方式撰寫
  4. 最大差別在於 Es6 Class 有 private 的 state 可以靈活運用 (state 與 props 下篇再介紹)

實作範例

目標

把下圖預設的 React 畫面換成 Hi Tom 文字

  1. 在 src 資料夾新增一個 Hi Component

  1. 在 Hi.js 檔案寫入以下程式碼
import React, { Component} from 'react';

class Hi extends Component {
  render(){
    return <h1>Hi Tom</h1>
  }
}

export default Hi

3.把 index.js 寫入 Hi Component

  1. yarn start 成果

兩種Component程式碼比較

// function Component
import React from 'react';

function Hello() {
  return <h1>Hello Tom</h1>
}

export default Hello;
// Class Component
import React, { Component} from 'react';

class Hi extends Component {
  render(){
    return <h1>Hi Tom</h1>
  }
}

export default Hi

兩種Component比較

Function Es6 Class
有無state 要用 useState hooks
有無this
UI 偏向笨組件 偏向聰明組件

學習心得

這篇對我來說與上篇的 function Component 極相似,但差在於寫法跟效能上的問題。
提一個題外話,在查詢資料過程當中發現了hooks這個東西,function Component hooks大概就是為了與 Class Component 一樣有 state 且變得更靈活,但讓程式碼可讀性更好,而衍伸出來的一種寫法,突然覺得前端的世界變化好快啊啊啊啊!!!但我還是會先研究組內的寫法 Es6 Class + Redux


尚未有邦友留言

立即登入留言