提到PureComponent，應該並不是react與生俱來就有的，而應該是在15.3版本之後才出現的，主要是為了取代之前的PureRenderMixin。所以對於幾年不怎麼接觸react的我來說，當提到PureComponent的時候，還是有那麼些許的懵逼。更不要說它於Component的區別是什麼？那麼我們先來看看pureComponent是個什麼鬼？

PureComponent其實就是一個繼承自Component的子類，會自動載入shouldComponentUpdate函式。當元件需要更新的時候，shouldComponentUpdate會對元件的props和state進行一次淺比較。如果props和state都沒有發生變化，那麼render方法也就不會出發，當然也就省去了之後的虛擬dom的生成和對比，在react效能方面得到了優化。

下面我們來看看PureComponent的原始碼：

export defualut function PureComponent (props, context) {
    Component.call(this, props, context)
}
PureComponent.prototype = Object.create(Component.prototye)
PureComponent.prototype.contructor = PureComponent
PureComponent.prototype.shouldComponentUpdate = shallowCompare
 
function shallowCompare (nextProps, nextState) {
 
    return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState)
}
 

我們可以看到PrueComponent總體來說就是繼承了Component，只不過是將shouldComponentUpdate重寫成了shallowCompare。而在shallowCompare中只是返回了shallowEqual的返回值。

function shallowEqual(objA: mixed, objB: mixed): boolean {
  if (is(objA, objB)) {
    return true;
  }
 
  if (typeof objA !== 'object' || objA === null ||
      typeof objB !== 'object' || objB === null) {
    return false;
  }
 
  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);
 
  if (keysA.length !== keysB.length) {
    return false;
  }
 
  // Test for A's keys different from B.
  for (let i = 0; i 
 
< keysA.length; i++) {
    if (
      !hasOwnProperty.call(objB, keysA[i]) ||
      !is(objA[keysA[i]], objB[keysA[i]])
    ) {
      return false;
    }
  }
 
  return true;
}

所以從shallowEqual中可以看出，其實就是比較了傳入的物件是不是一致，也就是淺比較了，props和state是不是一樣。從而來實現了一個另類的shouldComponentUpdate函式。所以從原始碼來，PureCompoennt僅僅是一個props和state的淺比較。當props和state是物件的時候，並不能阻止不必要的渲染。所以，使用PureComponent的時候需要注意：

1、確保資料型別是值型別；
2、如果是引用型別，不應該有資料深層次的資料變化。

我們來看看PureComponent和Component的區別是什麼？

區別：

1、就像是上面介紹PureComponent一樣，和Component的一個最大的區別在於PureComponent會自動執行shouldComponentUpdate函式，通過shallowEqual的淺對比，實現react的效能優化。而Component必須要通過自己去呼叫生命週期函式shouldComponentUpdate來實現react元件的優化。

2、PureComponent不僅會影響本身，而且會影響子元件，所以PureComponent最佳情況是展示元件

（1）加入父元件是繼承自PureComponent,而子元件是繼承自Component，那麼如果當父元件的props或者是state沒有變化而子元件的props或者state有變化，那麼此時子元件也不會有更新，因為子元件受到父元件的印象，父元件沒有更新。

（2）如果，父子元件均繼承自PureComponent，那麼父子元件的更新就會依賴與各自的props和state

（3）父元件是繼承自Component，而子元件是繼承自PureComponent那麼就是看各自的props和state

（4）當然如果父子元件都是繼承自Component那麼就是隻要有更新，那麼都會去重新渲染

3、若是陣列和物件等引用型別，則要引用不同，才會渲染

4、如果prop和state每次都會變，那麼PureComponent的效率還不如Component，因為你知道的，進行淺比較也是需要時間

5、若有shouldComponentUpdate，則執行它，若沒有這個方法會判斷是不是PureComponent，若是，進行淺比較

————————————————
版權宣告：本文為CSDN博主「leelxp」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/leelxp/article/details/108218088

參考

https://blog.csdn.net/leelxp/article/details/108218088