前言

今天要來講講比較進階一點的 component 了，如果對於 component 的基本觀念有任何不懂的歡迎先去看前兩天的文章來奠定一下基礎，沒問題的話就開始今天的文章瞜！

Day04-React components
Day05-state and props

Component

先從最簡單的 component 開始吧！ React.Component 是所有元件的基本，同時也是功能最彈性的元件，畢竟連 life cycle function 都可以自己實作了難道還不彈性嗎XD

不過這裡筆者就不細談 React.Component 了，畢竟之前已經用一篇文章的篇幅來解釋，想要複習的讀者歡迎到筆者 Day04 的文章閱讀更多細節。

PureComponent

PureComponent 的出現就是為了不常重新 render 的元件而誕生的，在 PureComponent 還沒出現之前，開發人員為了要提升元件的效能勢必得自己實作 shouldComponentUpdate ，利用 PureComponent 的好處就是就不用自己實作 shouldComponentUpdate ， PureComponent 會利用 shallow-compare 的方式進行比較， shallow compare 簡單來說就是對於基本型態(number、string...)是嚴格比較而對於物件則是比較是否指向同一個記憶體空間，然而 PureComponent 也不是萬能的，假如確定一個 component 是一定會不斷的重繪，其實就不需要 shouldComponentUpdate 反正每次比較後的回傳一定都會是 false ，這時候用一般的 React.Component 就會比用了 React.PureComponent 的效能來得高。

import React, { PureComponent } from 'react'

class App extends PureComponent {
  render() {
    // return jsx
  }
}

Functional Component

前面介紹了兩個 React 原生的元件，看似都很美好但讀者們不曉得有沒有發現一個問題，難道我每次想產生一個簡單的元件都必須要用 class 繼承的方式寫一段落落長的程式碼嗎？而且這樣做還會有個很大的缺點，要新增非常多的物件而每個物件都需要一個記憶體空間，如果只單純用上面提的到做法就容易讓網站吃非常多的記憶體，這時候就必須要發揮 JS 的特性了：可以把 function 當成是變數傳來傳去，這樣做有什麼好處呢？我只要在 function 內回傳 JSX 並交由其他的 container 進行 UI 繪製即可，這樣就可以節省非常多的空間讓其他的元件使用，可以說是非常重要的一種元件撰寫機制。

const App = () => (<h1>Hello Andy</h1>)

Higher-Order Component

Higher-Order Component 其實就是 Functional Component 的更進階版，在上面提到 Functional Component 就是為了處理更輕量化的元件，既然都講到 function 了那我們也可以把一些共同的邏輯抽取出來變藉由 Functional Component 的寫法而改造成一個更能被重用的元件，這個就是 Higher-Order Component 。

const Welcome = ({ name }) => <h1>Hello {name}</h1>

const Greeting = Component => ({ name, ...props }) => (
  <Component name={name} { ...props } />
)

const App = Greeting(Welcome)

simple-HOC

總結

今天終於把元件都介紹一輪了，對於初學 React.js 的人來說， Functional Component 以及 Higher-Order Component 會比較難理解，筆者建議初學者可以先好好的熟悉最基本的元件，之後再來學習上面提到比較進階的元件會比較好，不曉得讀者還記不記得前天的文章有提到，繼承 React.Component 就可以使用元件的 life cycle function ，但由於 Functional Component 以及 Higher-Order Component 並沒有繼承 React.Component 所以就無法使用 life cycle function ，這邊讀者要稍微留意一下喔！

如果對於文章有任何問題歡迎在下方留言給我，沒問題的話明天就要來介紹 React 的 event handler 了。