React.Component 與 React.PureComponent

React.Component 與 React.PureComponent

通常創建組件時，我們會繼承Component 如下所示，這時我們可通過shouldComponentUpdate方法進行條件渲染。當props與state發現改變時，就會進入shouldComponentUpdate ，當該方法返回true時，則進行重新渲染。

import React, { Component } from 'react'
class myComp extends Component{
	shouldComponentUpdate(nextProps, nextState) {
		return true
	}
	render(){
		return (<><div>Hellow World!</div></>)
	}
}

而繼承PureCompoent又是怎麼用的呢？

1、繼承PureComponent時，不能再重寫shouldComponentUpdate
2、繼承PureComponent時，進行的是淺比較，也就是說，如果是引用類型的數據，只會比較是不是同一個地址，而不會比較具體這個地址存的數據是否完全一致
3、淺比較會忽略屬性或狀態突變的情況，其實也就是，數據引用指針沒變而數據被改變的時候，也不新渲染組件。但其實很大程度上，我們是希望重新渲染的。所以，這就需要開發者自己保證避免數據突變。

所以使用PureComponent很明顯，可以提高性能，減低沒必要的渲染工作