PureComponent是react中创建组件的一种方式，可以减少不必要的更新，进而提升性能，每次更新会自动帮你对更新前后的props和state进行一个简单对比，来决定是否进行更新，浅比较通过一个shallowEqual函数来完成：

ReactFiberClassComponent

  1. //如果实现组件实例了shouldComponentUpdate则返回调用它的结果
  2.   if (typeof instance.shouldComponentUpdate === 'function') {
  3.     const shouldUpdate = instance.shouldComponentUpdate(
  4.       newProps,
  5.       newState,
  6.       nextContext,
  7.     );
  9.     return shouldUpdate;
  10.   }
  11. //如果组件是继承了PureComponen，那就使用shallowEqual对新旧状态属性进行浅比较
  12.  if (ctor.prototype && ctor.prototype.isPureReactComponent) {
  13.     return (
  14.       !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)
  15.     );
  16.   }
  18.   return true;

shallowEqual.js 

  2. function shallowEqual(objA: mixed, objB: mixed): boolean {
  3.   if (is(objA, objB)) {
  4.     return true;
  5.   }
  7.   if (
  8.     typeof objA !== 'object' ||
  9.     objA === null ||
  10.     typeof objB !== 'object' ||
  11.     objB === null
  12.   ) {
  13.     return false;
  14.   }
  16.   const keysA = Object.keys(objA);
  17.   const keysB = Object.keys(objB);
  19.   if (keysA.length !== keysB.length) {
  20.     return false;
  21.   }
  23.   // Test for A's keys different from B.
  24.   for (let i = 0; i < keysA.length; i++) {
  25.     if (
  26.       !hasOwnProperty.call(objB, keysA[i]) ||
  27.       !is(objA[keysA[i]], objB[keysA[i]])
  28.     ) {
  29.       return false;
  30.     }
  31.   }
  33.   return true;
  34. }
  36. export default shallowEqual;

总结

根据以上代码，可以把PureComponent的浅比较归纳为以下四个步骤：

1.判断新旧Props、State是否相同，如果相同，则不需要更新
（如果是原始数据类型，值相同就相同；如果是引用数据类型，同一个引用对象表示相同）
2.如果不相同，则判断至少一个参数不为object类型或者为null
（经过1、2两层对比，表明两者都为对象，但是引用地址不同）
3.判断两者的key数量是否相同
4.判断两者key对应的value是否都相同