React中PureComponent和Component的区别

提到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