# 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的次數