PureComponent是react中创建组件的一种方式，可以减少不必要的更新，进而提升性能，每次更新会自动帮你对更新前后的props和state进行一个简单对比，来决定是否进行更新，浅比较通过一个shallowEqual函数来完成：
ReactFiberClassComponent
//如果实现组件实例了shouldComponentUpdate则返回调用它的结果 if (typeof instance.shouldComponentUpdate === 'function') { const shouldUpdate = instance.shouldComponentUpdate( newProps, newState, nextContext, ); return shouldUpdate; }//如果组件是继承了PureComponen，那就使用shallowEqual对新旧状态属性进行浅比较 if (ctor.prototype && ctor.prototype.isPureReactComponent) { return ( !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState) ); } return true;
shallowEqual.js
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;}export default shallowEqual;
总结
根据以上代码，可以把PureComponent的浅比较归纳为以下四个步骤：
1.判断新旧Props、State是否相同，如果相同，则不需要更新 （如果是原始数据类型，值相同就相同；如果是引用数据类型，同一个引用对象表示相同） 2.如果不相同，则判断至少一个参数不为object类型或者为null （经过1、2两层对比，表明两者都为对象，但是引用地址不同） 3.判断两者的key数量是否相同 4.判断两者key对应的value是否都相同