Day6 Class vs Function

前言

今天我打算说一下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天跳战