前言

今天我打算說一下class跟function的差別，由於function component新增了hooks，幾乎取代掉了class component，所以基本上新的專案都是使用function component，不過礙於可能你們公司專案成立的較早，要改用hooks的成本很大，所以這邊我一樣都講，算是照顧一下class component的用戶

class

其實我剛開始寫class component時很痛苦，因為很多我看不懂的東西，constructor?super?extend，直到有一天我看到了一篇文章，才了解為什麼會這樣用，基本上就是ES6的class

先寫一下class component基本寫法:

class ABC extend React.Component{
    constructor(){
    super()
    }
    render(){
    return (
    )
  }
}

這邊我一個一個介紹，如果有不懂的可以搭配上面的文章
extends 用處是繼承指定原型，所以程式碼可看出，我們的ABC希望可以繼承Component的原型，就會有react.component的所有功能

constructor 建構子 主要是接收上層傳過來的state

function

funciton component 基本上就跟一般的function沒兩樣，沒有自己的state，所以在hooks出現以前，是class component的天下，直到hooks出現，function component才正式被大家所重視，(useState等同於state)寫法如下:

function ABC(){
    return (
    )
}

arrow function

const ABC = () =>{
    return (
    )
}

這陣子比較忙，因為換了新的公司，需要時間習慣，所以就會更新比較慢，不過未來會持續完成30天跳戰