> For the complete documentation index, see [llms.txt](https://jack1in.gitbook.io/font-end/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jack1in.gitbook.io/font-end/3.-react/3.5-component-purecomponent.md).

# 3.5 Component 與 PureComponent

### **Component**

在 React 的世界當中，Component 不管是 props 或是 state 的改變一律重繪(re-render)

### **PureComponent**

PureComponent 實作了 React Component 生命週期中的 `shouldComponentUpdate()` ，他會「**淺層比較** Component 的前一次與後一次 的 props 與 state，來決定要不要更新」。

#### **什麼是淺層比較 (Shallow Equal)？**

簡單的來說，其實就 JavaScript 中的 `===` 運算子(comparison operator)，如果你常寫 JavaScript 應該會很常用到它！也就是說，如果你有兩個 JavaScript 物件的變數 a 跟 b 要做淺層比較，就會使用 `a === b` 。

適用於 JavaScript 的物件型別 (包含物件與陣列)，JavaScript 的六種基本型別不在討論範圍內 (包含 Boolean, undefined, null, String, Number 與 Symbol)。