---
# System prepended metadata

title: Higher-Order Component and Pure Component

---

# Higher-Order Component and Pure Component

##  HOC(Higher-Order Component)

### 定義
    1.高階組件 (HOC) 是 React 中用於重用組件邏輯的高級技術。
      HOC 本身並不是React API的一部分。它們是從 React 的組合性質中出現的一種模式。   
    2.HOC 僅僅是一個函式，且傳入一個元件，會回傳一個被包裝後的元件回來。
    
### 使用方式

    //第一個Component
    const WrappedComponent = ({ name }) => (
        <p>I'm {name}</p>
    )
    
    //第二個Component (可以接受Component傳入)
    const higherOrderComponent = Component => props =>
      (
        <>
              <h1>Hello World</h1>
                <Component {...props} /> 
        </>
    )

    const rootElement = document.getElementById('root');

    const App = higherOrderComponent(WrappedComponent)
    ReactDOM.render(<App name='Hannah' />, rootElement)
### 為甚麼要用HOC
    HOC 最大的功用就是利用不同組合的元件，能夠不斷 reuse 並減少重覆的程式碼
    
# Pure Component
 purecomponent 跟 component 的差別
 purecomponent 多了一個 shouldComponentUpdate()


---

 繼承 PureComponent 的時候，請確保你只有簡單的 prop 跟 state
 
 ## shouldComponentUpdate()的功用
    1.預設值為ture
    2.會在新的 prop 或 state 被接收之後並在該 component 被 render 之前被呼叫
      output 並不會被目前在 state 或 prop 內的改變所影響
    3.採用 shallow compare 的方式對前後兩個 state 或 props 進行比較
       (只對 object 進行 shallow compare)
    4.當比較結果一樣 回傳false ,不會render
    5.當比較結果不一樣 回傳true ,會render

補充: shallow compare是甚麼

    1. 採用嚴格相等：對於基本型別(number, string, boolean, null, undefined,
       symbol)值必須要完全相等 ; 對於物件型別 (object, array, function)
       必須指向同一個reference。
    2. 只比到第一層：這也就是 shallow 的含義，第一層的值要嚴格相等，且屬性名稱、數目必須一樣。
    
    
為甚麼要使用pure component
1.     減少render的次數
